Merge branch 'main' into feature/issue-807

.github/workflows/build-production-deploy-s3.yml

@@ -39,4 +39,5 @@ jobs:
 
       - name: Send Email on Success
         if: success()
-        run: curl -X "POST" "https://api.sendgrid.com/v3/mail/send" -H "Authorization: Bearer ${{ secrets.SENDGRID_API_KEY}}" -H "Content-Type: application/json" --data '{"personalizations": [{"to": [{"email": "${{secrets.SENDGRID_TO_EMAIL}}"}]}],"from": {"email":"${{SENDGRID_FROM_EMAIL}}"},"subject": "Footlight CMS Deployment","content": [{"type": "text/html", "value": "<p>Hi<br><br> We are excited to announce that we have just released a new version of Footlight CMS. The latest release can be found <a href = 'https://github.com/culturecreates/footlight-app/releases/latest'>here</a>.<br><br>Best,<br>Footlight admin</p>"}]}'    
+        run: curl -X "POST" "https://api.sendgrid.com/v3/mail/send" -H "Authorization: Bearer ${{ secrets.SENDGRID_API_KEY}}" -H "Content-Type: application/json" --data '{"personalizations": [{"to": [{"email": "${{secrets.SENDGRID_TO_EMAIL}}"}]}],"from": {"email":"${{SENDGRID_FROM_EMAIL}}"},"subject": "Footlight CMS Deployment","content": [{"type": "text/html", "value": "<p>Hi<br><br> We are excited to announce that we have just released a new version of Footlight CMS. The latest release can be found <a href = 'https://github.com/culturecreates/footlight-app/releases/latest'>here</a>.<br><br>Best,<br>Footlight admin</p>"}]}'    
+

src/components/Card/Common/event.css

@@ -1,12 +1,12 @@
 .add-event-section-col {
-  padding: 24px;
+  padding: 24px !important;
   background-color: #ffffff;
   padding-left: 24px;
   padding-right: 24px;
 }
 
 .add-event-section-col .add-event-section-wrapper {
-  padding: 24px;
+  padding: 8px !important;
   background-color: #ffffff;
 }
 

src/components/DraggableTree/DraggableTree.jsx

