From 137d2caaa43f53de6751b3e95a3c3ea89d878a8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Tue, 22 Nov 2022 09:27:19 +0000
Subject: [PATCH] feat: add details section to overview sidepanel (#2489)

https://linear.app/unleash/issue/2-423/update-feature-toggle-overview-sidepanel
---
 .../FeatureOverviewSidePanel.tsx              | 10 +++++
 .../FeatureOverviewSidePanelDetails.tsx       | 44 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel.tsx
index f6dfcc3ca2..5ecbc84cc4 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel.tsx
@@ -2,6 +2,7 @@ import { Divider, styled } from '@mui/material';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { FeatureOverviewSidePanelDetails } from './FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails';
 import { FeatureOverviewSidePanelEnvironmentSwitches } from './FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitches';
 import { FeatureOverviewSidePanelTags } from './FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags';
 
@@ -57,6 +58,15 @@ export const FeatureOverviewSidePanel = () => {
                 feature={feature}
             />
             <Divider />
+            <FeatureOverviewSidePanelDetails
+                header={
+                    <StyledHeader data-loading>
+                        Feature toggle details
+                    </StyledHeader>
+                }
+                feature={feature}
+            />
+            <Divider />
             <FeatureOverviewSidePanelTags
                 header={
                     <StyledHeader data-loading>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx
new file mode 100644
index 0000000000..74000bf7e0
--- /dev/null
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/FeatureOverviewSidePanelDetails.tsx
@@ -0,0 +1,44 @@
+import { IFeatureToggle } from 'interfaces/featureToggle';
+import { styled } from '@mui/material';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { formatDateYMD } from 'utils/formatDate';
+import { parseISO } from 'date-fns';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(3),
+    fontSize: theme.fontSizes.smallBody,
+}));
+
+const StyledLabel = styled('span')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    marginRight: theme.spacing(1),
+}));
+
+interface IFeatureOverviewSidePanelDetailsProps {
+    feature: IFeatureToggle;
+    header: React.ReactNode;
+}
+
+export const FeatureOverviewSidePanelDetails = ({
+    feature,
+    header,
+}: IFeatureOverviewSidePanelDetailsProps) => {
+    const { locationSettings } = useLocationSettings();
+
+    return (
+        <StyledContainer>
+            {header}
+            <div>
+                <StyledLabel>Created at:</StyledLabel>
+                <span>
+                    {formatDateYMD(
+                        parseISO(feature.createdAt),
+                        locationSettings.locale
+                    )}
+                </span>
+            </div>
+        </StyledContainer>
+    );
+};