feat(content-sidebar): implement for custom sidebar panels #4326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

mergify merged 23 commits into master from custom-sidebar-panels

Feb 6, 2026

src/elements/common/types/SidebarNavigation.js.flow

-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ export type SidebarNavigation = { @@
         activeFeedEntryId?: string,
         fileVersionId?: string,
         filteredTemplateIds?: string,
-        sidebar: ViewTypeValues,
+        sidebar: ViewTypeValues | string,
         versionId?: string,
     };
@@ Expand Down @@

src/elements/content-sidebar/ContentSidebar.js

-Original file line number
+Diff line change
@@ Expand Up @@
     import type { ElementsXhrError, RequestOptions, ErrorContextProps } from '../../common/types/api';
     import type { MetadataEditor } from '../../common/types/metadata';
     import type { StringMap, Token, User, BoxItem } from '../../common/types/core';
-    import type { AdditionalSidebarTab } from './flowTypes';
+    import type { AdditionalSidebarTab, CustomSidebarPanel } from './flowTypes';
     import type { FeatureConfig } from '../common/feature-checking';
     // $FlowFixMe TypeScript file
     import type { Theme } from '../common/theming';
@@ Expand All / @@ -66,6 +66,7 @@ type Props = { @@
         className: string,
         clientName: string,
         currentUser?: User,
+        customSidebarPanels?: Array<CustomSidebarPanel>,
         defaultView: string,
         detailsSidebarProps: DetailsSidebarProps,
         docGenSidebarProps?: DocGenSidebarProps,
@@ Expand Down Expand Up @@
                 boxAISidebarProps,
                 className,
                 currentUser,
+                customSidebarPanels,
                 defaultView,
                 shouldFetchSidebarData,
                 detailsSidebarProps,
@@ Expand Down Expand Up @@
                                     className={className}
                                     currentUser={currentUser}
                                     shouldFetchSidebarData={shouldFetchSidebarData}
+                                    customSidebarPanels={customSidebarPanels}
                                     detailsSidebarProps={detailsSidebarProps}
                                     docGenSidebarProps={docGenSidebarProps}
                                     file={displayFile}
@@ Expand Down @@

src/elements/content-sidebar/Sidebar.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -28,14 +28,14 @@ import type { DocGenSidebarProps } from './DocGenSidebar/DocGenSidebar';
  
    import type { MetadataSidebarProps } from './MetadataSidebar';

    import type { BoxAISidebarProps } from './BoxAISidebar';

    import type { VersionsSidebarProps } from './versions';

    import type { AdditionalSidebarTab } from './flowTypes';

    import type { AdditionalSidebarTab, CustomSidebarPanel } 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';

    // $FlowFixMe TypeScript file

    import type { Theme } from '../common/theming';

    import { SIDEBAR_VIEW_DOCGEN } from '../../constants';

    import { SIDEBAR_VIEW_DOCGEN, SIDEBAR_VIEW_BOXAI } from '../../constants';

    import API from '../../api';

    type Props = {

    @@ -46,6 +46,7 @@ type Props = {
  
        className: string,

        currentUser?: User,

        currentUserError?: Errors,

        customSidebarPanels?: Array<CustomSidebarPanel>,

        detailsSidebarProps: DetailsSidebarProps,

        docGenSidebarProps: DocGenSidebarProps,

        features: FeatureConfig,

    @@ -300,6 +301,7 @@ class Sidebar extends React.Component<Props, State> {
  
                currentUser,

                currentUserError,

                shouldFetchSidebarData,

                customSidebarPanels = [],

                detailsSidebarProps,

                docGenSidebarProps,

                file,

    @@ -319,15 +321,19 @@ class Sidebar extends React.Component<Props, State> {
  
                versionsSidebarProps,

            }: Props = this.props;

            const isOpen = this.isOpen();

            const hasBoxAI = SidebarUtils.canHaveBoxAISidebar(this.props);

            const hasCustomBoxAISidebar = customSidebarPanels.some(panel => panel.id === SIDEBAR_VIEW_BOXAI);

            const isBoxAIEnabled = SidebarUtils.canHaveBoxAISidebar(this.props);

            // Custom Box AI takes precedence over native when both exist

            const hasNativeBoxAISidebar = isBoxAIEnabled && !hasCustomBoxAISidebar;

            const hasActivity = SidebarUtils.canHaveActivitySidebar(this.props);

            const hasDetails = SidebarUtils.canHaveDetailsSidebar(this.props);

            const hasMetadata = SidebarUtils.shouldRenderMetadataSidebar(this.props, metadataEditors);

            const hasSkills = SidebarUtils.shouldRenderSkillsSidebar(this.props, file);

            const onVersionHistoryClick = hasVersions ? this.handleVersionHistoryClick : this.props.onVersionHistoryClick;

            const styleClassName = classNames('be bcs', className, {

                'bcs-is-open': isOpen,

                'bcs-is-wider': hasBoxAI,

                'bcs-is-wider': hasNativeBoxAISidebar || hasCustomBoxAISidebar,

            });

            const defaultPanel = this.getDefaultPanel();

    @@ -343,11 +349,12 @@ class Sidebar extends React.Component<Props, State> {
  
                            {hasNav && (

                                <SidebarNav

                                    additionalTabs={additionalTabs}

                                    customSidebarPanels={customSidebarPanels}

                                    elementId={this.id}

                                    fileId={fileId}

                                    hasActivity={hasActivity}

                                    hasAdditionalTabs={hasAdditionalTabs}

                                    hasBoxAI={hasBoxAI}

                                    hasNativeBoxAISidebar={hasNativeBoxAISidebar}

                                    hasDetails={hasDetails}

                                    hasMetadata={hasMetadata}

                                    hasSkills={hasSkills}

    @@ -363,6 +370,7 @@ class Sidebar extends React.Component<Props, State> {
  
                                currentUser={currentUser}

                                currentUserError={currentUserError}

                                shouldFetchSidebarData={shouldFetchSidebarData}

                                customSidebarPanels={customSidebarPanels}

                                elementId={this.id}

                                defaultPanel={defaultPanel}

                                detailsSidebarProps={detailsSidebarProps}

    @@ -372,7 +380,7 @@ class Sidebar extends React.Component<Props, State> {
  
                                getPreview={getPreview}

                                getViewer={getViewer}

                                hasActivity={hasActivity}

                                hasBoxAI={hasBoxAI}

                                hasNativeBoxAISidebar={hasNativeBoxAISidebar}

                                hasDetails={hasDetails}

                                hasDocGen={docGenSidebarProps.isDocGenTemplate}

                                hasMetadata={hasMetadata}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(content-sidebar): implement for custom sidebar panels #4326

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!