refactor(preview): use signConfig from primary props

box · Jan 14, 2025 · f54b7ad · f54b7ad
1 parent 6f979d2
commit f54b7ad
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 51 deletions.
diff --git a/i18n/en-US.properties b/i18n/en-US.properties
@@ -356,8 +356,6 @@ be.contentSidebar.boxSignRequestSignature = Request Signature
 be.contentSidebar.boxSignSecurityBlockedTooltip = This action is unavailable due to a security policy.
 # One of the dropdown options that opens a Box Sign sign myself experience
 be.contentSidebar.boxSignSignMyself = Sign Myself
-# label for button that opens a Box Sign signature fulfillment experience
-be.contentSidebar.boxSignSignature = Sign
 # Tooltip text for when Box Sign is blocked due to an item being watermarked
 be.contentSidebar.boxSignWatermarkBlockedTooltip = This action is unavailable, because the file is watermarked.
 # title for when editing an existing approval task

diff --git a/src/elements/content-sidebar/ContentSidebar.js b/src/elements/content-sidebar/ContentSidebar.js
@@ -34,6 +34,7 @@ import type { DetailsSidebarProps } from './DetailsSidebar';
 import type { DocGenSidebarProps } from './DocGenSidebar/DocGenSidebar';
 import type { MetadataSidebarProps } from './MetadataSidebar';
 import type { VersionsSidebarProps } from './versions';
+import type { SignSideBarProps } from './SidebarNavSign';
 import type { WithLoggerProps } from '../../common/types/logging';
 import type { ElementsXhrError, RequestOptions, ErrorContextProps } from '../../common/types/api';
 import type { MetadataEditor } from '../../common/types/metadata';
@@ -84,6 +85,7 @@ type Props = {
     responseInterceptor?: Function,
     sharedLink?: string,
     sharedLinkPassword?: string,
+    signSidebarProps: SignSideBarProps,
     token: Token,
     versionsSidebarProps: VersionsSidebarProps,
 } & ErrorContextProps &
@@ -364,6 +366,7 @@ class ContentSidebar extends React.Component<Props, State> {
             onVersionChange,
             onVersionHistoryClick,
             versionsSidebarProps,
+            signSidebarProps,
         }: Props = this.props;
         const { file, isLoading, metadataEditors }: State = this.state;
         const initialPath = defaultView.charAt(0) === '/' ? defaultView : `/${defaultView}`;
