feat: review your draft sidebar (#2305)

* refactor playground status chip component * fix: update change request sidebar * refactor: status badge cleanup * fix: prettier formatting
Unleash · Nov 2, 2022 · 0a85560 · 0a85560
1 parent 2f1f9ce
commit 0a85560
Show file tree

Hide file tree

Showing 17 changed files with 102 additions and 671 deletions.
diff --git a/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx
@@ -4,18 +4,18 @@ import { ChangeRequestFeatureToggleChange } from '../ChangeRequestOverview/Chang
 import { objectId } from 'utils/objectId';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ToggleStatusChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ToggleStatusChange';
-import type { IChangeRequestResponse } from 'hooks/api/getters/useChangeRequestDraft/useChangeRequestDraft';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
+import type { IChangeRequest } from '../changeRequest.types';
 
-interface IChangeRequest {
-    changeRequest: IChangeRequestResponse;
+interface IChangeRequestProps {
+    changeRequest: IChangeRequest;
     onRefetch?: () => void;
     onNavigate?: () => void;
 }
 
-export const ChangeRequest: VFC<IChangeRequest> = ({
+export const ChangeRequest: VFC<IChangeRequestProps> = ({
     changeRequest,
     onRefetch,
     onNavigate,
@@ -41,7 +41,6 @@ export const ChangeRequest: VFC<IChangeRequest> = ({
 
     return (
         <Box>
-            Changes
             {changeRequest.features?.map(featureToggleChange => (
                 <ChangeRequestFeatureToggleChange
                     key={featureToggleChange.name}
@@ -55,6 +54,7 @@ export const ChangeRequest: VFC<IChangeRequest> = ({
                                 condition={change.action === 'updateEnabled'}
                                 show={
                                     <ToggleStatusChange
+                                        // @ts-expect-error TODO: fix types
                                         enabled={change?.payload?.enabled}
                                         onDiscard={onDiscard(change.id)}
                                     />

diff --git a/...angeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ToggleStatusChange.tsx b/...angeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ToggleStatusChange.tsx
@@ -1,7 +1,7 @@
 import { VFC } from 'react';
-import { Link, Box, Typography } from '@mui/material';
-import { PlaygroundResultChip } from 'component/playground/Playground/PlaygroundResultsTable/PlaygroundResultChip/PlaygroundResultChip';
+import { Link, Box } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IPlaygroundResultsTable {
     enabled: boolean;
@@ -16,11 +16,9 @@ export const ToggleStatusChange: VFC<IPlaygroundResultsTable> = ({
         <Box sx={{ p: 1, display: 'flex', justifyContent: 'space-between' }}>
             <Box>
                 New status:{' '}
-                <PlaygroundResultChip
-                    showIcon={false}
-                    label={enabled ? ' Enabled' : 'Disabled'}
-                    enabled={enabled}
-                />
+                <Badge color={enabled ? 'success' : 'error'}>
+                    {enabled ? ' Enabled' : 'Disabled'}
+                </Badge>
             </Box>
             <ConditionallyRender
                 condition={Boolean(onDiscard)}

diff --git a/...component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx b/...component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.tsx
@@ -2,8 +2,8 @@ import { Box } from '@mui/material';
 import { FC } from 'react';
 import { Typography } from '@mui/material';
 import TimeAgo from 'react-timeago';
-import { resolveChangeRequestStatusIcon } from 'component/changeRequest/changeRequest.utils';
 import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
+import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 import {
     StyledPaper,
     StyledContainer,
@@ -22,7 +22,7 @@ export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
                 <StyledHeader variant="h1">
                     Change request #{changeRequest.id}
                 </StyledHeader>
-                {resolveChangeRequestStatusIcon(changeRequest.state)}
+                <ChangeRequestStatusBadge state={changeRequest.state} />;
             </StyledContainer>
             <StyledInnerContainer>
                 <Typography variant="body2" sx={{ margin: 'auto 0' }}>

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx
@@ -65,14 +65,14 @@ export const ChangeRequestOverview: FC = () => {
                             padding: theme.spacing(2),
                         })}
                     >
+                        Changes
                         <ChangeRequest changeRequest={changeRequest} />
                         <ChangeRequestReviewStatus
                             approved={
                                 changeRequest.state === 'Approved' ||
                                 changeRequest.state === 'Applied'
                             }
                         />
-
                         <Button
                             variant="contained"
                             sx={{ marginTop: 2 }}

diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@@ -1,19 +1,29 @@
 import { VFC } from 'react';
-import { Box, Button, Typography, styled, Tooltip } from '@mui/material';
+import {
+    Box,
+    Button,
+    Typography,
+    styled,
+    Tooltip,
+    Divider,
+} from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { HelpOutline } from '@mui/icons-material';
+import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
 import { ChangeRequest } from '../ChangeRequest/ChangeRequest';
 import { useChangeRequestDraft } from 'hooks/api/getters/useChangeRequestDraft/useChangeRequestDraft';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
+import { ChangeRequestStatusBadge } from '../ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 
 interface IChangeRequestSidebarProps {
     open: boolean;
     project: string;
     onClose: () => void;
 }
+
 const StyledPageContent = styled(PageContent)(({ theme }) => ({
     height: '100vh',
     overflow: 'auto',
@@ -41,6 +51,11 @@ const StyledHeaderHint = styled('div')(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
 }));
 
+const BackButton = styled(Button)(({ theme }) => ({
+    marginTop: theme.spacing(2),
+    marginLeft: 'auto',
+}));
+
 export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
     open,
     project,
@@ -85,6 +100,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                 >
                     There are no changes to review.
                     {/* FIXME: empty state */}
+                    <BackButton onClick={onClose}>Close</BackButton>
                 </StyledPageContent>
             </SidebarModal>
         );
@@ -126,13 +142,23 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                                 `${theme.shape.borderRadiusLarge}px`,
                         }}
                     >
-                        <Typography>
-                            env: {environmentChangeRequest?.environment}
-                        </Typography>
-                        <Typography>
-                            state: {environmentChangeRequest?.state}
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                            <Box sx={{ display: 'flex' }}>
+                                <EnvironmentIcon enabled={true} />
+                                <Typography component="span" variant="h2">
+                                    {environmentChangeRequest?.environment}
+                                </Typography>
+                            </Box>
+                            <Box sx={{ ml: 'auto' }}>
+                                <ChangeRequestStatusBadge
+                                    state={environmentChangeRequest?.state}
+                                />
+                            </Box>
+                        </Box>
+                        <Divider sx={{ my: 3 }} />
+                        <Typography variant="body1" color="text.secondary">
+                            You request changes for these feature toggles:
                         </Typography>
-                        <hr />
                         <ChangeRequest
                             changeRequest={environmentChangeRequest}
                             onNavigate={() => {
@@ -144,20 +170,21 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                             <ConditionallyRender
                                 condition={
                                     environmentChangeRequest?.state ===
-                                    'APPROVED'
+                                    'Approved'
                                 }
                                 show={<Typography>Applied</Typography>}
                             />
                             <ConditionallyRender
                                 condition={
-                                    environmentChangeRequest?.state === 'CLOSED'
+                                    environmentChangeRequest?.state ===
+                                    'Applied'
                                 }
                                 show={<Typography>Applied</Typography>}
                             />
                             <ConditionallyRender
                                 condition={
                                     environmentChangeRequest?.state ===
-                                    'APPROVED'
+                                    'Approved'
                                 }
                                 show={
                                     <>
@@ -201,6 +228,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                         </Box>
                     </Box>
                 ))}
+                <BackButton onClick={onClose}>Close</BackButton>
             </StyledPageContent>
         </SidebarModal>
     );

diff --git a/...ent/changeRequest/changeRequest.utils.tsx → ...tStatusBadge/ChangeRequestStatusBadge.tsx b/...ent/changeRequest/changeRequest.utils.tsx → ...tStatusBadge/ChangeRequestStatusBadge.tsx
@@ -1,18 +1,26 @@
-import { ChangeRequestState } from './changeRequest.types';
+import { VFC } from 'react';
+import { ChangeRequestState } from '../changeRequest.types';
 import { Badge } from 'component/common/Badge/Badge';
 import { Check, CircleOutlined, Close } from '@mui/icons-material';
 
-export const resolveChangeRequestStatusIcon = (state: ChangeRequestState) => {
-    const reviewRequired = (
-        <Badge color="secondary" icon={<CircleOutlined fontSize={'small'} />}>
-            Review required
-        </Badge>
-    );
+interface IChangeRequestStatusBadgeProps {
+    state: ChangeRequestState;
+}
+
+const ReviewRequiredBadge: VFC = () => (
+    <Badge color="secondary" icon={<CircleOutlined fontSize={'small'} />}>
+        Review required
+    </Badge>
+);
+
+export const ChangeRequestStatusBadge: VFC<IChangeRequestStatusBadgeProps> = ({
+    state,
+}) => {
     switch (state) {
         case 'Draft':
-            return reviewRequired;
+            return <ReviewRequiredBadge />;
         case 'In review':
-            return reviewRequired;
+            return <ReviewRequiredBadge />;
         case 'Approved':
             return (
                 <Badge color="success" icon={<Check fontSize={'small'} />}>
@@ -35,6 +43,6 @@ export const resolveChangeRequestStatusIcon = (state: ChangeRequestState) => {
                 </Badge>
             );
         default:
-            return reviewRequired;
+            return <ReviewRequiredBadge />;
     }
 };
diff --git a/...jectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx b/...jectChangeRequests/ChangeRequestsTabs/ChangeRequestStatusCell/ChangeRequestStatusCell.tsx
@@ -1,18 +1,18 @@
 import { VFC } from 'react';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
-import { resolveChangeRequestStatusIcon } from 'component/changeRequest/changeRequest.utils';
 import { ChangeRequestState } from 'component/changeRequest/changeRequest.types';
+import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 
 interface IChangeRequestStatusCellProps {
-    value?: string | null;
+    value?: string | null; // FIXME: proper type
 }
 
 export const ChangeRequestStatusCell: VFC<IChangeRequestStatusCellProps> = ({
     value,
 }) => {
     const renderState = () => {
         if (!value) return null;
-        return resolveChangeRequestStatusIcon(value as ChangeRequestState);
+        return <ChangeRequestStatusBadge state={value as ChangeRequestState} />;
     };
 
     if (!value) {

diff --git a/...nt/common/StatusChip/StatusChip.styles.ts → ...ureStatusChip/FeatureStatusChip.styles.ts b/...nt/common/StatusChip/StatusChip.styles.ts → ...ureStatusChip/FeatureStatusChip.styles.ts
diff --git a/...omponent/common/StatusChip/StatusChip.tsx → ...n/FeatureStatusChip/FeatureStatusChip.tsx b/...omponent/common/StatusChip/StatusChip.tsx → ...n/FeatureStatusChip/FeatureStatusChip.tsx
@@ -1,12 +1,15 @@
 import { Chip } from '@mui/material';
-import { useStyles } from './StatusChip.styles';
+import { useStyles } from './FeatureStatusChip.styles';
 
 interface IStatusChip {
     stale: boolean;
     showActive?: boolean;
 }
 
-const StatusChip = ({ stale, showActive = true }: IStatusChip) => {
+export const FeatureStatusChip = ({
+    stale,
+    showActive = true,
+}: IStatusChip) => {
     const { classes: styles } = useStyles();
 
     if (!stale && !showActive) {
@@ -30,5 +33,3 @@ const StatusChip = ({ stale, showActive = true }: IStatusChip) => {
         </div>
     );
 };
-
-export default StatusChip;