Add configuration to disable relative date markers in timeline (#7405)

* add disabler elative dates setting

Signed-off-by: Kerry Archibald <kerrya@element.io>

* test existing DateSeparator

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use full date format when TimelineDisableRelativeDates is truthy

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add comment

Signed-off-by: Kerry Archibald <kerrya@element.io>

* flip timelineDisableRelativeDates -> timelineEnableRelativeDates to fit convention

Signed-off-by: Kerry Archibald <kerrya@element.io>

* mock date constructor in test

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/components/views/messages/DateSeparator.tsx

@@ -20,6 +20,8 @@ import React from 'react';
 import { _t } from '../../../languageHandler';
 import { formatFullDateNoTime } from '../../../DateUtils';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import SettingsStore from '../../../settings/SettingsStore';
+import { UIFeature } from '../../../settings/UIFeature';
 
 function getDaysArray(): string[] {
     return [
@@ -42,9 +44,10 @@ interface IProps {
 export default class DateSeparator extends React.Component<IProps> {
     private getLabel() {
         const date = new Date(this.props.ts);
+        const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
 
         // During the time the archive is being viewed, a specific day might not make sense, so we return the full date
-        if (this.props.forExport) return formatFullDateNoTime(date);
+        if (this.props.forExport || disableRelativeTimestamps) return formatFullDateNoTime(date);
 
         const today = new Date();
         const yesterday = new Date();
@@ -63,11 +66,12 @@ export default class DateSeparator extends React.Component<IProps> {
     }
 
     render() {
+        const label = this.getLabel();
         // ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
         // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
-        return <h2 className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={this.getLabel()}>
+        return <h2 className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={label}>
             <hr role="none" />
-            <div aria-hidden="true">{ this.getLabel() }</div>
+            <div aria-hidden="true">{ label }</div>
             <hr role="none" />
         </h2>;
     }

src/settings/Settings.tsx

@@ -965,4 +965,8 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,
     },
+    [UIFeature.TimelineEnableRelativeDates]: {
+        supportedLevels: LEVELS_UI_FEATURE,
+        default: true,
+    },
 };

src/settings/UIFeature.ts

@@ -32,6 +32,7 @@ export enum UIFeature {
     Communities = "UIFeature.communities",
     AdvancedSettings = "UIFeature.advancedSettings",
     RoomHistorySettings = "UIFeature.roomHistorySettings",
+    TimelineEnableRelativeDates = "UIFeature.timelineEnableRelativeDates"
 }
 
 export enum UIComponent {