feat: Show project archived message (#7899)

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

@@ -85,6 +85,7 @@ export const ProjectArchiveCard: FC<ProjectArchiveCardProps> = ({
                                     </StyledParagraphInfo>
                                     <p data-loading>
                                         <TimeAgo
+                                            minPeriod={60}
                                             date={
                                                 new Date(archivedAt as string)
                                             }

frontend/src/component/project/Project/ArchiveProject/ProjectArchived.tsx

@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+import type { FC } from 'react';
+
+export const ProjectArchived: FC<{ name: string }> = ({ name }) => {
+    return (
+        <p>
+            The project <strong>{name}</strong> has been archived. You can find
+            it on the{' '}
+            <Link to={`/projects-archive`}>projects archive page</Link>.
+        </p>
+    );
+};

frontend/src/component/project/Project/Project.tsx

@@ -43,6 +43,8 @@ import { ChangeRequestPlausibleProvider } from 'component/changeRequest/ChangeRe
 import { ProjectApplications } from '../ProjectApplications/ProjectApplications';
 import { ProjectInsights } from './ProjectInsights/ProjectInsights';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { ProjectArchived } from './ArchiveProject/ProjectArchived';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
@@ -75,6 +77,7 @@ export const Project = () => {
     const basePath = `/projects/${projectId}`;
     const projectName = project?.name || projectId;
     const { favorite, unfavorite } = useFavoriteProjectsApi();
+    const archiveProjectsEnabled = useUiFlag('archiveProjects');
 
     const [showDelDialog, setShowDelDialog] = useState(false);
 
@@ -189,6 +192,10 @@ export const Project = () => {
         </Box>
     );
 
+    if (archiveProjectsEnabled && Boolean(project.archivedAt)) {
+        return <ProjectArchived name={project.name} />;
+    }
+
     return (
         <div ref={ref}>
             <StyledHeader>

frontend/src/interfaces/project.ts

@@ -59,6 +59,7 @@ export interface IProjectOverview {
     defaultStickiness: string;
     featureLimit?: number;
     featureNaming?: FeatureNamingType;
+    archivedAt?: Date;
 }
 
 export interface IProjectHealthReport extends IProject {