From eb550679832ba088036881dfd0be8061bba2de43 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Mon, 2 Sep 2024 10:13:59 +0200
Subject: [PATCH] fix: project archive card (#8024)

Fix archived project card after new projects list refactor. Archive card was not showing button actions in footer.
---
 .../ProjectCard/ProjectArchiveCard.tsx        | 79 +++++++++++--------
 .../project/ProjectCard/ProjectCard.styles.ts |  2 +-
 .../project/ProjectCard/ProjectCard.tsx       | 14 ++--
 .../ProjectCardFooter/ProjectCardFooter.tsx   | 13 +--
 4 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/frontend/src/component/project/ProjectCard/ProjectArchiveCard.tsx b/frontend/src/component/project/ProjectCard/ProjectArchiveCard.tsx
index ab98f6427f..359c1a0372 100644
--- a/frontend/src/component/project/ProjectCard/ProjectArchiveCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectArchiveCard.tsx
@@ -1,10 +1,8 @@
 import type { FC } from 'react';
 import {
     StyledProjectCard,
-    StyledDivHeader,
     StyledBox,
     StyledCardTitle,
-    StyledDivInfo,
     StyledProjectCardBody,
     StyledIconBox,
     StyledActions,
@@ -16,8 +14,7 @@ import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import { formatDateYMDHM } from 'utils/formatDate';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { parseISO } from 'date-fns';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Box, Link, Tooltip } from '@mui/material';
+import { Box, Link, styled, Tooltip } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import {
     DELETE_PROJECT,
@@ -29,6 +26,7 @@ import Delete from '@mui/icons-material/Delete';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
 import { TimeAgo } from 'component/common/TimeAgo/TimeAgo';
+import { flexRow } from 'themes/themeStyles';
 
 export type ProjectArchiveCardProps = {
     id: string;
@@ -40,6 +38,24 @@ export type ProjectArchiveCardProps = {
     owners?: ProjectSchemaOwners;
 };
 
+export const StyledDivHeader = styled('div')(({ theme }) => ({
+    ...flexRow,
+    width: '100%',
+    gap: theme.spacing(1),
+    minHeight: theme.spacing(6),
+    marginBottom: theme.spacing(1),
+}));
+
+const StyledTitle = styled(StyledCardTitle)(({ theme }) => ({
+    margin: 0,
+}));
+
+const StyledContent = styled('div')(({ theme }) => ({
+    ...flexRow,
+    fontSize: theme.fontSizes.smallerBody,
+    justifyContent: 'space-between',
+}));
+
 export const ProjectArchiveCard: FC<ProjectArchiveCardProps> = ({
     id,
     name,
@@ -61,49 +77,46 @@ export const ProjectArchiveCard: FC<ProjectArchiveCardProps> = ({
                     </StyledIconBox>
                     <StyledBox data-loading>
                         <Tooltip title={`id: ${id}`} arrow>
-                            <StyledCardTitle>
+                            <StyledTitle>
                                 <Highlighter search={searchQuery}>
                                     {name}
                                 </Highlighter>
-                            </StyledCardTitle>
+                            </StyledTitle>
                         </Tooltip>
                     </StyledBox>
                     <ProjectModeBadge mode={mode} />
                 </StyledDivHeader>
-                <StyledDivInfo>
-                    <ConditionallyRender
-                        condition={Boolean(archivedAt)}
-                        show={
-                            <Tooltip
-                                title={formatDateYMDHM(
-                                    parseISO(archivedAt as string),
-                                    locationSettings.locale,
-                                )}
-                                arrow
-                            >
-                                <Box
-                                    sx={(theme) => ({
-                                        color: theme.palette.text.secondary,
-                                    })}
-                                >
-                                    <p data-loading>
-                                        Archived:{' '}
-                                        <TimeAgo
-                                            date={archivedAt}
-                                            refresh={false}
-                                        />
-                                    </p>
-                                </Box>
-                            </Tooltip>
+                <StyledContent>
+                    <Tooltip
+                        title={
+                            archivedAt
+                                ? formatDateYMDHM(
+                                      parseISO(archivedAt as string),
+                                      locationSettings.locale,
+                                  )
+                                : undefined
                         }
-                    />
+                        arrow
+                        placement='top'
+                    >
+                        <Box
+                            sx={(theme) => ({
+                                color: theme.palette.text.secondary,
+                            })}
+                        >
+                            <p data-loading>
+                                Archived:{' '}
+                                <TimeAgo date={archivedAt} refresh={false} />
+                            </p>
+                        </Box>
+                    </Tooltip>
                     <Link
                         component={RouterLink}
                         to={`/archive?search=project%3A${encodeURI(id)}`}
                     >
                         <p>View archived flags</p>
                     </Link>
-                </StyledDivInfo>
+                </StyledContent>
             </StyledProjectCardBody>
             <ProjectCardFooter id={id} disabled owners={owners}>
                 <StyledActions>
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
index e3d989751f..f83c93139e 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
@@ -100,5 +100,5 @@ export const StyledIconBox = styled(Box)(({ theme }) => ({
 
 export const StyledActions = styled(Box)(({ theme }) => ({
     display: 'flex',
-    marginRight: theme.spacing(2),
+    margin: theme.spacing(0.5),
 }));
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
index 64068ef1ba..b7929ea7b6 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
@@ -15,6 +15,9 @@ import { ProjectLastSeen } from './ProjectLastSeen/ProjectLastSeen';
 import type { IProjectCard } from 'interfaces/project';
 import { Highlighter } from 'component/common/Highlighter/Highlighter';
 import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
+import { ProjectMembers } from './ProjectCardFooter/ProjectMembers/ProjectMembers';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
 
 const StyledUpdated = styled('span')(({ theme }) => ({
     color: theme.palette.text.secondary,
@@ -99,11 +102,12 @@ export const ProjectCard = ({
                     </div>
                 </StyledInfo>
             </StyledProjectCardBody>
-            <ProjectCardFooter
-                id={id}
-                owners={owners}
-                memberCount={memberCount}
-            />
+            <ProjectCardFooter id={id} owners={owners}>
+                <ConditionallyRender
+                    condition={id !== DEFAULT_PROJECT_ID}
+                    show={<ProjectMembers count={memberCount} members={[]} />}
+                />
+            </ProjectCardFooter>
         </StyledProjectCard>
     );
 };
diff --git a/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx b/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
index f6f7df5cfc..8c286ddb1e 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
@@ -8,8 +8,6 @@ import {
 import { ProjectOwners } from './ProjectOwners/ProjectOwners';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ProjectMembers } from './ProjectMembers/ProjectMembers';
-import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
 
 interface IProjectCardFooterProps {
     id?: string;
@@ -17,7 +15,6 @@ interface IProjectCardFooterProps {
     children?: React.ReactNode;
     disabled?: boolean;
     owners: IProjectOwnersProps['owners'];
-    memberCount?: number;
 }
 
 const StyledFooter = styled(Box)<{ disabled: boolean }>(
@@ -38,7 +35,6 @@ export const ProjectCardFooter: FC<IProjectCardFooterProps> = ({
     children,
     owners,
     disabled = false,
-    memberCount,
 }) => {
     const projectListImprovementsEnabled = useUiFlag('projectListImprovements');
 
@@ -49,14 +45,7 @@ export const ProjectCardFooter: FC<IProjectCardFooterProps> = ({
                 show={<ProjectOwners owners={owners} />}
                 elseShow={<LegacyProjectOwners owners={owners} />}
             />
-            <ConditionallyRender
-                condition={
-                    Boolean(projectListImprovementsEnabled) &&
-                    id !== DEFAULT_PROJECT_ID
-                }
-                show={<ProjectMembers count={memberCount} members={[]} />}
-                elseShow={children}
-            />
+            {children}
         </StyledFooter>
     );
 };