mattermost/mattermost

Text: DND and custom status have datetime in different manners

Open

#27511 opened on Jul 2, 2024

View on GitHub
 (2 comments) (0 reactions) (1 assignee)TypeScript (32,880 stars) (7,823 forks)batch import
Help Wanted

Description

https://github.com/mattermost/mattermost/issues/27492

Summary

DND (https://mattermost.atlassian.net/browse/MM-38745 and #26334 (#19134)) and custom status show datetime in different manners.

Steps to reproduce

  1. Sets DND with "Clear after:" in 30 mins.
  2. Sets custom status with "Clear after: " in 30 mins.
  3. Click my avatar image on the top right to open the status menu to see the difference in both.

Expected behavior

Style in the one should be as same as style in the other.

Observed behavior

With only time (Clear after: 30 mins)

With date time (Clear after: 26 hours)

Possible fixes

  • ExpiryTime component defined in webapp/channels/src/components/custom_status/expiry_time.tsx looks too complicated unlike renderDndExtraText in StatusDropdown (webapp/channels/src/components/status_dropdown/status_dropdown.tsx).

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-59268

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptbasic understanding of Mattermost UI components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Compare the `ExpiryTime` component in `webapp/channels/src/components/custom status/expiry time.tsx` with the `renderDndExtraText` function in `webapp/channels/src/components/status dropdown/status dropdown.tsx` to identify the discrepancy in datetime formatting. The goal is to make the custom status display consistent with the DND display, likely by simplifying the `ExpiryTime` component or aligning its logic with the DND text rendering. Review the existing PR references (#26334, #19134) for previous context.