box-ui-elements 23.4.0-beta.30 → 23.4.0-beta.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/explorer.css +1 -1
- package/dist/explorer.js +1 -1
- package/dist/openwith.js +1 -1
- package/dist/picker.js +1 -1
- package/dist/preview.css +1 -1
- package/dist/preview.js +1 -1
- package/dist/sharing.js +1 -1
- package/dist/sidebar.css +1 -1
- package/dist/sidebar.js +1 -1
- package/dist/uploader.js +1 -1
- package/es/common/types/metadata.js.flow +6 -0
- package/es/common/types/metadata.js.map +1 -1
- package/es/elements/content-sidebar/SidebarNav.js +14 -3
- package/es/elements/content-sidebar/SidebarNav.js.flow +23 -3
- package/es/elements/content-sidebar/SidebarNav.js.map +1 -1
- package/es/elements/content-sidebar/SidebarNavTablist.js +58 -17
- package/es/elements/content-sidebar/SidebarNavTablist.js.flow +80 -21
- package/es/elements/content-sidebar/SidebarNavTablist.js.map +1 -1
- package/es/features/metadata-instance-editor/CascadePolicy.js +53 -23
- package/es/features/metadata-instance-editor/CascadePolicy.js.flow +69 -27
- package/es/features/metadata-instance-editor/CascadePolicy.js.map +1 -1
- package/es/features/metadata-instance-editor/Instance.js +26 -4
- package/es/features/metadata-instance-editor/Instance.js.flow +33 -4
- package/es/features/metadata-instance-editor/Instance.js.map +1 -1
- package/es/features/metadata-instance-editor/constants.js +4 -1
- package/es/features/metadata-instance-editor/constants.js.flow +10 -1
- package/es/features/metadata-instance-editor/constants.js.map +1 -1
- package/es/features/metadata-instance-editor/messages.js +16 -0
- package/es/features/metadata-instance-editor/messages.js.flow +21 -0
- package/es/features/metadata-instance-editor/messages.js.map +1 -1
- package/es/features/metadata-instance-editor/stories/tests/CascadePolicy-visual.stories.js +32 -0
- package/es/features/metadata-instance-editor/stories/tests/CascadePolicy-visual.stories.js.flow +36 -0
- package/es/features/metadata-instance-editor/stories/tests/CascadePolicy-visual.stories.js.map +1 -0
- package/i18n/bn-IN.js +4 -0
- package/i18n/da-DK.js +4 -0
- package/i18n/de-DE.js +4 -0
- package/i18n/en-AU.js +4 -0
- package/i18n/en-CA.js +4 -0
- package/i18n/en-GB.js +4 -0
- package/i18n/en-US.js +4 -0
- package/i18n/en-US.properties +8 -0
- package/i18n/en-x-pseudo.js +4 -0
- package/i18n/es-419.js +4 -0
- package/i18n/es-ES.js +4 -0
- package/i18n/fi-FI.js +4 -0
- package/i18n/fr-CA.js +4 -0
- package/i18n/fr-FR.js +4 -0
- package/i18n/hi-IN.js +4 -0
- package/i18n/it-IT.js +4 -0
- package/i18n/ja-JP.js +4 -0
- package/i18n/ko-KR.js +4 -0
- package/i18n/nb-NO.js +4 -0
- package/i18n/nl-NL.js +4 -0
- package/i18n/pl-PL.js +4 -0
- package/i18n/pt-BR.js +4 -0
- package/i18n/ru-RU.js +4 -0
- package/i18n/sv-SE.js +4 -0
- package/i18n/tr-TR.js +4 -0
- package/i18n/zh-CN.js +4 -0
- package/i18n/zh-TW.js +4 -0
- package/package.json +7 -7
- package/src/common/types/metadata.js +6 -0
- package/src/elements/content-sidebar/SidebarNav.js +23 -3
- package/src/elements/content-sidebar/SidebarNavTablist.js +80 -21
- package/src/elements/content-sidebar/__tests__/SidebarNav.test.js +99 -147
- package/src/elements/content-sidebar/__tests__/SidebarNavTablist.test.js +189 -42
- package/src/features/metadata-instance-editor/CascadePolicy.js +69 -27
- package/src/features/metadata-instance-editor/Instance.js +33 -4
- package/src/features/metadata-instance-editor/__tests__/CascadePolicy.test.js +70 -63
- package/src/features/metadata-instance-editor/__tests__/Instance.test.js +34 -19
- package/src/features/metadata-instance-editor/__tests__/Instances.test.js +15 -10
- package/src/features/metadata-instance-editor/__tests__/MetadataInstanceEditor.test.js +53 -10
- package/src/features/metadata-instance-editor/__tests__/__snapshots__/Instance.test.js.snap +2 -1
- package/src/features/metadata-instance-editor/constants.js +10 -1
- package/src/features/metadata-instance-editor/messages.js +21 -0
- package/src/features/metadata-instance-editor/stories/tests/CascadePolicy-visual.stories.js +36 -0
- package/src/features/metadata-instance-editor/__tests__/__snapshots__/CascadePolicy.test.js.snap +0 -108
|
@@ -93,10 +93,15 @@ type MetadataCascadePolicy = {
|
|
|
93
93
|
cascadePolicyType?: string,
|
|
94
94
|
};
|
|
95
95
|
|
|
96
|
+
type MetadataCascadePolicyConfiguration = {
|
|
97
|
+
agent: string,
|
|
98
|
+
};
|
|
99
|
+
|
|
96
100
|
type MetadataCascadingPolicyData = {
|
|
97
101
|
id?: string,
|
|
98
102
|
isEnabled: boolean,
|
|
99
103
|
overwrite: boolean,
|
|
104
|
+
cascadePolicyConfiguration: MetadataCascadePolicyConfiguration | null,
|
|
100
105
|
};
|
|
101
106
|
|
|
102
107
|
type MetadataInstance = {
|
|
@@ -187,6 +192,7 @@ export type {
|
|
|
187
192
|
MetadataQueryInstanceTypeField,
|
|
188
193
|
MetadataType,
|
|
189
194
|
MetadataCascadePolicy,
|
|
195
|
+
MetadataCascadePolicyConfiguration,
|
|
190
196
|
MetadataCascadingPolicyData,
|
|
191
197
|
MetadataInstanceV2,
|
|
192
198
|
MetadataEditor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metadata.js","names":["FIELD_TYPE_DATE","FIELD_TYPE_ENUM","FIELD_TYPE_FLOAT","FIELD_TYPE_MULTISELECT","FIELD_TYPE_STRING","FIELD_TYPE_TAXONOMY"],"sources":["../../../src/common/types/metadata.js"],"sourcesContent":["// @flow strict\nimport {\n FIELD_TYPE_DATE,\n FIELD_TYPE_ENUM,\n FIELD_TYPE_FLOAT,\n FIELD_TYPE_MULTISELECT,\n FIELD_TYPE_STRING,\n FIELD_TYPE_TAXONOMY,\n} from '../../features/metadata-instance-fields/constants';\nimport type { SkillCards } from './skills';\n\ntype MetadataFieldType =\n | typeof FIELD_TYPE_DATE\n | typeof FIELD_TYPE_ENUM\n | typeof FIELD_TYPE_FLOAT\n | typeof FIELD_TYPE_MULTISELECT\n | typeof FIELD_TYPE_STRING\n | typeof FIELD_TYPE_TAXONOMY;\n\ntype MetadataTemplateFieldOption = {\n id?: string,\n key: string,\n};\n\nexport type TaxonomyLevel = {\n description: string,\n displayName: string,\n level: number,\n};\n\ntype MetadataTemplateField = {\n description?: string,\n displayName: string,\n hidden?: boolean,\n id: string,\n isHidden?: boolean,\n key: string, // V2\n options?: Array<MetadataTemplateFieldOption>, // V3\n type: MetadataFieldType,\n levels?: Array<TaxonomyLevel>,\n namespace?: string,\n taxonomyKey?: string,\n taxonomy_key?: string,\n};\n\ntype MetadataTemplate = {\n displayName?: string,\n fields?: Array<MetadataTemplateField>,\n hidden?: boolean,\n id: string,\n isHidden?: boolean,\n scope: string, // V2\n templateKey: string, // V3\n};\n\ntype MetadataTemplateSchemaResponse = {\n data?: MetadataTemplate,\n};\n\ntype MetadataSkillsTemplate = {\n archivedItemTemplate?: {\n archiveDate: string,\n },\n boxSkillsCards?: SkillCards,\n};\n\n// $FlowFixMe flow strict doesn't like use of \"any\"\ntype MetadataFieldValue = string | number | Array<any>;\n\ntype MetadataFields = { [string]: MetadataFieldValue };\n\ntype MetadataQueryInstanceTypeField = {\n displayName: string,\n key: string,\n options?: MetadataTemplateFieldOption,\n type: string,\n value: ?MetadataFieldValue,\n};\n\ntype MetadataQueryInstanceTemplate = {\n fields: Array<MetadataQueryInstanceTypeField>,\n id: string,\n};\n\ntype MetadataType = {\n enterprise?: MetadataQueryInstanceTemplate,\n global?: MetadataSkillsTemplate,\n};\n\ntype MetadataCascadePolicy = {\n canEdit?: boolean,\n id?: string,\n cascadePolicyType?: string,\n};\n\ntype MetadataCascadingPolicyData = {\n id?: string,\n isEnabled: boolean,\n overwrite: boolean,\n};\n\ntype MetadataInstance = {\n canEdit: boolean,\n cascadePolicy?: MetadataCascadePolicy,\n data: MetadataFields,\n id: string,\n};\n\ntype MetadataInstanceV2 = {\n $canEdit: boolean,\n $id: string,\n $parent: string,\n $scope: string,\n $template: string,\n $type: string,\n $typeVersion: number,\n $version: number,\n};\n\ntype MetadataEditor = {\n hasError?: boolean,\n instance: MetadataInstance,\n isDirty?: boolean,\n template: MetadataTemplate,\n};\n\ntype MetadataSuggestion = {\n $scope: string,\n $templateKey: string,\n suggestions: { [key: string]: string | number | string[] },\n};\n\ntype MetadataOptionEntryAncestor = {\n id: string,\n display_name: string,\n level: string,\n};\n\ntype MetadataOptionEntry = {\n id: string,\n display_name: string,\n level: number,\n ancestors: MetadataOptionEntryAncestor[],\n deprecated: boolean,\n selectable: boolean,\n};\n\ntype MetadataOptions = {\n entries: MetadataOptionEntry[],\n next_marker: string | null,\n result_count: number,\n};\n\ntype MetadataTemplateInstanceField = {\n description?: string,\n displayName?: string,\n hidden?: boolean,\n id?: string,\n key: string, // V2\n levels?: Array<TaxonomyLevel>,\n options?: Array<MetadataTemplateFieldOption>, // V3\n type: MetadataFieldType,\n value: MetadataFieldValue,\n};\n\ntype MetadataTemplateInstance = {\n canEdit: boolean,\n displayName?: string,\n hidden?: boolean,\n id: string,\n fields: MetadataTemplateInstanceField[],\n scope: string,\n templateKey: string,\n type: string,\n};\n\nexport type {\n MetadataTemplateInstanceField,\n MetadataTemplateInstance,\n MetadataFieldType,\n MetadataTemplateFieldOption,\n MetadataTemplateField,\n MetadataTemplate,\n MetadataTemplateSchemaResponse,\n MetadataFieldValue,\n MetadataFields,\n MetadataQueryInstanceTypeField,\n MetadataType,\n MetadataCascadePolicy,\n MetadataCascadingPolicyData,\n MetadataInstanceV2,\n MetadataEditor,\n MetadataSuggestion,\n MetadataOptions,\n};\n"],"mappings":"AACA,SACIA,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,QAChB,mDAAmD;;AA0D1D","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"metadata.js","names":["FIELD_TYPE_DATE","FIELD_TYPE_ENUM","FIELD_TYPE_FLOAT","FIELD_TYPE_MULTISELECT","FIELD_TYPE_STRING","FIELD_TYPE_TAXONOMY"],"sources":["../../../src/common/types/metadata.js"],"sourcesContent":["// @flow strict\nimport {\n FIELD_TYPE_DATE,\n FIELD_TYPE_ENUM,\n FIELD_TYPE_FLOAT,\n FIELD_TYPE_MULTISELECT,\n FIELD_TYPE_STRING,\n FIELD_TYPE_TAXONOMY,\n} from '../../features/metadata-instance-fields/constants';\nimport type { SkillCards } from './skills';\n\ntype MetadataFieldType =\n | typeof FIELD_TYPE_DATE\n | typeof FIELD_TYPE_ENUM\n | typeof FIELD_TYPE_FLOAT\n | typeof FIELD_TYPE_MULTISELECT\n | typeof FIELD_TYPE_STRING\n | typeof FIELD_TYPE_TAXONOMY;\n\ntype MetadataTemplateFieldOption = {\n id?: string,\n key: string,\n};\n\nexport type TaxonomyLevel = {\n description: string,\n displayName: string,\n level: number,\n};\n\ntype MetadataTemplateField = {\n description?: string,\n displayName: string,\n hidden?: boolean,\n id: string,\n isHidden?: boolean,\n key: string, // V2\n options?: Array<MetadataTemplateFieldOption>, // V3\n type: MetadataFieldType,\n levels?: Array<TaxonomyLevel>,\n namespace?: string,\n taxonomyKey?: string,\n taxonomy_key?: string,\n};\n\ntype MetadataTemplate = {\n displayName?: string,\n fields?: Array<MetadataTemplateField>,\n hidden?: boolean,\n id: string,\n isHidden?: boolean,\n scope: string, // V2\n templateKey: string, // V3\n};\n\ntype MetadataTemplateSchemaResponse = {\n data?: MetadataTemplate,\n};\n\ntype MetadataSkillsTemplate = {\n archivedItemTemplate?: {\n archiveDate: string,\n },\n boxSkillsCards?: SkillCards,\n};\n\n// $FlowFixMe flow strict doesn't like use of \"any\"\ntype MetadataFieldValue = string | number | Array<any>;\n\ntype MetadataFields = { [string]: MetadataFieldValue };\n\ntype MetadataQueryInstanceTypeField = {\n displayName: string,\n key: string,\n options?: MetadataTemplateFieldOption,\n type: string,\n value: ?MetadataFieldValue,\n};\n\ntype MetadataQueryInstanceTemplate = {\n fields: Array<MetadataQueryInstanceTypeField>,\n id: string,\n};\n\ntype MetadataType = {\n enterprise?: MetadataQueryInstanceTemplate,\n global?: MetadataSkillsTemplate,\n};\n\ntype MetadataCascadePolicy = {\n canEdit?: boolean,\n id?: string,\n cascadePolicyType?: string,\n};\n\ntype MetadataCascadePolicyConfiguration = {\n agent: string,\n};\n\ntype MetadataCascadingPolicyData = {\n id?: string,\n isEnabled: boolean,\n overwrite: boolean,\n cascadePolicyConfiguration: MetadataCascadePolicyConfiguration | null,\n};\n\ntype MetadataInstance = {\n canEdit: boolean,\n cascadePolicy?: MetadataCascadePolicy,\n data: MetadataFields,\n id: string,\n};\n\ntype MetadataInstanceV2 = {\n $canEdit: boolean,\n $id: string,\n $parent: string,\n $scope: string,\n $template: string,\n $type: string,\n $typeVersion: number,\n $version: number,\n};\n\ntype MetadataEditor = {\n hasError?: boolean,\n instance: MetadataInstance,\n isDirty?: boolean,\n template: MetadataTemplate,\n};\n\ntype MetadataSuggestion = {\n $scope: string,\n $templateKey: string,\n suggestions: { [key: string]: string | number | string[] },\n};\n\ntype MetadataOptionEntryAncestor = {\n id: string,\n display_name: string,\n level: string,\n};\n\ntype MetadataOptionEntry = {\n id: string,\n display_name: string,\n level: number,\n ancestors: MetadataOptionEntryAncestor[],\n deprecated: boolean,\n selectable: boolean,\n};\n\ntype MetadataOptions = {\n entries: MetadataOptionEntry[],\n next_marker: string | null,\n result_count: number,\n};\n\ntype MetadataTemplateInstanceField = {\n description?: string,\n displayName?: string,\n hidden?: boolean,\n id?: string,\n key: string, // V2\n levels?: Array<TaxonomyLevel>,\n options?: Array<MetadataTemplateFieldOption>, // V3\n type: MetadataFieldType,\n value: MetadataFieldValue,\n};\n\ntype MetadataTemplateInstance = {\n canEdit: boolean,\n displayName?: string,\n hidden?: boolean,\n id: string,\n fields: MetadataTemplateInstanceField[],\n scope: string,\n templateKey: string,\n type: string,\n};\n\nexport type {\n MetadataTemplateInstanceField,\n MetadataTemplateInstance,\n MetadataFieldType,\n MetadataTemplateFieldOption,\n MetadataTemplateField,\n MetadataTemplate,\n MetadataTemplateSchemaResponse,\n MetadataFieldValue,\n MetadataFields,\n MetadataQueryInstanceTypeField,\n MetadataType,\n MetadataCascadePolicy,\n MetadataCascadePolicyConfiguration,\n MetadataCascadingPolicyData,\n MetadataInstanceV2,\n MetadataEditor,\n MetadataSuggestion,\n MetadataOptions,\n};\n"],"mappings":"AACA,SACIA,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,QAChB,mDAAmD;;AA0D1D","ignoreList":[]}
|
|
@@ -38,10 +38,13 @@ const SidebarNav = ({
|
|
|
38
38
|
hasMetadata,
|
|
39
39
|
hasSkills,
|
|
40
40
|
hasDocGen = false,
|
|
41
|
+
internalSidebarNavigation,
|
|
42
|
+
internalSidebarNavigationHandler,
|
|
41
43
|
intl,
|
|
42
44
|
isOpen,
|
|
43
45
|
onNavigate,
|
|
44
46
|
onPanelChange = noop,
|
|
47
|
+
routerDisabled,
|
|
45
48
|
signSidebarProps
|
|
46
49
|
}) => {
|
|
47
50
|
const {
|
|
@@ -69,8 +72,11 @@ const SidebarNav = ({
|
|
|
69
72
|
className: "bcs-SidebarNav-tabs"
|
|
70
73
|
}, /*#__PURE__*/React.createElement(SidebarNavTablist, {
|
|
71
74
|
elementId: elementId,
|
|
75
|
+
internalSidebarNavigation: internalSidebarNavigation,
|
|
76
|
+
internalSidebarNavigationHandler: internalSidebarNavigationHandler,
|
|
72
77
|
isOpen: isOpen,
|
|
73
|
-
onNavigate: onNavigate
|
|
78
|
+
onNavigate: onNavigate,
|
|
79
|
+
routerDisabled: routerDisabled
|
|
74
80
|
}, hasBoxAI && /*#__PURE__*/React.createElement(SidebarNavButton, {
|
|
75
81
|
"data-resin-target": SIDEBAR_NAV_TARGETS.BOXAI,
|
|
76
82
|
"data-target-id": "SidebarNavButton-boxAI",
|
|
@@ -121,6 +127,7 @@ const SidebarNav = ({
|
|
|
121
127
|
})), hasDocGen && /*#__PURE__*/React.createElement(SidebarNavButton, {
|
|
122
128
|
"data-resin-target": SIDEBAR_NAV_TARGETS.DOCGEN,
|
|
123
129
|
"data-target-id": "SidebarNavButton-docGen",
|
|
130
|
+
"data-testid": "sidebardocgen",
|
|
124
131
|
onClick: handleSidebarNavButtonClick,
|
|
125
132
|
sidebarView: SIDEBAR_VIEW_DOCGEN,
|
|
126
133
|
tooltip: intl.formatMessage(messages.sidebarDocGenTooltip)
|
|
@@ -129,14 +136,18 @@ const SidebarNav = ({
|
|
|
129
136
|
}))), hasBoxSign && /*#__PURE__*/React.createElement("div", {
|
|
130
137
|
className: "bcs-SidebarNav-secondary"
|
|
131
138
|
}, /*#__PURE__*/React.createElement(SidebarNavSign, signSidebarProps)), hasAdditionalTabs && /*#__PURE__*/React.createElement("div", {
|
|
132
|
-
className: "bcs-SidebarNav-overflow"
|
|
139
|
+
className: "bcs-SidebarNav-overflow",
|
|
140
|
+
"data-testid": "additional-tabs-overflow"
|
|
133
141
|
}, /*#__PURE__*/React.createElement(AdditionalTabs, {
|
|
134
142
|
key: fileId,
|
|
135
143
|
tabs: additionalTabs
|
|
136
144
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
137
145
|
className: "bcs-SidebarNav-footer"
|
|
138
146
|
}, /*#__PURE__*/React.createElement(SidebarToggle, {
|
|
139
|
-
|
|
147
|
+
internalSidebarNavigation: internalSidebarNavigation,
|
|
148
|
+
internalSidebarNavigationHandler: internalSidebarNavigationHandler,
|
|
149
|
+
isOpen: isOpen,
|
|
150
|
+
routerDisabled: routerDisabled
|
|
140
151
|
})));
|
|
141
152
|
};
|
|
142
153
|
export default injectIntl(SidebarNav);
|
|
@@ -35,6 +35,7 @@ import {
|
|
|
35
35
|
} from '../../constants';
|
|
36
36
|
import { useFeatureConfig } from '../common/feature-checking';
|
|
37
37
|
import type { NavigateOptions, AdditionalSidebarTab } from './flowTypes';
|
|
38
|
+
import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
|
|
38
39
|
import './SidebarNav.scss';
|
|
39
40
|
import type { SignSidebarProps } from './SidebarNavSign';
|
|
40
41
|
|
|
@@ -49,10 +50,13 @@ type Props = {
|
|
|
49
50
|
hasDocGen?: boolean,
|
|
50
51
|
hasMetadata: boolean,
|
|
51
52
|
hasSkills: boolean,
|
|
53
|
+
internalSidebarNavigation?: InternalSidebarNavigation,
|
|
54
|
+
internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
|
|
52
55
|
intl: IntlShape,
|
|
53
56
|
isOpen?: boolean,
|
|
54
57
|
onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
|
|
55
58
|
onPanelChange?: (name: string, isInitialState: boolean) => void,
|
|
59
|
+
routerDisabled?: boolean,
|
|
56
60
|
signSidebarProps: SignSidebarProps,
|
|
57
61
|
};
|
|
58
62
|
|
|
@@ -67,10 +71,13 @@ const SidebarNav = ({
|
|
|
67
71
|
hasMetadata,
|
|
68
72
|
hasSkills,
|
|
69
73
|
hasDocGen = false,
|
|
74
|
+
internalSidebarNavigation,
|
|
75
|
+
internalSidebarNavigationHandler,
|
|
70
76
|
intl,
|
|
71
77
|
isOpen,
|
|
72
78
|
onNavigate,
|
|
73
79
|
onPanelChange = noop,
|
|
80
|
+
routerDisabled,
|
|
74
81
|
signSidebarProps,
|
|
75
82
|
}: Props) => {
|
|
76
83
|
const { enabled: hasBoxSign } = signSidebarProps || {};
|
|
@@ -91,7 +98,14 @@ const SidebarNav = ({
|
|
|
91
98
|
return (
|
|
92
99
|
<div className="bcs-SidebarNav" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>
|
|
93
100
|
<div className="bcs-SidebarNav-tabs">
|
|
94
|
-
<SidebarNavTablist
|
|
101
|
+
<SidebarNavTablist
|
|
102
|
+
elementId={elementId}
|
|
103
|
+
internalSidebarNavigation={internalSidebarNavigation}
|
|
104
|
+
internalSidebarNavigationHandler={internalSidebarNavigationHandler}
|
|
105
|
+
isOpen={isOpen}
|
|
106
|
+
onNavigate={onNavigate}
|
|
107
|
+
routerDisabled={routerDisabled}
|
|
108
|
+
>
|
|
95
109
|
{hasBoxAI && (
|
|
96
110
|
<SidebarNavButton
|
|
97
111
|
data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}
|
|
@@ -161,6 +175,7 @@ const SidebarNav = ({
|
|
|
161
175
|
<SidebarNavButton
|
|
162
176
|
data-resin-target={SIDEBAR_NAV_TARGETS.DOCGEN}
|
|
163
177
|
data-target-id="SidebarNavButton-docGen"
|
|
178
|
+
data-testid="sidebardocgen"
|
|
164
179
|
onClick={handleSidebarNavButtonClick}
|
|
165
180
|
sidebarView={SIDEBAR_VIEW_DOCGEN}
|
|
166
181
|
tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}
|
|
@@ -177,13 +192,18 @@ const SidebarNav = ({
|
|
|
177
192
|
)}
|
|
178
193
|
|
|
179
194
|
{hasAdditionalTabs && (
|
|
180
|
-
<div className="bcs-SidebarNav-overflow">
|
|
195
|
+
<div className="bcs-SidebarNav-overflow" data-testid="additional-tabs-overflow">
|
|
181
196
|
<AdditionalTabs key={fileId} tabs={additionalTabs} />
|
|
182
197
|
</div>
|
|
183
198
|
)}
|
|
184
199
|
</div>
|
|
185
200
|
<div className="bcs-SidebarNav-footer">
|
|
186
|
-
<SidebarToggle
|
|
201
|
+
<SidebarToggle
|
|
202
|
+
internalSidebarNavigation={internalSidebarNavigation}
|
|
203
|
+
internalSidebarNavigationHandler={internalSidebarNavigationHandler}
|
|
204
|
+
isOpen={isOpen}
|
|
205
|
+
routerDisabled={routerDisabled}
|
|
206
|
+
/>
|
|
187
207
|
</div>
|
|
188
208
|
</div>
|
|
189
209
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarNav.js","names":["React","injectIntl","noop","BoxAiLogo","Size6","usePromptFocus","AdditionalTabs","DocGenIcon","IconChatRound","IconDocInfo","IconMagicWand","IconMetadataThick","SidebarNavButton","SidebarNavSign","SidebarNavTablist","SidebarToggle","messages","SIDEBAR_NAV_TARGETS","SIDEBAR_VIEW_ACTIVITY","SIDEBAR_VIEW_BOXAI","SIDEBAR_VIEW_DETAILS","SIDEBAR_VIEW_DOCGEN","SIDEBAR_VIEW_METADATA","SIDEBAR_VIEW_SKILLS","useFeatureConfig","SidebarNav","additionalTabs","elementId","fileId","hasActivity","hasAdditionalTabs","hasBoxAI","hasDetails","hasMetadata","hasSkills","hasDocGen","intl","isOpen","onNavigate","onPanelChange","signSidebarProps","enabled","hasBoxSign","disabledTooltip","boxAIDisabledTooltip","showOnlyNavButton","showOnlyBoxAINavButton","focusPrompt","handleSidebarNavButtonClick","sidebarview","createElement","className","formatMessage","sidebarNavLabel","BOXAI","isDisabled","onClick","sidebarView","tooltip","sidebarBoxAITitle","height","width","ACTIVITY","sidebarActivityTitle","DETAILS","sidebarDetailsTitle","SKILLS","sidebarSkillsTitle","METADATA","sidebarMetadataTitle","DOCGEN","sidebarDocGenTooltip","key","tabs"],"sources":["../../../src/elements/content-sidebar/SidebarNav.js"],"sourcesContent":["/**\n * @flow\n * @file Preview sidebar nav component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { IntlShape } from 'react-intl';\nimport noop from 'lodash/noop';\n// $FlowFixMe\nimport { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';\n// $FlowFixMe\nimport { Size6 } from '@box/blueprint-web-assets/tokens/tokens';\nimport { usePromptFocus } from '@box/box-ai-content-answers';\nimport AdditionalTabs from './additional-tabs';\nimport DocGenIcon from '../../icon/fill/DocGenIcon';\nimport IconChatRound from '../../icons/general/IconChatRound';\nimport IconDocInfo from '../../icons/general/IconDocInfo';\nimport IconMagicWand from '../../icons/general/IconMagicWand';\nimport IconMetadataThick from '../../icons/general/IconMetadataThick';\nimport SidebarNavButton from './SidebarNavButton';\nimport SidebarNavSign from './SidebarNavSign';\nimport SidebarNavTablist from './SidebarNavTablist';\nimport SidebarToggle from './SidebarToggle';\nimport messages from '../common/messages';\nimport { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';\nimport {\n SIDEBAR_VIEW_ACTIVITY,\n SIDEBAR_VIEW_BOXAI,\n SIDEBAR_VIEW_DETAILS,\n SIDEBAR_VIEW_DOCGEN,\n SIDEBAR_VIEW_METADATA,\n SIDEBAR_VIEW_SKILLS,\n} from '../../constants';\nimport { useFeatureConfig } from '../common/feature-checking';\nimport type { NavigateOptions, AdditionalSidebarTab } from './flowTypes';\nimport './SidebarNav.scss';\nimport type { SignSidebarProps } from './SidebarNavSign';\n\ntype Props = {\n additionalTabs?: Array<AdditionalSidebarTab>,\n elementId: string,\n fileId: string,\n hasActivity: boolean,\n hasAdditionalTabs: boolean,\n hasBoxAI: boolean,\n hasDetails: boolean,\n hasDocGen?: boolean,\n hasMetadata: boolean,\n hasSkills: boolean,\n intl: IntlShape,\n isOpen?: boolean,\n onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,\n onPanelChange?: (name: string, isInitialState: boolean) => void,\n signSidebarProps: SignSidebarProps,\n};\n\nconst SidebarNav = ({\n additionalTabs,\n elementId,\n fileId,\n hasActivity,\n hasAdditionalTabs,\n hasBoxAI,\n hasDetails,\n hasMetadata,\n hasSkills,\n hasDocGen = false,\n intl,\n isOpen,\n onNavigate,\n onPanelChange = noop,\n signSidebarProps,\n}: Props) => {\n const { enabled: hasBoxSign } = signSidebarProps || {};\n const { disabledTooltip: boxAIDisabledTooltip, showOnlyNavButton: showOnlyBoxAINavButton } =\n useFeatureConfig('boxai.sidebar');\n\n const { focusPrompt } = usePromptFocus('.be.bcs');\n\n const handleSidebarNavButtonClick = (sidebarview: string) => {\n onPanelChange(sidebarview, false);\n\n // If the Box AI sidebar is enabled, focus the Box AI sidebar prompt\n if (sidebarview === SIDEBAR_VIEW_BOXAI) {\n focusPrompt();\n }\n };\n\n return (\n <div className=\"bcs-SidebarNav\" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>\n <div className=\"bcs-SidebarNav-tabs\">\n <SidebarNavTablist elementId={elementId} isOpen={isOpen} onNavigate={onNavigate}>\n {hasBoxAI && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}\n data-target-id=\"SidebarNavButton-boxAI\"\n data-testid=\"sidebarboxai\"\n isDisabled={showOnlyBoxAINavButton}\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_BOXAI}\n tooltip={\n showOnlyBoxAINavButton\n ? boxAIDisabledTooltip\n : intl.formatMessage(messages.sidebarBoxAITitle)\n }\n >\n <BoxAiLogo height={Size6} width={Size6} />\n </SidebarNavButton>\n )}\n {hasActivity && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}\n data-target-id=\"SidebarNavButton-activity\"\n data-testid=\"sidebaractivity\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_ACTIVITY}\n tooltip={intl.formatMessage(messages.sidebarActivityTitle)}\n >\n <IconChatRound className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasDetails && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.DETAILS}\n data-target-id=\"SidebarNavButton-details\"\n data-testid=\"sidebardetails\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_DETAILS}\n tooltip={intl.formatMessage(messages.sidebarDetailsTitle)}\n >\n <IconDocInfo className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasSkills && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.SKILLS}\n data-target-id=\"SidebarNavButton-skills\"\n data-testid=\"sidebarskills\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_SKILLS}\n tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}\n >\n <IconMagicWand className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasMetadata && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.METADATA}\n data-target-id=\"SidebarNavButton-metadata\"\n data-testid=\"sidebarmetadata\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_METADATA}\n tooltip={intl.formatMessage(messages.sidebarMetadataTitle)}\n >\n <IconMetadataThick className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasDocGen && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.DOCGEN}\n data-target-id=\"SidebarNavButton-docGen\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_DOCGEN}\n tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}\n >\n <DocGenIcon className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n </SidebarNavTablist>\n\n {hasBoxSign && (\n <div className=\"bcs-SidebarNav-secondary\">\n <SidebarNavSign {...signSidebarProps} />\n </div>\n )}\n\n {hasAdditionalTabs && (\n <div className=\"bcs-SidebarNav-overflow\">\n <AdditionalTabs key={fileId} tabs={additionalTabs} />\n </div>\n )}\n </div>\n <div className=\"bcs-SidebarNav-footer\">\n <SidebarToggle isOpen={isOpen} />\n </div>\n </div>\n );\n};\nexport default injectIntl(SidebarNav);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,YAAY;AAEvC,OAAOC,IAAI,MAAM,aAAa;AAC9B;AACA,SAASC,SAAS,QAAQ,sCAAsC;AAChE;AACA,SAASC,KAAK,QAAQ,yCAAyC;AAC/D,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,aAAa,MAAM,mCAAmC;AAC7D,OAAOC,WAAW,MAAM,iCAAiC;AACzD,OAAOC,aAAa,MAAM,mCAAmC;AAC7D,OAAOC,iBAAiB,MAAM,uCAAuC;AACrE,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,QAAQ,MAAM,oBAAoB;AACzC,SAASC,mBAAmB,QAAQ,8BAA8B;AAClE,SACIC,qBAAqB,EACrBC,kBAAkB,EAClBC,oBAAoB,EACpBC,mBAAmB,EACnBC,qBAAqB,EACrBC,mBAAmB,QAChB,iBAAiB;AACxB,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,OAAO,mBAAmB;AAqB1B,MAAMC,UAAU,GAAGA,CAAC;EAChBC,cAAc;EACdC,SAAS;EACTC,MAAM;EACNC,WAAW;EACXC,iBAAiB;EACjBC,QAAQ;EACRC,UAAU;EACVC,WAAW;EACXC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,IAAI;EACJC,MAAM;EACNC,UAAU;EACVC,aAAa,GAAGrC,IAAI;EACpBsC;AACG,CAAC,KAAK;EACT,MAAM;IAAEC,OAAO,EAAEC;EAAW,CAAC,GAAGF,gBAAgB,IAAI,CAAC,CAAC;EACtD,MAAM;IAAEG,eAAe,EAAEC,oBAAoB;IAAEC,iBAAiB,EAAEC;EAAuB,CAAC,GACtFtB,gBAAgB,CAAC,eAAe,CAAC;EAErC,MAAM;IAAEuB;EAAY,CAAC,GAAG1C,cAAc,CAAC,SAAS,CAAC;EAEjD,MAAM2C,2BAA2B,GAAIC,WAAmB,IAAK;IACzDV,aAAa,CAACU,WAAW,EAAE,KAAK,CAAC;;IAEjC;IACA,IAAIA,WAAW,KAAK9B,kBAAkB,EAAE;MACpC4B,WAAW,CAAC,CAAC;IACjB;EACJ,CAAC;EAED,oBACI/C,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAC,gBAAgB;IAAC,cAAYf,IAAI,CAACgB,aAAa,CAACpC,QAAQ,CAACqC,eAAe;EAAE,gBACrFrD,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAC;EAAqB,gBAChCnD,KAAA,CAAAkD,aAAA,CAACpC,iBAAiB;IAACa,SAAS,EAAEA,SAAU;IAACU,MAAM,EAAEA,MAAO;IAACC,UAAU,EAAEA;EAAW,GAC3EP,QAAQ,iBACL/B,KAAA,CAAAkD,aAAA,CAACtC,gBAAgB;IACb,qBAAmBK,mBAAmB,CAACqC,KAAM;IAC7C,kBAAe,wBAAwB;IACvC,eAAY,cAAc;IAC1BC,UAAU,EAAET,sBAAuB;IACnCU,OAAO,EAAER,2BAA4B;IACrCS,WAAW,EAAEtC,kBAAmB;IAChCuC,OAAO,EACHZ,sBAAsB,GAChBF,oBAAoB,GACpBR,IAAI,CAACgB,aAAa,CAACpC,QAAQ,CAAC2C,iBAAiB;EACtD,gBAED3D,KAAA,CAAAkD,aAAA,CAAC/C,SAAS;IAACyD,MAAM,EAAExD,KAAM;IAACyD,KAAK,EAAEzD;EAAM,CAAE,CAC3B,CACrB,EACAyB,WAAW,iBACR7B,KAAA,CAAAkD,aAAA,CAACtC,gBAAgB;IACb,qBAAmBK,mBAAmB,CAAC6C,QAAS;IAChD,kBAAe,2BAA2B;IAC1C,eAAY,iBAAiB;IAC7BN,OAAO,EAAER,2BAA4B;IACrCS,WAAW,EAAEvC,qBAAsB;IACnCwC,OAAO,EAAEtB,IAAI,CAACgB,aAAa,CAACpC,QAAQ,CAAC+C,oBAAoB;EAAE,gBAE3D/D,KAAA,CAAAkD,aAAA,CAAC1C,aAAa;IAAC2C,SAAS,EAAC;EAAqB,CAAE,CAClC,CACrB,EACAnB,UAAU,iBACPhC,KAAA,CAAAkD,aAAA,CAACtC,gBAAgB;IACb,qBAAmBK,mBAAmB,CAAC+C,OAAQ;IAC/C,kBAAe,0BAA0B;IACzC,eAAY,gBAAgB;IAC5BR,OAAO,EAAER,2BAA4B;IACrCS,WAAW,EAAErC,oBAAqB;IAClCsC,OAAO,EAAEtB,IAAI,CAACgB,aAAa,CAACpC,QAAQ,CAACiD,mBAAmB;EAAE,gBAE1DjE,KAAA,CAAAkD,aAAA,CAACzC,WAAW;IAAC0C,SAAS,EAAC;EAAqB,CAAE,CAChC,CACrB,EACAjB,SAAS,iBACNlC,KAAA,CAAAkD,aAAA,CAACtC,gBAAgB;IACb,qBAAmBK,mBAAmB,CAACiD,MAAO;IAC9C,kBAAe,yBAAyB;IACxC,eAAY,eAAe;IAC3BV,OAAO,EAAER,2BAA4B;IACrCS,WAAW,EAAElC,mBAAoB;IACjCmC,OAAO,EAAEtB,IAAI,CAACgB,aAAa,CAACpC,QAAQ,CAACmD,kBAAkB;EAAE,gBAEzDnE,KAAA,CAAAkD,aAAA,CAACxC,aAAa;IAACyC,SAAS,EAAC;EAAqB,CAAE,CAClC,CACrB,EACAlB,WAAW,iBACRjC,KAAA,CAAAkD,aAAA,CAACtC,gBAAgB;IACb,qBAAmBK,mBAAmB,CAACmD,QAAS;IAChD,kBAAe,2BAA2B;IAC1C,eAAY,iBAAiB;IAC7BZ,OAAO,EAAER,2BAA4B;IACrCS,WAAW,EAAEnC,qBAAsB;IACnCoC,OAAO,EAAEtB,IAAI,CAACgB,aAAa,CAACpC,QAAQ,CAACqD,oBAAoB;EAAE,gBAE3DrE,KAAA,CAAAkD,aAAA,CAACvC,iBAAiB;IAACwC,SAAS,EAAC;EAAqB,CAAE,CACtC,CACrB,EACAhB,SAAS,iBACNnC,KAAA,CAAAkD,aAAA,CAACtC,gBAAgB;IACb,qBAAmBK,mBAAmB,CAACqD,MAAO;IAC9C,kBAAe,yBAAyB;IACxCd,OAAO,EAAER,2BAA4B;IACrCS,WAAW,EAAEpC,mBAAoB;IACjCqC,OAAO,EAAEtB,IAAI,CAACgB,aAAa,CAACpC,QAAQ,CAACuD,oBAAoB;EAAE,gBAE3DvE,KAAA,CAAAkD,aAAA,CAAC3C,UAAU;IAAC4C,SAAS,EAAC;EAAqB,CAAE,CAC/B,CAEP,CAAC,EAEnBT,UAAU,iBACP1C,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAC;EAA0B,gBACrCnD,KAAA,CAAAkD,aAAA,CAACrC,cAAc,EAAK2B,gBAAmB,CACtC,CACR,EAEAV,iBAAiB,iBACd9B,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAC;EAAyB,gBACpCnD,KAAA,CAAAkD,aAAA,CAAC5C,cAAc;IAACkE,GAAG,EAAE5C,MAAO;IAAC6C,IAAI,EAAE/C;EAAe,CAAE,CACnD,CAER,CAAC,eACN1B,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAC;EAAuB,gBAClCnD,KAAA,CAAAkD,aAAA,CAACnC,aAAa;IAACsB,MAAM,EAAEA;EAAO,CAAE,CAC/B,CACJ,CAAC;AAEd,CAAC;AACD,eAAepC,UAAU,CAACwB,UAAU,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"SidebarNav.js","names":["React","injectIntl","noop","BoxAiLogo","Size6","usePromptFocus","AdditionalTabs","DocGenIcon","IconChatRound","IconDocInfo","IconMagicWand","IconMetadataThick","SidebarNavButton","SidebarNavSign","SidebarNavTablist","SidebarToggle","messages","SIDEBAR_NAV_TARGETS","SIDEBAR_VIEW_ACTIVITY","SIDEBAR_VIEW_BOXAI","SIDEBAR_VIEW_DETAILS","SIDEBAR_VIEW_DOCGEN","SIDEBAR_VIEW_METADATA","SIDEBAR_VIEW_SKILLS","useFeatureConfig","SidebarNav","additionalTabs","elementId","fileId","hasActivity","hasAdditionalTabs","hasBoxAI","hasDetails","hasMetadata","hasSkills","hasDocGen","internalSidebarNavigation","internalSidebarNavigationHandler","intl","isOpen","onNavigate","onPanelChange","routerDisabled","signSidebarProps","enabled","hasBoxSign","disabledTooltip","boxAIDisabledTooltip","showOnlyNavButton","showOnlyBoxAINavButton","focusPrompt","handleSidebarNavButtonClick","sidebarview","createElement","className","formatMessage","sidebarNavLabel","BOXAI","isDisabled","onClick","sidebarView","tooltip","sidebarBoxAITitle","height","width","ACTIVITY","sidebarActivityTitle","DETAILS","sidebarDetailsTitle","SKILLS","sidebarSkillsTitle","METADATA","sidebarMetadataTitle","DOCGEN","sidebarDocGenTooltip","key","tabs"],"sources":["../../../src/elements/content-sidebar/SidebarNav.js"],"sourcesContent":["/**\n * @flow\n * @file Preview sidebar nav component\n * @author Box\n */\n\nimport * as React from 'react';\nimport { injectIntl } from 'react-intl';\nimport type { IntlShape } from 'react-intl';\nimport noop from 'lodash/noop';\n// $FlowFixMe\nimport { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';\n// $FlowFixMe\nimport { Size6 } from '@box/blueprint-web-assets/tokens/tokens';\nimport { usePromptFocus } from '@box/box-ai-content-answers';\nimport AdditionalTabs from './additional-tabs';\nimport DocGenIcon from '../../icon/fill/DocGenIcon';\nimport IconChatRound from '../../icons/general/IconChatRound';\nimport IconDocInfo from '../../icons/general/IconDocInfo';\nimport IconMagicWand from '../../icons/general/IconMagicWand';\nimport IconMetadataThick from '../../icons/general/IconMetadataThick';\nimport SidebarNavButton from './SidebarNavButton';\nimport SidebarNavSign from './SidebarNavSign';\nimport SidebarNavTablist from './SidebarNavTablist';\nimport SidebarToggle from './SidebarToggle';\nimport messages from '../common/messages';\nimport { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';\nimport {\n SIDEBAR_VIEW_ACTIVITY,\n SIDEBAR_VIEW_BOXAI,\n SIDEBAR_VIEW_DETAILS,\n SIDEBAR_VIEW_DOCGEN,\n SIDEBAR_VIEW_METADATA,\n SIDEBAR_VIEW_SKILLS,\n} from '../../constants';\nimport { useFeatureConfig } from '../common/feature-checking';\nimport type { NavigateOptions, AdditionalSidebarTab } from './flowTypes';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';\nimport './SidebarNav.scss';\nimport type { SignSidebarProps } from './SidebarNavSign';\n\ntype Props = {\n additionalTabs?: Array<AdditionalSidebarTab>,\n elementId: string,\n fileId: string,\n hasActivity: boolean,\n hasAdditionalTabs: boolean,\n hasBoxAI: boolean,\n hasDetails: boolean,\n hasDocGen?: boolean,\n hasMetadata: boolean,\n hasSkills: boolean,\n internalSidebarNavigation?: InternalSidebarNavigation,\n internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n intl: IntlShape,\n isOpen?: boolean,\n onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,\n onPanelChange?: (name: string, isInitialState: boolean) => void,\n routerDisabled?: boolean,\n signSidebarProps: SignSidebarProps,\n};\n\nconst SidebarNav = ({\n additionalTabs,\n elementId,\n fileId,\n hasActivity,\n hasAdditionalTabs,\n hasBoxAI,\n hasDetails,\n hasMetadata,\n hasSkills,\n hasDocGen = false,\n internalSidebarNavigation,\n internalSidebarNavigationHandler,\n intl,\n isOpen,\n onNavigate,\n onPanelChange = noop,\n routerDisabled,\n signSidebarProps,\n}: Props) => {\n const { enabled: hasBoxSign } = signSidebarProps || {};\n const { disabledTooltip: boxAIDisabledTooltip, showOnlyNavButton: showOnlyBoxAINavButton } =\n useFeatureConfig('boxai.sidebar');\n\n const { focusPrompt } = usePromptFocus('.be.bcs');\n\n const handleSidebarNavButtonClick = (sidebarview: string) => {\n onPanelChange(sidebarview, false);\n\n // If the Box AI sidebar is enabled, focus the Box AI sidebar prompt\n if (sidebarview === SIDEBAR_VIEW_BOXAI) {\n focusPrompt();\n }\n };\n\n return (\n <div className=\"bcs-SidebarNav\" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>\n <div className=\"bcs-SidebarNav-tabs\">\n <SidebarNavTablist\n elementId={elementId}\n internalSidebarNavigation={internalSidebarNavigation}\n internalSidebarNavigationHandler={internalSidebarNavigationHandler}\n isOpen={isOpen}\n onNavigate={onNavigate}\n routerDisabled={routerDisabled}\n >\n {hasBoxAI && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}\n data-target-id=\"SidebarNavButton-boxAI\"\n data-testid=\"sidebarboxai\"\n isDisabled={showOnlyBoxAINavButton}\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_BOXAI}\n tooltip={\n showOnlyBoxAINavButton\n ? boxAIDisabledTooltip\n : intl.formatMessage(messages.sidebarBoxAITitle)\n }\n >\n <BoxAiLogo height={Size6} width={Size6} />\n </SidebarNavButton>\n )}\n {hasActivity && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}\n data-target-id=\"SidebarNavButton-activity\"\n data-testid=\"sidebaractivity\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_ACTIVITY}\n tooltip={intl.formatMessage(messages.sidebarActivityTitle)}\n >\n <IconChatRound className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasDetails && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.DETAILS}\n data-target-id=\"SidebarNavButton-details\"\n data-testid=\"sidebardetails\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_DETAILS}\n tooltip={intl.formatMessage(messages.sidebarDetailsTitle)}\n >\n <IconDocInfo className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasSkills && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.SKILLS}\n data-target-id=\"SidebarNavButton-skills\"\n data-testid=\"sidebarskills\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_SKILLS}\n tooltip={intl.formatMessage(messages.sidebarSkillsTitle)}\n >\n <IconMagicWand className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasMetadata && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.METADATA}\n data-target-id=\"SidebarNavButton-metadata\"\n data-testid=\"sidebarmetadata\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_METADATA}\n tooltip={intl.formatMessage(messages.sidebarMetadataTitle)}\n >\n <IconMetadataThick className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n {hasDocGen && (\n <SidebarNavButton\n data-resin-target={SIDEBAR_NAV_TARGETS.DOCGEN}\n data-target-id=\"SidebarNavButton-docGen\"\n data-testid=\"sidebardocgen\"\n onClick={handleSidebarNavButtonClick}\n sidebarView={SIDEBAR_VIEW_DOCGEN}\n tooltip={intl.formatMessage(messages.sidebarDocGenTooltip)}\n >\n <DocGenIcon className=\"bcs-SidebarNav-icon\" />\n </SidebarNavButton>\n )}\n </SidebarNavTablist>\n\n {hasBoxSign && (\n <div className=\"bcs-SidebarNav-secondary\">\n <SidebarNavSign {...signSidebarProps} />\n </div>\n )}\n\n {hasAdditionalTabs && (\n <div className=\"bcs-SidebarNav-overflow\" data-testid=\"additional-tabs-overflow\">\n <AdditionalTabs key={fileId} tabs={additionalTabs} />\n </div>\n )}\n </div>\n <div className=\"bcs-SidebarNav-footer\">\n <SidebarToggle\n internalSidebarNavigation={internalSidebarNavigation}\n internalSidebarNavigationHandler={internalSidebarNavigationHandler}\n isOpen={isOpen}\n routerDisabled={routerDisabled}\n />\n </div>\n </div>\n );\n};\nexport default injectIntl(SidebarNav);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -16,13 +16,18 @@ const SidebarNavTablist = ({
|
|
|
16
16
|
children,
|
|
17
17
|
history,
|
|
18
18
|
elementId,
|
|
19
|
+
internalSidebarNavigation,
|
|
20
|
+
internalSidebarNavigationHandler,
|
|
19
21
|
isOpen,
|
|
20
|
-
onNavigate
|
|
22
|
+
onNavigate,
|
|
23
|
+
routerDisabled = false
|
|
21
24
|
}) => {
|
|
22
25
|
const refs = [];
|
|
23
|
-
const tablist = React.Children.map(children, child => child &&
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
+
const tablist = React.Children.map(children, child => child && child.props.sidebarView);
|
|
27
|
+
const handleKeyDownWithRouter = event => {
|
|
28
|
+
if (!history) return;
|
|
29
|
+
const currentPath = history.location.pathname.replace('/', '');
|
|
30
|
+
const currentIndex = tablist.indexOf(currentPath);
|
|
26
31
|
const {
|
|
27
32
|
length
|
|
28
33
|
} = tablist;
|
|
@@ -30,26 +35,50 @@ const SidebarNavTablist = ({
|
|
|
30
35
|
switch (event.key) {
|
|
31
36
|
case KEYS.arrowUp:
|
|
32
37
|
nextIndex = (currentIndex - 1 + length) % length;
|
|
33
|
-
history.push(tablist[nextIndex]);
|
|
34
|
-
if (refs.length > 0) {
|
|
35
|
-
refs[nextIndex].focus();
|
|
36
|
-
}
|
|
37
|
-
event.stopPropagation();
|
|
38
|
-
event.preventDefault();
|
|
39
38
|
break;
|
|
40
39
|
case KEYS.arrowDown:
|
|
41
40
|
nextIndex = (currentIndex + 1) % length;
|
|
42
|
-
history.push(tablist[nextIndex]);
|
|
43
|
-
if (refs.length > 0) {
|
|
44
|
-
refs[nextIndex].focus();
|
|
45
|
-
}
|
|
46
|
-
event.stopPropagation();
|
|
47
|
-
event.preventDefault();
|
|
48
41
|
break;
|
|
49
42
|
default:
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const nextTab = tablist[nextIndex];
|
|
46
|
+
history.push(`/${nextTab}`);
|
|
47
|
+
if (refs.length > nextIndex) {
|
|
48
|
+
refs[nextIndex].focus();
|
|
49
|
+
}
|
|
50
|
+
event.stopPropagation();
|
|
51
|
+
event.preventDefault();
|
|
52
|
+
};
|
|
53
|
+
const handleKeyDownWithoutRouter = event => {
|
|
54
|
+
if (!internalSidebarNavigationHandler) return;
|
|
55
|
+
const currentTab = internalSidebarNavigation?.sidebar;
|
|
56
|
+
const currentIndex = tablist.indexOf(currentTab);
|
|
57
|
+
const {
|
|
58
|
+
length
|
|
59
|
+
} = tablist;
|
|
60
|
+
let nextIndex = currentIndex;
|
|
61
|
+
switch (event.key) {
|
|
62
|
+
case KEYS.arrowUp:
|
|
63
|
+
nextIndex = (currentIndex - 1 + length) % length;
|
|
64
|
+
break;
|
|
65
|
+
case KEYS.arrowDown:
|
|
66
|
+
nextIndex = (currentIndex + 1) % length;
|
|
50
67
|
break;
|
|
68
|
+
default:
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
const nextTab = tablist[nextIndex];
|
|
72
|
+
internalSidebarNavigationHandler({
|
|
73
|
+
sidebar: nextTab
|
|
74
|
+
});
|
|
75
|
+
if (refs.length > nextIndex) {
|
|
76
|
+
refs[nextIndex].focus();
|
|
51
77
|
}
|
|
78
|
+
event.stopPropagation();
|
|
79
|
+
event.preventDefault();
|
|
52
80
|
};
|
|
81
|
+
const handleKeyDown = routerDisabled ? handleKeyDownWithoutRouter : handleKeyDownWithRouter;
|
|
53
82
|
return /*#__PURE__*/React.createElement("div", {
|
|
54
83
|
"aria-orientation": "vertical",
|
|
55
84
|
className: "bcs-SidebarNav-main",
|
|
@@ -62,13 +91,25 @@ const SidebarNavTablist = ({
|
|
|
62
91
|
}
|
|
63
92
|
return /*#__PURE__*/React.cloneElement(tab, _objectSpread({
|
|
64
93
|
elementId,
|
|
94
|
+
internalSidebarNavigation,
|
|
95
|
+
internalSidebarNavigationHandler,
|
|
65
96
|
isOpen,
|
|
66
97
|
onNavigate,
|
|
98
|
+
routerDisabled,
|
|
67
99
|
ref: ref => {
|
|
68
100
|
refs.push(ref);
|
|
69
101
|
}
|
|
70
102
|
}, tab.props));
|
|
71
103
|
}));
|
|
72
104
|
};
|
|
73
|
-
|
|
105
|
+
|
|
106
|
+
// Conditionally wrap with withRouter only when router is not disabled
|
|
107
|
+
const SidebarNavTablistWithRouter = withRouter(SidebarNavTablist);
|
|
108
|
+
const SidebarNavTablistWrapper = props => {
|
|
109
|
+
if (props.routerDisabled) {
|
|
110
|
+
return /*#__PURE__*/React.createElement(SidebarNavTablist, props);
|
|
111
|
+
}
|
|
112
|
+
return /*#__PURE__*/React.createElement(SidebarNavTablistWithRouter, props);
|
|
113
|
+
};
|
|
114
|
+
export default SidebarNavTablistWrapper;
|
|
74
115
|
//# sourceMappingURL=SidebarNavTablist.js.map
|
|
@@ -9,50 +9,96 @@ import type { RouterHistory } from 'react-router-dom';
|
|
|
9
9
|
import { withRouter } from 'react-router-dom';
|
|
10
10
|
import { KEYS } from '../../constants';
|
|
11
11
|
import type { NavigateOptions } from './flowTypes';
|
|
12
|
+
import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
|
|
12
13
|
|
|
13
14
|
type Props = {
|
|
14
15
|
children: React.Node,
|
|
15
16
|
elementId: string,
|
|
16
|
-
history
|
|
17
|
+
history?: RouterHistory,
|
|
18
|
+
internalSidebarNavigation?: InternalSidebarNavigation,
|
|
19
|
+
internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
|
|
17
20
|
isOpen?: boolean,
|
|
18
21
|
onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
|
|
22
|
+
routerDisabled?: boolean,
|
|
19
23
|
};
|
|
20
24
|
|
|
21
|
-
const SidebarNavTablist = ({
|
|
25
|
+
const SidebarNavTablist = ({
|
|
26
|
+
children,
|
|
27
|
+
history,
|
|
28
|
+
elementId,
|
|
29
|
+
internalSidebarNavigation,
|
|
30
|
+
internalSidebarNavigationHandler,
|
|
31
|
+
isOpen,
|
|
32
|
+
onNavigate,
|
|
33
|
+
routerDisabled = false,
|
|
34
|
+
}: Props) => {
|
|
22
35
|
const refs = [];
|
|
23
|
-
const tablist = React.Children.map(children, child => child &&
|
|
24
|
-
|
|
25
|
-
|
|
36
|
+
const tablist = React.Children.map(children, child => child && child.props.sidebarView);
|
|
37
|
+
|
|
38
|
+
const handleKeyDownWithRouter = (event: SyntheticKeyboardEvent<>): void => {
|
|
39
|
+
if (!history) return;
|
|
40
|
+
|
|
41
|
+
const currentPath = history.location.pathname.replace('/', '');
|
|
42
|
+
const currentIndex = tablist.indexOf(currentPath);
|
|
26
43
|
const { length } = tablist;
|
|
27
44
|
let nextIndex = currentIndex;
|
|
45
|
+
|
|
28
46
|
switch (event.key) {
|
|
29
47
|
case KEYS.arrowUp:
|
|
30
48
|
nextIndex = (currentIndex - 1 + length) % length;
|
|
31
|
-
|
|
32
|
-
history.push(tablist[nextIndex]);
|
|
33
|
-
if (refs.length > 0) {
|
|
34
|
-
refs[nextIndex].focus();
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
event.stopPropagation();
|
|
38
|
-
event.preventDefault();
|
|
39
49
|
break;
|
|
40
50
|
case KEYS.arrowDown:
|
|
41
51
|
nextIndex = (currentIndex + 1) % length;
|
|
52
|
+
break;
|
|
53
|
+
default:
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
42
56
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
57
|
+
const nextTab = tablist[nextIndex];
|
|
58
|
+
history.push(`/${nextTab}`);
|
|
59
|
+
|
|
60
|
+
if (refs.length > nextIndex) {
|
|
61
|
+
refs[nextIndex].focus();
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
event.stopPropagation();
|
|
65
|
+
event.preventDefault();
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const handleKeyDownWithoutRouter = (event: SyntheticKeyboardEvent<>): void => {
|
|
69
|
+
if (!internalSidebarNavigationHandler) return;
|
|
47
70
|
|
|
48
|
-
|
|
49
|
-
|
|
71
|
+
const currentTab = internalSidebarNavigation?.sidebar;
|
|
72
|
+
const currentIndex = tablist.indexOf(currentTab);
|
|
73
|
+
const { length } = tablist;
|
|
74
|
+
let nextIndex = currentIndex;
|
|
75
|
+
|
|
76
|
+
switch (event.key) {
|
|
77
|
+
case KEYS.arrowUp:
|
|
78
|
+
nextIndex = (currentIndex - 1 + length) % length;
|
|
50
79
|
break;
|
|
51
|
-
|
|
80
|
+
case KEYS.arrowDown:
|
|
81
|
+
nextIndex = (currentIndex + 1) % length;
|
|
52
82
|
break;
|
|
83
|
+
default:
|
|
84
|
+
return;
|
|
53
85
|
}
|
|
86
|
+
|
|
87
|
+
const nextTab = tablist[nextIndex];
|
|
88
|
+
internalSidebarNavigationHandler({
|
|
89
|
+
sidebar: nextTab,
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
if (refs.length > nextIndex) {
|
|
93
|
+
refs[nextIndex].focus();
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
event.stopPropagation();
|
|
97
|
+
event.preventDefault();
|
|
54
98
|
};
|
|
55
99
|
|
|
100
|
+
const handleKeyDown = routerDisabled ? handleKeyDownWithoutRouter : handleKeyDownWithRouter;
|
|
101
|
+
|
|
56
102
|
return (
|
|
57
103
|
<div
|
|
58
104
|
aria-orientation="vertical"
|
|
@@ -68,8 +114,11 @@ const SidebarNavTablist = ({ children, history, elementId, isOpen, onNavigate }:
|
|
|
68
114
|
|
|
69
115
|
return React.cloneElement(tab, {
|
|
70
116
|
elementId,
|
|
117
|
+
internalSidebarNavigation,
|
|
118
|
+
internalSidebarNavigationHandler,
|
|
71
119
|
isOpen,
|
|
72
120
|
onNavigate,
|
|
121
|
+
routerDisabled,
|
|
73
122
|
ref: ref => {
|
|
74
123
|
refs.push(ref);
|
|
75
124
|
},
|
|
@@ -80,4 +129,14 @@ const SidebarNavTablist = ({ children, history, elementId, isOpen, onNavigate }:
|
|
|
80
129
|
);
|
|
81
130
|
};
|
|
82
131
|
|
|
83
|
-
|
|
132
|
+
// Conditionally wrap with withRouter only when router is not disabled
|
|
133
|
+
const SidebarNavTablistWithRouter = withRouter(SidebarNavTablist);
|
|
134
|
+
|
|
135
|
+
const SidebarNavTablistWrapper = (props: Props) => {
|
|
136
|
+
if (props.routerDisabled) {
|
|
137
|
+
return <SidebarNavTablist {...props} />;
|
|
138
|
+
}
|
|
139
|
+
return <SidebarNavTablistWithRouter {...props} />;
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
export default SidebarNavTablistWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarNavTablist.js","names":["React","withRouter","KEYS","SidebarNavTablist","children","history","elementId","isOpen","onNavigate","refs","tablist","Children","map","child","props","sidebarView","
|
|
1
|
+
{"version":3,"file":"SidebarNavTablist.js","names":["React","withRouter","KEYS","SidebarNavTablist","children","history","elementId","internalSidebarNavigation","internalSidebarNavigationHandler","isOpen","onNavigate","routerDisabled","refs","tablist","Children","map","child","props","sidebarView","handleKeyDownWithRouter","event","currentPath","location","pathname","replace","currentIndex","indexOf","length","nextIndex","key","arrowUp","arrowDown","nextTab","push","focus","stopPropagation","preventDefault","handleKeyDownWithoutRouter","currentTab","sidebar","handleKeyDown","createElement","className","role","tabIndex","onKeyDown","tab","cloneElement","_objectSpread","ref","SidebarNavTablistWithRouter","SidebarNavTablistWrapper"],"sources":["../../../src/elements/content-sidebar/SidebarNavTablist.js"],"sourcesContent":["/**\n * @flow\n * @file Content Sidebar nav tablist Component\n * @author Box\n */\n\nimport * as React from 'react';\nimport type { RouterHistory } from 'react-router-dom';\nimport { withRouter } from 'react-router-dom';\nimport { KEYS } from '../../constants';\nimport type { NavigateOptions } from './flowTypes';\nimport type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';\n\ntype Props = {\n children: React.Node,\n elementId: string,\n history?: RouterHistory,\n internalSidebarNavigation?: InternalSidebarNavigation,\n internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,\n isOpen?: boolean,\n onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,\n routerDisabled?: boolean,\n};\n\nconst SidebarNavTablist = ({\n children,\n history,\n elementId,\n internalSidebarNavigation,\n internalSidebarNavigationHandler,\n isOpen,\n onNavigate,\n routerDisabled = false,\n}: Props) => {\n const refs = [];\n const tablist = React.Children.map(children, child => child && child.props.sidebarView);\n\n const handleKeyDownWithRouter = (event: SyntheticKeyboardEvent<>): void => {\n if (!history) return;\n\n const currentPath = history.location.pathname.replace('/', '');\n const currentIndex = tablist.indexOf(currentPath);\n const { length } = tablist;\n let nextIndex = currentIndex;\n\n switch (event.key) {\n case KEYS.arrowUp:\n nextIndex = (currentIndex - 1 + length) % length;\n break;\n case KEYS.arrowDown:\n nextIndex = (currentIndex + 1) % length;\n break;\n default:\n return;\n }\n\n const nextTab = tablist[nextIndex];\n history.push(`/${nextTab}`);\n\n if (refs.length > nextIndex) {\n refs[nextIndex].focus();\n }\n\n event.stopPropagation();\n event.preventDefault();\n };\n\n const handleKeyDownWithoutRouter = (event: SyntheticKeyboardEvent<>): void => {\n if (!internalSidebarNavigationHandler) return;\n\n const currentTab = internalSidebarNavigation?.sidebar;\n const currentIndex = tablist.indexOf(currentTab);\n const { length } = tablist;\n let nextIndex = currentIndex;\n\n switch (event.key) {\n case KEYS.arrowUp:\n nextIndex = (currentIndex - 1 + length) % length;\n break;\n case KEYS.arrowDown:\n nextIndex = (currentIndex + 1) % length;\n break;\n default:\n return;\n }\n\n const nextTab = tablist[nextIndex];\n internalSidebarNavigationHandler({\n sidebar: nextTab,\n });\n\n if (refs.length > nextIndex) {\n refs[nextIndex].focus();\n }\n\n event.stopPropagation();\n event.preventDefault();\n };\n\n const handleKeyDown = routerDisabled ? handleKeyDownWithoutRouter : handleKeyDownWithRouter;\n\n return (\n <div\n aria-orientation=\"vertical\"\n className=\"bcs-SidebarNav-main\"\n role=\"tablist\"\n tabIndex=\"0\"\n onKeyDown={handleKeyDown}\n >\n {React.Children.map(children, tab => {\n if (!tab) {\n return null;\n }\n\n return React.cloneElement(tab, {\n elementId,\n internalSidebarNavigation,\n internalSidebarNavigationHandler,\n isOpen,\n onNavigate,\n routerDisabled,\n ref: ref => {\n refs.push(ref);\n },\n ...tab.props,\n });\n })}\n </div>\n );\n};\n\n// Conditionally wrap with withRouter only when router is not disabled\nconst SidebarNavTablistWithRouter = withRouter(SidebarNavTablist);\n\nconst SidebarNavTablistWrapper = (props: Props) => {\n if (props.routerDisabled) {\n return <SidebarNavTablist {...props} />;\n }\n return <SidebarNavTablistWithRouter {...props} />;\n};\n\nexport default SidebarNavTablistWrapper;\n"],"mappings":"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","ignoreList":[]}
|