MM-36919 Custom status expiry

actions/emoji_actions.js

@@ -77,6 +77,7 @@ export function addRecentEmoji(alias) {
 }
 
 export function loadCustomEmojisForCustomStatusesByUserIds(userIds) {
+    const getCustomStatus = makeGetCustomStatus();
     return (dispatch, getState) => {
         const state = getState();
         const customEmojiEnabled = isCustomEmojiEnabled(state);
@@ -85,7 +86,6 @@ export function loadCustomEmojisForCustomStatusesByUserIds(userIds) {
             return {data: false};
         }
 
-        const getCustomStatus = makeGetCustomStatus();
         const emojisToLoad = new Set();
 
         userIds.forEach((userId) => {

components/channel_header/__snapshots__/channel_header.test.jsx.snap

@@ -1237,6 +1237,217 @@ exports[`components/ChannelHeader should render not active channel files 1`] = `
 </div>
 `;
 
+exports[`components/ChannelHeader should render properly when custom status is expired 1`] = `
+<div
+  aria-label="channel header region"
+  className="channel-header alt a11y__region"
+  data-a11y-sort-order="8"
+  data-channelid="undefined"
+  id="channel-header"
+  role="banner"
+  tabIndex="-1"
+>
+  <div
+    className="flex-parent"
+  >
+    <div
+      className="flex-child"
+    >
+      <div
+        className="channel-header__info"
+        id="channelHeaderInfo"
+      >
+        <div
+          className="channel-header__title dropdown"
+        >
+          <div>
+            <MenuWrapper
+              animationComponent={[Function]}
+              className=""
+              onToggle={[Function]}
+            >
+              <div
+                className="channel-header__top"
+                id="channelHeaderDropdownButton"
+              >
+                <button
+                  aria-label="channel menu"
+                  className="channel-header__trigger style--none "
+                >
+                  <strong
+                    aria-level="2"
+                    className="heading"
+                    id="channelHeaderTitle"
+                    role="heading"
+                  >
+                    <span>
+                      <ArchiveIcon
+                        className="icon icon__archive icon channel-header-archived-icon svg-text-color"
+                      />
+                      <FormattedMessage
+                        defaultMessage="{displayname} (you) "
+                        id="channel_header.directchannel.you"
+                        values={
+                          Object {
+                            "displayname": undefined,
+                          }
+                        }
+                      />
+                      <GuestBadge
+                        className=""
+                        show={false}
+                      />
+                    </span>
+                  </strong>
+                  <span
+                    aria-label="dropdown icon"
+                    className="icon icon-chevron-down header-dropdown-chevron-icon"
+                    id="channelHeaderDropdownIcon"
+                  />
+                </button>
+              </div>
+              <ChannelHeaderDropdown />
+            </MenuWrapper>
+          </div>
+        </div>
+        <div
+          className="channel-header__description"
+          dir="auto"
+          id="channelHeaderDescription"
+        >
+          <StatusIcon
+            button={false}
+            className=""
+            status="offline"
+          />
+          <span
+            className="header-status__text"
+          >
+            <FormattedMessage
+              defaultMessage="Offline"
+              id="status_dropdown.set_offline"
+            />
+          </span>
+          <HeaderIconWrapper
+            ariaLabel={true}
+            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
+            buttonId="channelHeaderPinButton"
+            iconComponent={
+              <i
+                aria-hidden="true"
+                className="icon icon-pin-outline channel-header__pin"
+              />
+            }
+            onClick={[Function]}
+            tooltipKey="pinnedPosts"
+          />
+          <HeaderIconWrapper
+            ariaLabel={true}
+            buttonClass="channel-header__icon channel-header__icon--wide channel-header__icon--left"
+            buttonId="channelHeaderFilesButton"
+            iconComponent={
+              <i
+                className="icon icon-file-document-outline"
+              />
+            }
+            onClick={[Function]}
+            tooltipKey="channelFiles"
+          />
+          <div
+            className="header-popover-text-measurer"
+          >
+            <Connect(Markdown)
+              message="not the bot description"
+              options={
+                Object {
+                  "atMentions": true,
+                  "channelNamesMap": undefined,
+                  "mentionHighlight": false,
+                  "singleline": true,
+                }
+              }
+            />
+          </div>
+          <span
+            className="header-description__text"
+            onClick={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <Overlay
+              animation={[Function]}
+              onEnter={[Function]}
+              onHide={[Function]}
+              placement="bottom"
+              rootClose={true}
+              show={false}
+              target={null}
+            >
+              <Popover
+                className="channel-header__popover chanel-header__popover--new_sidebar"
+                id="header-popover"
+                placement="bottom"
+                popoverSize="lg"
+                popoverStyle="info"
+                style={
+                  Object {
+                    "maxWidth": "0px",
+                    "transform": "translate(0px, 0px)",
+                  }
+                }
+              >
+                <span
+                  onClick={[Function]}
+                >
+                  <Connect(Markdown)
+                    message="not the bot description"
+                    options={
+                      Object {
+                        "atMentions": true,
+                        "channelNamesMap": undefined,
+                        "mentionHighlight": false,
+                        "singleline": false,
+                      }
+                    }
+                  />
+                </span>
+              </Popover>
+            </Overlay>
+            <Connect(Markdown)
+              message="not the bot description"
+              options={
+                Object {
+                  "atMentions": true,
+                  "channelNamesMap": undefined,
+                  "mentionHighlight": false,
+                  "singleline": true,
+                }
+              }
+            />
+          </span>
+        </div>
+      </div>
+    </div>
+    <Connect(injectIntl(ChannelHeaderPlug))
+      channel={
+        Object {
+          "header": "not the bot description",
+          "status": "offline",
+          "type": "D",
+        }
+      }
+      channelMember={
+        Object {
+          "channel_id": "channel_id",
+          "user_id": "user_id",
+        }
+      }
+    />
+    <Connect(RHSSearchNav) />
+  </div>
+</div>
+`;
+
 exports[`components/ChannelHeader should render properly when custom status is set 1`] = `
 <div
   aria-label="channel header region"
@@ -1335,9 +1546,9 @@ exports[`components/ChannelHeader should render properly when custom status is s
                   "verticalAlign": "top",
                 }
               }
-              showTooltip={false}
+              showTooltip={true}
               spanStyle={Object {}}
-              tooltipDirection="top"
+              tooltipDirection="bottom"
               userID="user_id"
             />
             <CustomStatusText

components/channel_header/channel_header.js

@@ -87,6 +87,7 @@ class ChannelHeader extends React.PureComponent {
         announcementBarCount: PropTypes.number,
         customStatus: PropTypes.object,
         isCustomStatusEnabled: PropTypes.bool.isRequired,
+        isCustomStatusExpired: PropTypes.bool.isRequired,
     };
 
     constructor(props) {
@@ -220,16 +221,18 @@ class ChannelHeader extends React.PureComponent {
     handleFormattedTextClick = (e) => Utils.handleFormattedTextClick(e, this.props.currentRelativeTeamUrl);
 
     renderCustomStatus = () => {
-        const {customStatus} = this.props;
-        const isStatusSet = customStatus && (customStatus.text || customStatus.emoji);
-        if (!(this.props.isCustomStatusEnabled && isStatusSet)) {
+        const {customStatus, isCustomStatusEnabled, isCustomStatusExpired} = this.props;
+        const isStatusSet = !isCustomStatusExpired && (customStatus?.text || customStatus?.emoji);
+        if (!(isCustomStatusEnabled && isStatusSet)) {
             return null;
         }
 
         return (
             <>
                 <CustomStatusEmoji
                     userID={this.props.dmUser.id}
+                    showTooltip={true}
+                    tooltipDirection='bottom'
                     emojiStyle={{
                         verticalAlign: 'top',
                         margin: '0 4px 1px',

components/channel_header/channel_header.test.jsx

@@ -38,6 +38,7 @@ describe('components/ChannelHeader', () => {
         teammateNameDisplaySetting: '',
         currentRelativeTeamUrl: '',
         isCustomStatusEnabled: false,
+        isCustomStatusExpired: false,
     };
 
     const populatedProps = {
@@ -309,4 +310,30 @@ describe('components/ChannelHeader', () => {
         );
         expect(wrapper).toMatchSnapshot();
     });
+
+    test('should render properly when custom status is expired', () => {
+        const props = {
+            ...populatedProps,
+            channel: {
+                header: 'not the bot description',
+                type: Constants.DM_CHANNEL,
+                status: 'offline',
+            },
+            dmUser: {
+                id: 'user_id',
+                is_bot: false,
+            },
+            isCustomStatusEnabled: true,
+            isCustomStatusExpired: true,
+            customStatus: {
+                emoji: 'calender',
+                text: 'In a meeting',
+            },
+        };
+
+        const wrapper = shallowWithIntl(
+            <ChannelHeader {...props}/>,
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
 });

components/channel_header/index.js

@@ -39,7 +39,7 @@ import {
     showMentions,
     closeRightHandSide,
 } from 'actions/views/rhs';
-import {makeGetCustomStatus, isCustomStatusEnabled} from 'selectors/views/custom_status';
+import {makeGetCustomStatus, isCustomStatusEnabled, isCustomStatusExpired} from 'selectors/views/custom_status';
 import {getIsRhsOpen, getRhsState} from 'selectors/rhs';
 import {isModalOpen} from 'selectors/views/modals';
 import {getAnnouncementBarCount} from 'selectors/views/announcement_bar';
@@ -92,6 +92,7 @@ function makeMapStateToProps() {
             announcementBarCount: getAnnouncementBarCount(state),
             customStatus,
             isCustomStatusEnabled: isCustomStatusEnabled(state),
+            isCustomStatusExpired: isCustomStatusExpired(state, customStatus),
         };
     };
 }

components/custom_status/__snapshots__/custom_status_suggestion.test.tsx.snap

@@ -22,3 +22,34 @@ exports[`components/custom_status/custom_status_emoji should match snapshot 1`]
   />
 </div>
 `;
+
+exports[`components/custom_status/custom_status_emoji should match snapshot with duration 1`] = `
+<div
+  className="statusSuggestion__row cursor--pointer"
+  onClick={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  <div
+    className="statusSuggestion__icon"
+  >
+    <Memo(RenderEmoji)
+      emojiName=""
+      size={20}
+    />
+  </div>
+  <CustomStatusText
+    className="statusSuggestion__text with_duration"
+    text=""
+    tooltipDirection="top"
+  />
+  <span
+    className="statusSuggestion__duration"
+  >
+    <FormattedMessage
+      defaultMessage="Today"
+      id="custom_status.expiry_dropdown.today"
+    />
+  </span>
+</div>
+`;

components/custom_status/__snapshots__/date_time_input.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/custom_status/date_time_input should match snapshot 1`] = `
+<DateTimeInputContainer
+  handleChange={[MockFunction]}
+  time={"2021-05-03T14:53:39.127Z"}
+  timezone="Australia/Sydney"
+/>
+`;