Skip to content

Commit

Permalink
Add test tag through Subnavbar icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@subinasr @AdityaKhatri
subinasr authored and AdityaKhatri committed May 7, 2024
1 parent 3aaaae4 commit 953c89d
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 98 deletions.
15 changes: 11 additions & 4 deletions app/components/SubNavbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import ReactDOM from 'react-dom';
import { _cs } from '@togglecorp/fujs';
import deepLogo from '#resources/img/logo.svg';
import route from '#base/configs/routes';
import TestTag from '#components/TestTag';

import NavbarContext from './context';
import styles from './styles.css';
Expand All @@ -21,12 +20,15 @@ export function SubNavbarChildren(props: SubNavbarChildrenProps) {
const {
children,
} = props;

const {
childrenNode,
} = useContext(NavbarContext);

if (!childrenNode) {
return null;
}

return ReactDOM.createPortal(
children,
childrenNode,
Expand All @@ -36,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,
Expand All @@ -55,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,
Expand All @@ -86,7 +96,6 @@ interface SubNavbarProps {

heading?: string;
description?: string;
isTestTagShown?: boolean;

homeLinkShown?: boolean;
}
Expand All @@ -104,7 +113,6 @@ function SubNavbar(props: SubNavbarProps) {
descriptionClassName,
descriptionContainerClassName,
description,
isTestTagShown,
homeLinkShown,
} = props;

Expand Down Expand Up @@ -178,7 +186,6 @@ function SubNavbar(props: SubNavbarProps) {
</div>
</div>
)}
{isTestTagShown && <TestTag />}
</div>
<div
ref={childrenRef}
Expand Down
10 changes: 8 additions & 2 deletions app/components/TestTag/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import React from 'react';
import {
Tag,
} from '@the-deep/deep-ui';
import { _cs } from '@togglecorp/fujs';

import styles from './styles.css';
Expand All @@ -11,9 +14,12 @@ function TestTag(props: Props) {
const { className } = props;

return (
<div className={_cs(className, styles.testTag)}>
<Tag
className={_cs(className, styles.testTag)}
spacing="compact"
>
Test Project
</div>
</Tag>
);
}

Expand Down
7 changes: 3 additions & 4 deletions app/components/TestTag/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
.test-tag {
--tag-flex-order: 4;
align-items: center;
align-self: center;
flex-shrink: 0;
border-radius: var(--dui-border-radius-progress-bar);
order: var(--tag-flex-order);
background: var(--dui-color-complement3);
padding: var(--dui-spacing-extra-small) var(--dui-spacing-small);
font-size: var(--dui-font-size-medium);
font-weight: var(--dui-font-weight-bold);
}
141 changes: 80 additions & 61 deletions app/views/EntryEdit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -165,6 +167,19 @@ function EntryEdit(props: Props) {

const projectId = project ? project.id : undefined;

const [iconsNode, setIconsNode] = useState<Element | null | undefined>();
const [actionsNode, setActionsNode] = useState<Element | null | undefined>();

const navbarContextValue = useMemo(
() => ({
iconsNode,
actionsNode,
setIconsNode,
setActionsNode,
}),
[iconsNode, actionsNode],
);

const [
geoAreaOptions,
setGeoAreaOptions,
Expand Down Expand Up @@ -1457,68 +1472,72 @@ function EntryEdit(props: Props) {
useHash
defaultHash="source-details"
>
<SubNavbar
className={styles.header}
heading="Source"
description={lead?.title}
homeLinkShown
isTestTagShown={project?.isTest}
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 />}
Expand Down
74 changes: 47 additions & 27 deletions app/views/ReportEdit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions app/views/Tagging/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ function Tagging(props: Props) {
<div className={_cs(styles.tagging, className)}>
<SubNavbar
className={styles.subNavbar}
// isTestTagShown={project?.isTest}
>
<SmartNavLink
exact
Expand Down

0 comments on commit 953c89d

Please sign in to comment.