refactor: prepare project card iteration (#7990)

Copy/rename files in preparation for new ProjectCard iteration.

frontend/src/component/project/ProjectCard/LegacyProjectCard.tsx

@@ -9,7 +9,7 @@ import {
     StyledParagraphInfo,
     StyledProjectCardBody,
     StyledIconBox,
-} from './NewProjectCard.styles';
+} from './ProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge';
 import type { ProjectSchemaOwners } from 'openapi';

frontend/src/component/project/ProjectCard/ProjectArchiveCard.tsx

@@ -8,7 +8,7 @@ import {
     StyledProjectCardBody,
     StyledIconBox,
     StyledActions,
-} from './NewProjectCard.styles';
+} from './ProjectCard.styles';
 import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter';
 import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge';
 import type { ProjectSchemaOwners } from 'openapi';

frontend/src/component/project/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,85 @@
+import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import {
+    StyledProjectCard,
+    StyledDivHeader,
+    StyledBox,
+    StyledCardTitle,
+    StyledDivInfo,
+    StyledParagraphInfo,
+    StyledProjectCardBody,
+    StyledIconBox,
+} from './ProjectCard.styles';
+import { ProjectCardFooter } from './ProjectCardFooter/ProjectCardFooter';
+import { ProjectModeBadge } from './ProjectModeBadge/ProjectModeBadge';
+import type { ProjectSchemaOwners } from 'openapi';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
+import { FavoriteAction } from './ProjectCardFooter/FavoriteAction/FavoriteAction';
+
+interface IProjectCardProps {
+    name: string;
+    featureCount: number;
+    health: number;
+    memberCount?: number;
+    id: string;
+    onHover: () => void;
+    favorite?: boolean;
+    mode: string;
+    owners?: ProjectSchemaOwners;
+}
+
+export const ProjectCard = ({
+    name,
+    featureCount,
+    health,
+    memberCount = 0,
+    onHover,
+    id,
+    mode,
+    favorite = false,
+    owners,
+}: IProjectCardProps) => (
+    <StyledProjectCard onMouseEnter={onHover}>
+        <StyledProjectCardBody>
+            <StyledDivHeader>
+                <StyledIconBox>
+                    <ProjectIcon />
+                </StyledIconBox>
+                <StyledBox data-loading>
+                    <StyledCardTitle>{name}</StyledCardTitle>
+                </StyledBox>
+                <ProjectModeBadge mode={mode} />
+            </StyledDivHeader>
+            <StyledDivInfo>
+                <div>
+                    <StyledParagraphInfo data-loading>
+                        {featureCount}
+                    </StyledParagraphInfo>
+                    <p data-loading>{featureCount === 1 ? 'flag' : 'flags'}</p>
+                </div>
+                <ConditionallyRender
+                    condition={id !== DEFAULT_PROJECT_ID}
+                    show={
+                        <div>
+                            <StyledParagraphInfo data-loading>
+                                {memberCount}
+                            </StyledParagraphInfo>
+                            <p data-loading>
+                                {memberCount === 1 ? 'member' : 'members'}
+                            </p>
+                        </div>
+                    }
+                />
+                <div>
+                    <StyledParagraphInfo data-loading>
+                        {health}%
+                    </StyledParagraphInfo>
+                    <p data-loading>healthy</p>
+                </div>
+            </StyledDivInfo>
+        </StyledProjectCardBody>
+        <ProjectCardFooter id={id} owners={owners}>
+            <FavoriteAction id={id} isFavorite={favorite} />
+        </ProjectCardFooter>
+    </StyledProjectCard>
+);

frontend/src/component/project/ProjectList/ArchiveProjectList.tsx

@@ -11,7 +11,7 @@ import { ProjectGroup } from './ProjectGroup';
 import {
     ProjectArchiveCard,
     type ProjectArchiveCardProps,
-} from '../NewProjectCard/ProjectArchiveCard';
+} from '../ProjectCard/ProjectArchiveCard';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { ReviveProjectDialog } from './ReviveProjectDialog/ReviveProjectDialog';
 import { DeleteProjectDialogue } from '../Project/DeleteProject/DeleteProjectDialogue';

frontend/src/component/project/ProjectList/ProjectGroup.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import { Link } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { ProjectCard } from '../NewProjectCard/NewProjectCard';
+import { ProjectCard as LegacyProjectCard } from '../ProjectCard/LegacyProjectCard';
 
 import type { IProjectCard } from 'interfaces/project';
 import loadingData from './loadingData';
@@ -40,7 +40,7 @@ export const ProjectGroup = <T extends { id: string }>({
     loading,
     searchValue,
     placeholder = 'No projects available.',
-    ProjectCardComponent = ProjectCard,
+    ProjectCardComponent = LegacyProjectCard,
     link = true,
 }: ProjectGroupProps<T>) => {
     return (
@@ -82,7 +82,7 @@ export const ProjectGroup = <T extends { id: string }>({
                                 <>
                                     {loadingData.map(
                                         (project: IProjectCard) => (
-                                            <ProjectCard
+                                            <LegacyProjectCard
                                                 data-loading
                                                 onHover={() => {}}
                                                 key={project.id}