From a202b813444cea2faaefd716a888d47b6cf220a2 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Tue, 15 Mar 2022 13:30:45 +0100
Subject: [PATCH] refactor: improve constraint date formatting  (#789)

* refactor: fix add constraint button text

* refactor: improve constraint date formatting

* refactor: the value, it must be
---
 .../common/Constraint/Constraint.tsx          |  8 ++++-
 .../Constraint/formatConstraintValue.ts       | 36 +++++++++++++++++++
 .../ConstraintAccordionEditHeader.tsx         |  2 +-
 .../ConstraintAccordionViewBody.tsx           |  7 ++--
 .../ConstraintAccordionViewHeader.tsx         | 12 ++++++-
 .../FeatureStrategyConstraints2.tsx           |  2 +-
 6 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/component/common/Constraint/formatConstraintValue.ts

diff --git a/frontend/src/component/common/Constraint/Constraint.tsx b/frontend/src/component/common/Constraint/Constraint.tsx
index 617a42b3ef..52cfb0bc84 100644
--- a/frontend/src/component/common/Constraint/Constraint.tsx
+++ b/frontend/src/component/common/Constraint/Constraint.tsx
@@ -11,6 +11,8 @@ import ConditionallyRender from '../ConditionallyRender';
 import PermissionIconButton from '../PermissionIconButton/PermissionIconButton';
 import StringTruncator from '../StringTruncator/StringTruncator';
 import { useStyles } from './Constraint.styles';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { formatConstraintValuesOrValue } from 'component/common/Constraint/formatConstraintValue';
 
 interface IConstraintProps {
     constraint: IConstraint;
@@ -29,6 +31,7 @@ const Constraint = ({
     // CHANGEME - Feat: Constraint Operators
     const { uiConfig } = useUiConfig();
     const styles = useStyles();
+    const { locationSettings } = useLocationSettings();
     const { projectId } = useParams<IFeatureViewParams>();
 
     const classes = classnames(styles.constraint, {
@@ -54,7 +57,10 @@ const Constraint = ({
                 />
                 <StrategySeparator text={constraint.operator} maxWidth="none" />
                 <span className={styles.values}>
-                    {constraint.values?.join(', ') ?? constraint.value}
+                    {formatConstraintValuesOrValue(
+                        constraint,
+                        locationSettings
+                    )}
                 </span>
             </div>
 
diff --git a/frontend/src/component/common/Constraint/formatConstraintValue.ts b/frontend/src/component/common/Constraint/formatConstraintValue.ts
new file mode 100644
index 0000000000..c7ec4b5020
--- /dev/null
+++ b/frontend/src/component/common/Constraint/formatConstraintValue.ts
@@ -0,0 +1,36 @@
+import { IConstraint } from 'interfaces/strategy';
+import { CURRENT_TIME_CONTEXT_FIELD } from 'component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader';
+import { formatDateYMDHMS } from 'utils/format-date';
+import { ILocationSettings } from 'hooks/useLocationSettings';
+
+export const formatConstraintValuesOrValue = (
+    constraint: IConstraint,
+    locationSettings: ILocationSettings
+): string | undefined => {
+    return (
+        formatConstraintValues(constraint) ??
+        formatConstraintValue(constraint, locationSettings)
+    );
+};
+
+export const formatConstraintValues = (
+    constraint: IConstraint
+): string | undefined => {
+    if (constraint.values && constraint.values.length > 0) {
+        return constraint.values.join(', ');
+    }
+};
+
+export const formatConstraintValue = (
+    constraint: IConstraint,
+    locationSettings: ILocationSettings
+): string | undefined => {
+    if (
+        constraint.value &&
+        constraint.contextName === CURRENT_TIME_CONTEXT_FIELD
+    ) {
+        return formatDateYMDHMS(constraint.value, locationSettings.locale);
+    }
+
+    return constraint.value;
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
index 30f5a85b03..e368f6f94d 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
@@ -31,7 +31,7 @@ const constraintOperators = allOperators.map(operator => {
     return { key: operator, label: operator };
 });
 
-const CURRENT_TIME_CONTEXT_FIELD = 'currentTime';
+export const CURRENT_TIME_CONTEXT_FIELD = 'currentTime';
 
 export const ConstraintAccordionEditHeader = ({
     compact,
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
index f2583698d5..c4ad74d846 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
@@ -8,6 +8,8 @@ import { oneOf } from '../../../../../utils/one-of';
 import ConditionallyRender from '../../../ConditionallyRender';
 import { useStyles } from '../../ConstraintAccordion.styles';
 import { ConstraintValueSearch } from '../../ConstraintValueSearch/ConstraintValueSearch';
+import { formatConstraintValue } from 'component/common/Constraint/formatConstraintValue';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 
 interface IConstraintAccordionViewBodyProps {
     constraint: IConstraint;
@@ -17,6 +19,7 @@ export const ConstraintAccordionViewBody = ({
     constraint,
 }: IConstraintAccordionViewBodyProps) => {
     const styles = useStyles();
+    const { locationSettings } = useLocationSettings();
 
     return (
         <div>
@@ -46,7 +49,7 @@ export const ConstraintAccordionViewBody = ({
             <div className={styles.valuesContainer}>
                 <MultipleValues values={constraint.values} />
                 <SingleValue
-                    value={constraint.value}
+                    value={formatConstraintValue(constraint, locationSettings)}
                     operator={constraint.operator}
                 />
             </div>
@@ -65,7 +68,7 @@ const SingleValue = ({ value, operator }: ISingleValueProps) => {
 
     return (
         <div className={styles.singleValueView}>
-            <p className={styles.singleValueText}>Value must {operator}</p>{' '}
+            <p className={styles.singleValueText}>Value must be {operator}</p>{' '}
             <Chip
                 label={
                     <StringTruncator
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
index fcbb5b5df3..5ea34ae4ce 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -11,6 +11,8 @@ import { UPDATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/perm
 import { useParams } from 'react-router-dom';
 import { IFeatureViewParams } from 'interfaces/params';
 import React from 'react';
+import { formatConstraintValue } from 'component/common/Constraint/formatConstraintValue';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 
 interface IConstraintAccordionViewHeaderProps {
     compact: boolean;
@@ -30,6 +32,7 @@ export const ConstraintAccordionViewHeader = ({
     environmentId,
 }: IConstraintAccordionViewHeaderProps) => {
     const styles = useStyles();
+    const { locationSettings } = useLocationSettings();
     const { projectId } = useParams<IFeatureViewParams>();
     const smallScreen = useMediaQuery(`(max-width:${790}px)`);
 
@@ -67,7 +70,14 @@ export const ConstraintAccordionViewHeader = ({
                 <div className={styles.headerViewValuesContainer}>
                     <ConditionallyRender
                         condition={singleValue}
-                        show={<Chip label={constraint.value} />}
+                        show={
+                            <Chip
+                                label={formatConstraintValue(
+                                    constraint,
+                                    locationSettings
+                                )}
+                            />
+                        }
                         elseShow={
                             <div className={styles.headerValuesContainer}>
                                 <p className={styles.headerValues}>
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints2/FeatureStrategyConstraints2.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints2/FeatureStrategyConstraints2.tsx
index 512fdc591c..a8bef4e159 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints2/FeatureStrategyConstraints2.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints2/FeatureStrategyConstraints2.tsx
@@ -96,7 +96,7 @@ export const FeatureStrategyConstraints2 = ({
                 environmentId={environmentId}
                 projectId={projectId}
             >
-                Add constraints
+                Add constraint
             </PermissionButton>
             {strategy.constraints?.map((constraint, index) => (
                 <ConstraintAccordion