Add note in analysis framework list

the-deep · Jan 10, 2024 · 0c9c703 · 0c9c703
1 parent 9064f29
commit 0c9c703
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/app/views/ProjectEdit/Framework/FrameworkDetail/index.tsx b/app/views/ProjectEdit/Framework/FrameworkDetail/index.tsx
@@ -410,6 +410,11 @@ function FrameworkDetail(props: Props) {
                     contentClassName={styles.content}
                 >
                     <div className={styles.metadataContainer}>
+                        {frameworkDetailsResponse?.projects?.totalCount === 0 && (
+                            <div className={styles.warning}>
+                                This framework has not been used in any project in DEEP.
+                            </div>
+                        )}
                         {frameworkDetails?.description}
                         <TextOutput
                             className={styles.block}

diff --git a/app/views/ProjectEdit/Framework/FrameworkDetail/styles.css b/app/views/ProjectEdit/Framework/FrameworkDetail/styles.css
@@ -15,7 +15,6 @@
             .heading-container {
                 padding-bottom: var(--dui-spacing-small);
             }
-
             .header-actions {
                 display: flex;
                 align-items: center;
@@ -54,6 +53,14 @@
                 gap: var(--dui-spacing-medium);
                 overflow-y: auto;
 
+                .warning {
+                    display: flex;
+                    align-items: center;
+                    color: var(--dui-color-text-description);
+                    font-size: var(--dui-font-size-small);
+                    gap: var(--dui-spacing-small);
+                }
+
                 .value{
                     &:hover {
                         text-decoration: underline;

diff --git a/app/views/ProjectEdit/Framework/index.tsx b/app/views/ProjectEdit/Framework/index.tsx
@@ -16,6 +16,7 @@ import {
     SelectInput,
     TextInput,
     TextOutput,
+    Tooltip,
 } from '@the-deep/deep-ui';
 import {
     ObjectSchema,
@@ -71,6 +72,10 @@ export const PROJECT_FRAMEWORKS = gql`
                 title
                 id
                 createdAt
+                usedInProjectCount {
+                    projectCount
+                    testProjectCount
+                }
             }
             page
             totalCount
@@ -84,6 +89,8 @@ interface ItemProps {
     createdAt: string;
     onClick: (key: string) => void;
     isSelected: boolean;
+    projectCount: number;
+    testProjectCount: number;
 }
 
 function Item(props: ItemProps) {
@@ -93,8 +100,12 @@ function Item(props: ItemProps) {
         createdAt,
         onClick,
         isSelected,
+        projectCount,
+        testProjectCount,
     } = props;
 
+    const totalProjectCount = projectCount + testProjectCount;
+
     return (
         <RawButton
             name={itemKey}
@@ -107,12 +118,28 @@ function Item(props: ItemProps) {
             <div className={styles.title}>
                 {title}
             </div>
-            <TextOutput
-                className={styles.createdOn}
-                label={_ts('projectEdit', 'createdOnLabel')}
-                value={createdAt}
-                valueType="date"
-            />
+            <div className={styles.inline}>
+                <TextOutput
+                    className={styles.createdOn}
+                    label={_ts('projectEdit', 'createdOnLabel')}
+                    value={createdAt}
+                    valueType="date"
+                />
+                <TextOutput
+                    className={styles.warning}
+                    label="Used in"
+                    value={`${totalProjectCount} projects`}
+                />
+                <Tooltip>
+                    {totalProjectCount !== 0
+                        ? `This framework is used in
+                        ${projectCount === 0 ? 'no' : projectCount}
+                        ${projectCount === 1 ? 'project' : 'projects'} and
+                        ${testProjectCount === 0 ? 'no' : testProjectCount} test
+                        ${testProjectCount === 1 ? 'project' : 'projects'}`
+                        : 'This framework is not used in any projects.'}
+                </Tooltip>
+            </div>
         </RawButton>
     );
 }
@@ -271,6 +298,8 @@ function ProjectFramework(props: Props) {
         createdAt: data.createdAt,
         onClick: setSelectedFramework,
         isSelected: String(key) === selectedFramework,
+        projectCount: data.usedInProjectCount?.projectCount ?? 0,
+        testProjectCount: data.usedInProjectCount?.testProjectCount ?? 0,
     }), [selectedFramework]);
 
     const handleNewFrameworkAddSuccess = useCallback((newFrameworkId: string) => {

diff --git a/app/views/ProjectEdit/Framework/styles.css b/app/views/ProjectEdit/Framework/styles.css
@@ -53,6 +53,16 @@
                         font-weight: var(--dui-font-weight-bold);
                     }
 
+                    .inline {
+                        display: flex;
+                        justify-content: space-between;
+                        width: 100%;
+
+                        .warning {
+                            font-size: var(--dui-font-size-small);
+                        }
+                    }
+
                     .created-on {
                         color: var(--dui-color-text-description);
                         font-size: var(--dui-font-size-small);