@@ -405,6 +408,7 @@ class ContentSidebar extends React.Component<Props, State> {
                                 onVersionChange={onVersionChange}
                                 onVersionHistoryClick={onVersionHistoryClick}
                                 versionsSidebarProps={versionsSidebarProps}
+                                signSidebarProps={signSidebarProps}
                                 wrappedComponentRef={ref => {
                                     this.sidebarRef = ref;
                                 }}

diff --git a/src/elements/content-sidebar/Sidebar.js b/src/elements/content-sidebar/Sidebar.js
@@ -29,6 +29,7 @@ import type { VersionsSidebarProps } from './versions';
 import type { AdditionalSidebarTab } from './flowTypes';
 import type { MetadataEditor } from '../../common/types/metadata';
 import type { BoxItem, User } from '../../common/types/core';
+import type { SignSideBarProps } from './SidebarNavSign';
 import type { Errors } from '../common/flowTypes';
 import { SIDEBAR_VIEW_DOCGEN } from '../../constants';
 import API from '../../api';
@@ -66,6 +67,7 @@ type Props = {
     onVersionChange?: Function,
     onVersionHistoryClick?: Function,
     versionsSidebarProps: VersionsSidebarProps,
+    signSidebarProps: SignSideBarProps,
 };
 
 type State = {
@@ -305,6 +307,7 @@ class Sidebar extends React.Component<Props, State> {
             onAnnotationSelect,
             onVersionChange,
             versionsSidebarProps,
+            signSidebarProps,
         }: Props = this.props;
         const isOpen = this.isOpen();
         const hasBoxAI = SidebarUtils.canHaveBoxAISidebar(this.props);
@@ -339,6 +342,7 @@ class Sidebar extends React.Component<Props, State> {
                                 hasMetadata={hasMetadata}
                                 hasSkills={hasSkills}
                                 hasDocGen={docGenSidebarProps.isDocGenTemplate}
+                                signSideBarProps={signSidebarProps}
                                 isOpen={isOpen}
                                 onPanelChange={this.handlePanelChange}
                             />

diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js
@@ -33,6 +33,7 @@ import {
 import { useFeatureConfig } from '../common/feature-checking';
 import type { NavigateOptions, AdditionalSidebarTab } from './flowTypes';
 import './SidebarNav.scss';
+import type { SignSideBarProps } from './SidebarNavSign';
 
 type Props = {
     additionalTabs?: Array<AdditionalSidebarTab>,
@@ -49,6 +50,7 @@ type Props = {
     isOpen?: boolean,
     onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
     onPanelChange?: (name: string, isInitialState: boolean) => void,
+    signSideBarProps: SignSideBarProps,
 };
 
 const SidebarNav = ({
@@ -66,8 +68,9 @@ const SidebarNav = ({
     isOpen,
     onNavigate,
     onPanelChange = noop,
+    signSideBarProps,
 }: Props) => {
-    const { enabled: hasBoxSign } = useFeatureConfig('boxSign');
+    const { enabled: hasBoxSign } = signSideBarProps || {};
     const { disabledTooltip: boxAIDisabledTooltip, showOnlyNavButton: showOnlyBoxAINavButton } =
         useFeatureConfig('boxai.sidebar');
 
@@ -159,7 +162,7 @@ const SidebarNav = ({
 
                 {hasBoxSign && (
                     <div className="bcs-SidebarNav-secondary">
-                        <SidebarNavSign />
+                        <SidebarNavSign {...signSideBarProps} />
                     </div>
                 )}
 

diff --git a/src/elements/content-sidebar/SidebarNavSign.tsx b/src/elements/content-sidebar/SidebarNavSign.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-// @ts-ignore Module is written in Flow
-import { useFeatureConfig } from '../common/feature-checking';
 // @ts-ignore Module is written in Flow
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 
@@ -17,21 +15,29 @@ import { Menu, MenuItem } from '../../components/menu';
 import messages from './messages';
 
 import './SidebarNavSign.scss';
+// @ts-ignore Module is written in Flow
+import type { TargetingApi } from '../../features/targeting/types';
+
+export interface SignSideBarProps {
+    blockedReason: string;
+    enabled: boolean;
+    onClick: () => void;
+    onClickSignMyself: () => void;
+    targetingApi: TargetingApi | null;
+}
 
-export function SidebarNavSign() {
+export function SidebarNavSign(signSideBarProps: SignSideBarProps) {
     const {
         blockedReason: boxSignBlockedReason,
         onClick: onBoxClickRequestSignature,
         onClickSignMyself: onBoxClickSignMyself,
-        status: boxSignStatus,
         targetingApi: boxSignTargetingApi,
-    } = useFeatureConfig('boxSign');
+    } = signSideBarProps;
 
     return (
         <DropdownMenu isResponsive constrainToWindow isRightAligned>
             <SidebarNavSignButton
                 blockedReason={boxSignBlockedReason}
-                status={boxSignStatus}
                 targetingApi={boxSignTargetingApi}
                 data-resin-target={SIDEBAR_NAV_TARGETS.SIGN}
             />

diff --git a/src/elements/content-sidebar/SidebarNavSignButton.tsx b/src/elements/content-sidebar/SidebarNavSignButton.tsx
@@ -25,11 +25,11 @@ export type Props = PlainButtonProps & {
 
 export const PlaceholderTooltip = ({ children }: { children: React.ReactNode }) => children;
 
-export function SidebarNavSignButton({ blockedReason, intl, status, targetingApi, ...rest }: Props) {
+export function SidebarNavSignButton({ blockedReason, intl, targetingApi, ...rest }: Props) {
     const isSignDisabled = !!blockedReason;
-    const isTargeted = targetingApi && targetingApi.canShow;
+    const isTargeted = targetingApi?.canShow;
     const FtuxTooltip = !isSignDisabled && isTargeted ? TargetedClickThroughGuideTooltip : PlaceholderTooltip;
-    const label = intl.formatMessage(status === 'active' ? messages.boxSignSignature : messages.boxSignRequest);
+    const label = intl.formatMessage(messages.boxSignRequest);
     const buttonClassName = classnames('bcs-SidebarNavSignButton', { 'bdl-is-disabled': isSignDisabled });
 
     let tooltipMessage = label;

diff --git a/src/elements/content-sidebar/__tests__/SidebarNav.test.js b/src/elements/content-sidebar/__tests__/SidebarNav.test.js
@@ -166,19 +166,15 @@ describe('elements/content-sidebar/SidebarNav', () => {
     });
 
     test('should render the Box Sign entry point if its feature is enabled', () => {
-        const features = {
-            boxSign: {
+        const props = {
+            signSideBarProps: {
                 enabled: true,
                 onClick: () => {},
             },
         };
-        const wrapper = getWrapper({}, 'activity', features);
-        expect(wrapper.exists(SidebarNavSignButton)).toBe(true);
-    });
+        const wrapper = getWrapper(props);
 
-    test('should not render the Box Sign entry point if its feature is not enabled', () => {
-        const wrapper = getWrapper();
-        expect(wrapper.exists(SidebarNavSignButton)).toBe(false);
+        expect(wrapper.exists(SidebarNavSignButton)).toBe(true);
     });
     test('should render docgen tab', () => {
         const props = {

diff --git a/src/elements/content-sidebar/__tests__/SidebarNavSign.test.tsx b/src/elements/content-sidebar/__tests__/SidebarNavSign.test.tsx
@@ -8,10 +8,15 @@ describe('elements/content-sidebar/SidebarNavSign', () => {
     const onClickRequestSignature = jest.fn();
     const onClickSignMyself = jest.fn();
 
-    const renderComponent = (props = {}, features = {}) =>
-        render(<SidebarNavSign {...props} />, {
-            wrapperProps: { features },
-        });
+    const defaultSignSideBarProps = {
+        blockedReason: '',
+        enabled: true,
+        onClick: onClickRequestSignature,
+        onClickSignMyself,
+        targetingApi: null,
+    };
+
+    const renderComponent = () => render(<SidebarNavSign {...defaultSignSideBarProps} />, {});
 
     test('should render sign button', async () => {
         renderComponent();
@@ -29,12 +34,7 @@ describe('elements/content-sidebar/SidebarNavSign', () => {
     });
 
     test('should call correct handler when request signature option is clicked', async () => {
-        const features = {
-            boxSign: {
-                onClick: onClickRequestSignature,
-            },
-        };
-        renderComponent({}, features);
+        renderComponent();
 
         await userEvent.click(screen.getByRole('button', { name: 'Request Signature' }));
         await userEvent.click(screen.getByRole('menuitem', { name: 'Request Signature' }));
@@ -43,12 +43,7 @@ describe('elements/content-sidebar/SidebarNavSign', () => {
     });
 
     test('should call correct handler when sign myself option is clicked', async () => {
-        const features = {
-            boxSign: {
-                onClickSignMyself,
-            },
-        };
-        renderComponent({}, features);
+        renderComponent();
 
         await userEvent.click(screen.getByRole('button', { name: 'Request Signature' }));
         await userEvent.click(screen.getByRole('menuitem', { name: 'Sign Myself' }));

diff --git a/src/elements/content-sidebar/__tests__/SidebarNavSignButton.test.tsx b/src/elements/content-sidebar/__tests__/SidebarNavSignButton.test.tsx
@@ -10,16 +10,11 @@ import Tooltip from '../../../components/tooltip';
 describe('elements/content-sidebar/SidebarNavSignButton', () => {
     const getWrapper = (props = {}) => shallow(<SidebarNavSignButton {...props} />).dive();
 
-    test.each`
-        status       | label
-        ${undefined} | ${'Request Signature'}
-        ${'random'}  | ${'Request Signature'}
-        ${'active'}  | ${'Sign'}
-    `('should render the correct label based on the current signature status', ({ label, status }) => {
-        const wrapper = getWrapper({ status });
+    test('should render the correct label', () => {
+        const wrapper = getWrapper();
 
-        expect(wrapper.find(Tooltip).prop('text')).toBe(label);
-        expect(wrapper.find(PlainButton).prop('aria-label')).toBe(label);
+        expect(wrapper.find(Tooltip).prop('text')).toBe('Request Signature');
+        expect(wrapper.find(PlainButton).prop('aria-label')).toBe('Request Signature');
         expect(wrapper.exists(BoxSign28)).toBe(true);
     });
 

diff --git a/src/elements/content-sidebar/messages.js b/src/elements/content-sidebar/messages.js
@@ -57,11 +57,6 @@ const messages = defineMessages({
         defaultMessage: 'Sign Myself',
         description: 'One of the dropdown options that opens a Box Sign sign myself experience',
     },
-    boxSignSignature: {
-        id: 'be.contentSidebar.boxSignSignature',
-        defaultMessage: 'Sign',
-        description: 'label for button that opens a Box Sign signature fulfillment experience',
-    },
     boxSignSecurityBlockedTooltip: {
         defaultMessage: 'This action is unavailable due to a security policy.',
         description: 'Tooltip text for when Box Sign is blocked due to a security policy',