@@ -337,9 +337,12 @@ const DraggableTree = ({
     <div className="draggable-tree">
       <LanguageFilter calendarContentLanguage={calendarContentLanguage}>
         <Form.Item style={{ width: '50%' }} key={contentLanguage.ENGLISH}>
-          <span className="tag-header">{t('dashboard.taxonomy.addNew.concepts.english')}</span>
+          <span className="tag-header" data-cy="span-taxonomy-concept-english-title">
+            {t('dashboard.taxonomy.addNew.concepts.english')}
+          </span>
           <div className="tree-item">
             <Tree
+              data-cy="tree-taxonomy-concept-english"
               className="draggable-tree"
               draggable
               blockNode
@@ -357,9 +360,12 @@ const DraggableTree = ({
 
       <LanguageFilter calendarContentLanguage={calendarContentLanguage}>
         <Form.Item style={{ width: '50%' }} key={contentLanguage.FRENCH}>
-          <span className="tag-header">{t('dashboard.taxonomy.addNew.concepts.french')}</span>
+          <span className="tag-header" data-cy="span-taxonomy-concept-french-title">
+            {t('dashboard.taxonomy.addNew.concepts.french')}
+          </span>
           <div className="tree-item" style={{ borderRight: 'solid 4px #eff2ff' }}>
             <Tree
+              data-cy="tree-taxonomy-concept-french"
               className="draggable-tree"
               draggable
               blockNode
@@ -378,11 +384,12 @@ const DraggableTree = ({
 
       <div className="addmodal">
         <CustomModal
+          data-cy="modal-taxonomy-concept"
           open={addNewPopup}
           destroyOnClose
           centered
           title={
-            <span className="quick-create-organization-modal-title">
+            <span className="quick-create-organization-modal-title" data-cy="span-taxonomy-concept-add-edit">
               {!forEditing ? t('dashboard.taxonomy.addNew.concepts.add') : t('dashboard.taxonomy.addNew.concepts.edit')}
             </span>
           }
@@ -392,6 +399,7 @@ const DraggableTree = ({
               {deleteDisplayFlag && (
                 <div key="delete-contaoner" className="delete-contaioner">
                   <Outlined
+                    data-cy="button-taxonomy-concept-delete"
                     key="delete"
                     label={t('dashboard.settings.addUser.delete')}
                     onClick={() => handleDelete()}
@@ -405,12 +413,14 @@ const DraggableTree = ({
               )}
               <div style={{ flexGrow: 1 }}>
                 <TextButton
+                  data-cy="button-taxonomy-concept-cancel"
                   key="cancel"
                   size="large"
                   label={t('dashboard.events.addEditEvent.quickCreate.cancel')}
                   onClick={() => handleAddChildModalClose()}
                 />
                 <PrimaryButton
+                  data-cy="button-taxonomy-concept-edit"
                   key="add-dates"
                   label={
                     forEditing
@@ -442,6 +452,7 @@ const DraggableTree = ({
                       }),
                     ]}>
                     <TextArea
+                      data-cy="input-text-area-concept-name-french"
                       autoSize
                       autoComplete="off"
                       placeholder={t('dashboard.taxonomy.addNew.concepts.placeHolderFr')}
@@ -468,6 +479,7 @@ const DraggableTree = ({
                       }),
                     ]}>
                     <TextArea
+                      data-cy="input-text-area-concept-name-english"
                       autoSize
                       autoComplete="off"
                       onChange={(e) => {

src/components/Filter/SearchableCheckbox/SearchableCheckbox.jsx

@@ -21,6 +21,7 @@ function SearchableCheckbox(props) {
   return (
     <Checkbox.Group onChange={onFilterChange} value={value}>
       <Dropdown
+        data-cy="dropdown-searchable-checkbox"
         menu={{
           items: items,
           selectable: true,
@@ -32,7 +33,9 @@ function SearchableCheckbox(props) {
           <div className="searchable-checkbox-dropdown-wrapper">
             {allowSearch && (
               <AuthenticationInput
+                data-cy="input-search-entity"
                 size="small"
+                allowClear={true}
                 placeholder={t('dashboard.events.filter.users.placeholderSearch')}
                 onChange={(e) => props.setSearchKey(e.target.value)}
                 prefix={<SearchOutlined />}

src/components/List/ListItem.jsx/ListItem.jsx

@@ -30,17 +30,19 @@ function ListItem(props) {
   const lang = i18n.language;
   return (
     <List.Item
+      data-cy="list-item-entity"
       className="event-list-item-wrapper"
       key={id}
       actions={actions}
       style={{ padding: '20px 0px', ...props?.styles?.style }}>
       <List.Item.Meta
         className="event-list-item-meta"
         onClick={listItemHandler}
+        data-cy="list-item-meta-entity"
         avatar={
           logo ? (
             <div className="event-list-image-wrapper" style={{ height: '40px', width: '40px' }}>
-              <img src={logo} className="event-list-image" />
+              <img src={logo} className="event-list-image" data-cy="image-entity-logo" />
             </div>
           ) : (
             <div
@@ -60,8 +62,10 @@ function ListItem(props) {
         }
         description={
           <div className="event-list-description">
-            <span className="event-list-description-name">{title}</span>
-            <span className="event-list-description-place" style={{ width: '100%' }}>
+            <span className="event-list-description-name" data-cy="span-entity-title">
+              {title}
+            </span>
+            <span className="event-list-description-place" style={{ width: '100%' }} data-cy="span-entity-description">
               {description}
             </span>
           </div>
@@ -71,15 +75,19 @@ function ListItem(props) {
         className="event-status-list-item"
         title={
           artsDataLink && (
-            <ArtsDataLink onClick={() => window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer')}>
-              <span style={{ textDecoration: 'underline' }}>Artsdata</span>
+            <ArtsDataLink
+              onClick={() => window.open(`${artsDataLink}`, '_blank', 'noopener,noreferrer')}
+              data-cy="tag-entity-artsdata">
+              <span style={{ textDecoration: 'underline' }} data-cy="span-entity-artsdata">
+                Artsdata
+              </span>
               <LinkOutlined />
             </ArtsDataLink>
           )
         }
         description={
           <div className="event-list-status">
-            <span className="event-list-status-created-by">
+            <span className="event-list-status-created-by" data-cy="span-entity-created-date">
               {t('dashboard.events.list.createdBy')}&nbsp;
               {moment
                 .tz(createdDate, scheduleTimezone ?? 'Canada/Eastern')
@@ -88,10 +96,10 @@ function ListItem(props) {
                 ?.toUpperCase()}
               &nbsp;
               {t('dashboard.events.list.by')}&nbsp;
-              <Username userName={createdByUserName} />
+              <Username userName={createdByUserName} data-cy="span-entity-created-username" />
             </span>
             {updatedByUserName ? (
-              <span className="event-list-status-updated-by">
+              <span className="event-list-status-updated-by" data-cy="span-entity-updated-date">
                 {t('dashboard.events.list.updatedBy')}&nbsp;
                 {moment
                   .tz(updatedDate, scheduleTimezone ?? 'Canada/Eastern')
@@ -100,7 +108,7 @@ function ListItem(props) {
                   ?.toUpperCase()}
                 &nbsp;
                 {t('dashboard.events.list.by')}&nbsp;
-                <Username userName={updatedByUserName} />
+                <Username userName={updatedByUserName} data-cy="span-entity-updated-username" />
               </span>
             ) : (
               <></>

src/components/List/User/CalenderSelect/CalendarSelect.jsx

@@ -17,15 +17,21 @@ const CalendarSelect = (props) => {
           <>
             {currentUser ? (
               <div key={name} className="button-container">
-                <Button type="text" key="list-loadmore-close" onClick={onButtonClick} style={{ padding: '0px' }}>
+                <Button
+                  type="text"
+                  key="list-loadmore-close"
+                  onClick={onButtonClick}
+                  style={{ padding: '0px' }}
+                  data-cy="button-calendar-leave">
                   {t('dashboard.settings.addUser.leave')}
                 </Button>
               </div>
             ) : (
               <Button
                 size="large"
                 className="filter-buttons role-added-button"
-                style={{ padding: '4px 8px', height: 'auto' }}>
+                style={{ padding: '4px 8px', height: 'auto' }}
+                data-cy="button-user-role">
                 {calenderItem?.role}
               </Button>
             )}
@@ -42,13 +48,19 @@ const CalendarSelect = (props) => {
                 backgroundColor: '#E3E8FF',
                 borderRadius: '4px',
               }}
+              data-cy="avatar-calendar-image"
             />
           }
-          title={<span className="selection-item-title">{name}</span>}
+          title={
+            <span className="selection-item-title" data-cy="span-calendar-name">
+              {name}
+            </span>
+          }
         />
 
         {currentUser && (
           <Button
+            data-cy="button-calendar-role"
             size="large"
             className="filter-buttons role-added-button"
             style={{ padding: '4px 8px', height: 'auto' }}>

src/components/List/User/ListCard.jsx

@@ -9,13 +9,23 @@ const ListCard = (props) => {
   const { t } = useTranslation();
   return (
     <List.Item className="users-list-item-wrapper" key={id} actions={actions} {...styles}>
-      <List.Item.Meta className="user-item-meta" title={title} description={description} onClick={listItemHandler} />
+      <List.Item.Meta
+        className="user-item-meta"
+        title={title}
+        description={description}
+        onClick={listItemHandler}
+        data-cy="list-item-user-meta"
+      />
       <div className="user-item-content" onClick={listItemHandler}>
         <StatusTag activityStatus={activityStatus} />
         {invitedBy && (
           <div className="invitation-details">
-            <span className="invitation-details-text-prologue">{t('dashboard.settings.userManagement.invitedBy')}</span>
-            <span className="invitation-details-username">{invitedBy}</span>
+            <span className="invitation-details-text-prologue" data-cy="user-invited-by-title">
+              {t('dashboard.settings.userManagement.invitedBy')}
+            </span>
+            <span className="invitation-details-username" data-cy="user-invited-by">
+              {invitedBy}
+            </span>
           </div>
         )}
       </div>

src/components/Modal/ChangePassword/ChangePassword.jsx

@@ -57,6 +57,7 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
               <>
                 {error?.data?.message} &nbsp;
                 <Button
+                  data-cy="button-close-warning"
                   type="text"
                   icon={<CloseCircleOutlined style={{ color: '#222732' }} />}
                   onClick={() => message.destroy('udpate-user-warning')}
@@ -73,6 +74,7 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
 
   return (
     <Modal
+      data-cy="modal-change-password"
       cancelText={t('dashboard.settings.addUser.passwordModal.Cancel')}
       okText={t('dashboard.settings.addUser.passwordModal.changePassword')}
       cancelButtonProps={{ className: 'cancel-button' }}
@@ -88,6 +90,7 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
       }}>
       <Form form={form} layout="vertical" name="passwordForm" onFinish={handleFormSubmit}>
         <Form.Item
+          data-cy="form-item-password-title"
           label={t('dashboard.settings.addUser.passwordModal.Password')}
           name="password"
           rules={[
@@ -96,9 +99,13 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
               message: t('resetPassword.validations.emptyPassword'),
             },
           ]}>
-          <PasswordInput placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.current')} />
+          <PasswordInput
+            placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.current')}
+            data-cy="input-user-password"
+          />
         </Form.Item>
         <Form.Item
+          data-cy="form-item-new-password-title"
           label={t('dashboard.settings.addUser.passwordModal.newPassword')}
           name="newPassword"
           rules={[
@@ -107,9 +114,13 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
               message: t('resetPassword.validations.emptyPassword'),
             },
           ]}>
-          <PasswordInput placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.new')} />
+          <PasswordInput
+            placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.new')}
+            data-cy="input-user-new-password"
+          />
         </Form.Item>
         <Form.Item
+          data-cy="form-item-confirm-password-title"
           label={t('dashboard.settings.addUser.passwordModal.confirmNewPassword')}
           name="confirmPassword"
           dependencies={['newPassword']}
@@ -127,7 +138,10 @@ const ChangePassword = ({ isPopoverOpen, setIsPopoverOpen }) => {
               },
             }),
           ]}>
-          <PasswordInput placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.confirm')} />
+          <PasswordInput
+            placeholder={t('dashboard.settings.addUser.passwordModal.placeHolder.confirm')}
+            data-cy="input-user-confirm-password"
+          />
         </Form.Item>
       </Form>
     </Modal>

src/components/Sidebar/Main/Sidebar.jsx

@@ -9,6 +9,7 @@ import { PathName } from '../../../constants/pathName';
 import { contentLanguageBilingual } from '../../../utils/bilingual';
 import { useSelector } from 'react-redux';
 import { getUserDetails } from '../../../redux/reducer/userSlice';
+import { clearSessionStoredSearchQueries } from '../../../utils/clearSessionStoredSearchQueries';
 
 const { Sider } = Layout;
 
@@ -76,6 +77,9 @@ function Sidebar(props) {
   }, [currentCalendarData]);
 
   const onSidebarClickHandler = ({ item, key }) => {
+    if (key !== selectedKey) {
+      clearSessionStoredSearchQueries();
+    }
     setSelectedKey([key]);
     navigate(`${PathName.Dashboard}/${calendarId}${item.props.path}`);
   };

src/components/Sort/Sort.jsx

@@ -22,7 +22,9 @@ function Sort(props) {
   };
   return (
     <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-      <span style={{ fontSize: '16px', fontWeight: 700 }}>{t('dashboard.events.filter.sort.sortBy')}</span>
+      <span style={{ fontSize: '16px', fontWeight: 700 }} data-cy="span-sort-by-title">
+        {t('dashboard.events.filter.sort.sortBy')}
+      </span>
 
       <Dropdown
         overlayClassName="filter-sort-dropdown-wrapper"
@@ -40,7 +42,12 @@ function Sort(props) {
         <Button size="large" className="filter-sort-button" style={{ cursor: 'default' }} data-cy="button-sort-options">
           <Space>
             {sortByOptionsOrgsPlacesPerson?.map((sortBy, index) => {
-              if (sortBy?.key === filter?.sort) return <span key={index}>{sortBy?.label}</span>;
+              if (sortBy?.key === filter?.sort)
+                return (
+                  <span key={index} data-cy={`span-sort-option-${sortBy?.label}`}>
+                    {sortBy?.label}
+                  </span>
+                );
             })}
             {/* <DownOutlined style={{ fontSize: '12px', color: '#222732' }} /> */}
           </Space>

src/components/Tags/UserStatus/StatusTag.jsx

@@ -38,7 +38,7 @@ const StatusTag = ({ activityStatus }) => {
     }
   };
   return (
-    <div className="user-status-tag">
+    <div className="user-status-tag" data-cy="user-status-tag">
       <Tags color={activityStatusTextColor} style={activityStatusStyle}>
         {activityStatusText}
       </Tags>