Merge pull request #2926 from the-deep/feature/test-tag

TestTag component for test project
the-deep · May 8, 2024 · 10f9e2d · 10f9e2d
2 parents 930fc24 + a2265a5
commit 10f9e2d
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 91 deletions.
diff --git a/app/components/SubNavbar/index.tsx b/app/components/SubNavbar/index.tsx
@@ -20,12 +20,15 @@ export function SubNavbarChildren(props: SubNavbarChildrenProps) {
     const {
         children,
     } = props;
+
     const {
         childrenNode,
     } = useContext(NavbarContext);
+
     if (!childrenNode) {
         return null;
     }
+
     return ReactDOM.createPortal(
         children,
         childrenNode,
@@ -35,16 +38,20 @@ export function SubNavbarChildren(props: SubNavbarChildrenProps) {
 interface SubNavbarIconsProps {
     children: React.ReactNode;
 }
+
 export function SubNavbarIcons(props: SubNavbarIconsProps) {
     const {
         children,
     } = props;
+
     const {
         iconsNode,
     } = useContext(NavbarContext);
+
     if (!iconsNode) {
         return null;
     }
+
     return ReactDOM.createPortal(
         children,
         iconsNode,
@@ -54,16 +61,20 @@ export function SubNavbarIcons(props: SubNavbarIconsProps) {
 interface SubNavbarActionsProps {
     children: React.ReactNode;
 }
+
 export function SubNavbarActions(props: SubNavbarActionsProps) {
     const {
         children,
     } = props;
+
     const {
         actionsNode,
     } = useContext(NavbarContext);
+
     if (!actionsNode) {
         return null;
     }
+
     return ReactDOM.createPortal(
         children,
         actionsNode,

diff --git a/app/components/TestTag/index.tsx b/app/components/TestTag/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+    Tag,
+} from '@the-deep/deep-ui';
+import { IoInformationCircleOutline } from 'react-icons/io5';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.css';
+
+interface Props {
+    className?: string;
+}
+
+function TestTag(props: Props) {
+    const { className } = props;
+
+    return (
+        <Tag
+            className={_cs(className, styles.testTag)}
+            spacing="compact"
+            icons={(
+                <IoInformationCircleOutline
+                    title="This project has been set as test project by the admin of the project."
+                />
+            )}
+        >
+            Test Project
+        </Tag>
+    );
+}
+
+export default TestTag;
diff --git a/app/components/TestTag/styles.css b/app/components/TestTag/styles.css
@@ -0,0 +1,8 @@
+.test-tag {
+    --tag-flex-order: 4;
+    align-items: center;
+    align-self: center;
+    flex-shrink: 0;
+    order: var(--tag-flex-order);
+    background: var(--dui-color-complement3);
+}
diff --git a/app/gqlFragments.ts b/app/gqlFragments.ts
@@ -294,6 +294,7 @@ export const LAST_ACTIVE_PROJECT_FRAGMENT = gql`
         isPrivate
         isProjectPinned
         title
+        isTest
         isVisualizationEnabled
         isVisualizationAvailable
         membershipPending

diff --git a/app/views/AnalysisModule/index.tsx b/app/views/AnalysisModule/index.tsx
@@ -12,6 +12,7 @@ import { generatePath, Redirect, Route, Switch } from 'react-router-dom';
 import SubNavbarContext from '#components/SubNavbar/context';
 import SubNavbar, { SubNavbarIcons } from '#components/SubNavbar';
 import ProjectSwitcher from '#components/general/ProjectSwitcher';
+import TestTag from '#components/TestTag';
 import { ProjectContext } from '#base/context/ProjectContext';
 
 import routes from '#base/configs/routes';
@@ -51,6 +52,7 @@ function AnalysisModule(props: AnalysisModuleProps) {
             <div className={_cs(styles.analysisModule, className)}>
                 <SubNavbarIcons>
                     <ProjectSwitcher />
+                    {project?.isTest && <TestTag />}
                 </SubNavbarIcons>
                 <SubNavbar
                     className={styles.subNavbar}

diff --git a/app/views/EntryEdit/index.tsx b/app/views/EntryEdit/index.tsx
@@ -47,7 +47,9 @@ import { GeoArea } from '#components/GeoMultiSelectInput';
 import { transformToFormError, ObjectError } from '#base/utils/errorTransform';
 import ProjectContext from '#base/context/ProjectContext';
 import UserContext from '#base/context/UserContext';
-import SubNavbar from '#components/SubNavbar';
+import SubNavbarContext from '#components/SubNavbar/context';
+import SubNavbar, { SubNavbarIcons } from '#components/SubNavbar';
+import TestTag from '#components/TestTag';
 import BackLink from '#components/BackLink';
 import ExcerptInput from '#components/entry/ExcerptInput';
 import EntryControl from '#components/entryReview/EntryControl';
@@ -165,6 +167,16 @@ function EntryEdit(props: Props) {
 
     const projectId = project ? project.id : undefined;
 
+    const [iconsNode, setIconsNode] = useState<Element | null | undefined>();
+
+    const navbarContextValue = useMemo(
+        () => ({
+            iconsNode,
+            setIconsNode,
+        }),
+        [iconsNode],
+    );
+
     const [
         geoAreaOptions,
         setGeoAreaOptions,
@@ -1457,67 +1469,72 @@ function EntryEdit(props: Props) {
                 useHash
                 defaultHash="source-details"
             >
-                <SubNavbar
-                    className={styles.header}
-                    heading="Source"
-                    description={lead?.title}
-                    homeLinkShown
-                    defaultActions={(
-                        <>
-                            <BackLink defaultLink="/">
-                                Close
-                            </BackLink>
-                            <Button
-                                name={undefined}
-                                disabled={formPristine || !!selectedEntry || loading}
-                                onClick={handleSaveClick}
+                <SubNavbarContext.Provider value={navbarContextValue}>
+                    <SubNavbarIcons>
+                        {project?.isTest && <TestTag />}
+                    </SubNavbarIcons>
+                    <SubNavbar
+                        className={styles.header}
+                        heading="Source"
+                        description={lead?.title}
+                        homeLinkShown
+                        defaultActions={(
+                            <>
+                                <BackLink defaultLink="/">
+                                    Close
+                                </BackLink>
+                                <Button
+                                    name={undefined}
+                                    disabled={formPristine || !!selectedEntry || loading}
+                                    onClick={handleSaveClick}
+                                >
+                                    Save
+                                </Button>
+                                <ConfirmButton
+                                    name={undefined}
+                                    disabled={disableFinalizeButton}
+                                    variant="primary"
+                                    onConfirm={handleFinalizeClick}
+                                    message="Finalizing the source will mark it as tagged.
+                                    Are you sure you want to finalize the source and all its entries?"
+                                >
+                                    Finalize
+                                </ConfirmButton>
+                            </>
+                        )}
+                    >
+                        <TabList>
+                            <Tab
+                                name="source-details"
+                                transparentBorder
+                                disabled={isEntrySelectionActive}
                             >
-                                Save
-                            </Button>
-                            <ConfirmButton
-                                name={undefined}
-                                disabled={disableFinalizeButton}
-                                variant="primary"
-                                onConfirm={handleFinalizeClick}
-                                message="Finalizing the source will mark it as tagged.
-                                Are you sure you want to finalize the source and all its entries?"
+                                Source Details
+                            </Tab>
+                            <Tab
+                                name="primary-tagging"
+                                transparentBorder
+                                disabled={isEntrySelectionActive}
                             >
-                                Finalize
-                            </ConfirmButton>
-                        </>
-                    )}
-                >
-                    <TabList>
-                        <Tab
-                            name="source-details"
-                            transparentBorder
-                            disabled={isEntrySelectionActive}
-                        >
-                            Source Details
-                        </Tab>
-                        <Tab
-                            name="primary-tagging"
-                            transparentBorder
-                            disabled={isEntrySelectionActive}
-                        >
-                            Primary Tagging
-                        </Tab>
-                        <Tab
-                            name="secondary-tagging"
-                            transparentBorder
-                            disabled={isEntrySelectionActive}
-                        >
-                            Secondary Tagging
-                        </Tab>
-                        <Tab
-                            name="review"
-                            transparentBorder
-                            disabled={isEntrySelectionActive}
-                        >
-                            Review
-                        </Tab>
-                    </TabList>
-                </SubNavbar>
+                                Primary Tagging
+                            </Tab>
+                            <Tab
+                                name="secondary-tagging"
+                                transparentBorder
+                                disabled={isEntrySelectionActive}
+                            >
+                                Secondary Tagging
+                            </Tab>
+                            <Tab
+                                name="review"
+                                transparentBorder
+                                disabled={isEntrySelectionActive}
+                            >
+                                Review
+                            </Tab>
+                        </TabList>
+                    </SubNavbar>
+                </SubNavbarContext.Provider>
                 <CommentCountContext.Provider value={commentCountContext}>
                     <div className={styles.tabPanelContainer}>
                         {loading && <PendingMessage />}

diff --git a/app/views/ReportEdit/index.tsx b/app/views/ReportEdit/index.tsx
@@ -40,7 +40,9 @@ import { IoShareSocialOutline } from 'react-icons/io5';
 
 import BackLink from '#components/BackLink';
 import routes from '#base/configs/routes';
-import SubNavbar from '#components/SubNavbar';
+import SubNavbarContext from '#components/SubNavbar/context';
+import SubNavbar, { SubNavbarIcons } from '#components/SubNavbar';
+import TestTag from '#components/TestTag';
 import {
     BasicOrganization,
 } from '#components/selections/NewOrganizationMultiSelectInput';
@@ -641,6 +643,19 @@ function ReportEdit(props: Props) {
     const history = useHistory();
     const leftContentRef = useRef<HTMLDivElement>(null);
 
+    const [iconsNode, setIconsNode] = useState<Element | null | undefined>();
+    const [actionsNode, setActionsNode] = useState<Element | null | undefined>();
+
+    const navbarContextValue = useMemo(
+        () => ({
+            iconsNode,
+            actionsNode,
+            setIconsNode,
+            setActionsNode,
+        }),
+        [iconsNode, actionsNode],
+    );
+
     const [
         contentEditPaneVisible,
         setContentEditPaneVisibility,
@@ -1081,32 +1096,37 @@ function ReportEdit(props: Props) {
 
     return (
         <div className={_cs(className, styles.reportEdit)}>
-            <SubNavbar
-                className={styles.header}
-                heading="New Report"
-                homeLinkShown
-                defaultActions={(
-                    <>
-                        <BackLink
-                            defaultLink="/"
-                        >
-                            Back
-                        </BackLink>
-                        <Button
-                            name={undefined}
-                            onClick={createSubmitHandler(
-                                validate,
-                                handleError,
-                                handleSubmit,
-                            )}
-                            disabled={pristine}
-                            variant="primary"
-                        >
-                            Save
-                        </Button>
-                    </>
-                )}
-            />
+            <SubNavbarContext.Provider value={navbarContextValue}>
+                <SubNavbarIcons>
+                    {project?.isTest && <TestTag />}
+                </SubNavbarIcons>
+                <SubNavbar
+                    className={styles.header}
+                    heading="New Report"
+                    homeLinkShown
+                    defaultActions={(
+                        <>
+                            <BackLink
+                                defaultLink="/"
+                            >
+                                Back
+                            </BackLink>
+                            <Button
+                                name={undefined}
+                                onClick={createSubmitHandler(
+                                    validate,
+                                    handleError,
+                                    handleSubmit,
+                                )}
+                                disabled={pristine}
+                                variant="primary"
+                            >
+                                Save
+                            </Button>
+                        </>
+                    )}
+                />
+            </SubNavbarContext.Provider>
             <div className={styles.content}>
                 {pending && <PendingMessage />}
                 <div