fix(docgen-sidebar): modernized blueprint dropdown (DOCGEN-7872) (#4392)

* fix(docgen-sidebar): modernized blueprint dropdown (DOCGEN-7872)

* fix(docgen-sidebar): fix file extension (DOCGEN-7872)

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: pyaromchyk-stack

src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss

@@ -35,6 +35,10 @@
     overflow: 'auto' 'auto';
 }
 
+.bcs-DocGen-tagPath {
+    padding-left: var(--space-1);
+}
+
 .bcs-DocGen-accordion * {
     width: auto;
     padding: 0;
@@ -47,9 +51,13 @@
 }
 
 .bcs-DocGen-collapsible {
-    padding-top: var(--space-3);
-    padding-right: var(--space-6);
+    min-width: 0;
     border: none;
+    width: 100%;
+
+    * {
+        text-transform: unset;
+    }
 }
 
 .bcs-DocGenSidebar-loading {

src/elements/content-sidebar/DocGenSidebar/TagTree.tsx

@@ -25,7 +25,6 @@ const TagTree = ({ data, level = 0 }: TagTreeProps) => {
                             <Accordion.Item
                                 value={key}
                                 key={`${key}-${level}`}
-                                style={{ paddingLeft: `${level * 12}px` }}
                                 fixed
                                 className="bcs-DocGen-collapsible"
                             >
@@ -40,7 +39,6 @@ const TagTree = ({ data, level = 0 }: TagTreeProps) => {
                             value={key}
                             title={key}
                             key={`${key}-${level}`}
-                            style={{ paddingLeft: `${level * 12}px` }}
                             className="bcs-DocGen-collapsible"
                         >
                             {data[key] && <TagTree data={data[key]} level={level + 1} />}

src/elements/content-sidebar/DocGenSidebar/stories/DocGenSidebar.stories.tsx

@@ -0,0 +1,66 @@
+import noop from 'lodash/noop';
+import { http, HttpResponse } from 'msw';
+import type { HttpHandler } from 'msw';
+import type { Meta } from '@storybook/react';
+import ContentSidebar from '../../ContentSidebar';
+import { mockFileRequest } from '../../stories/__mocks__/ContentSidebarMocks';
+import mockDocGenTags from '../../__mocks__/DocGenSidebar.mock';
+
+const defaultArgs = {
+    detailsSidebarProps: {
+        hasProperties: true,
+        hasNotices: true,
+        hasAccessStats: true,
+        hasClassification: true,
+        hasRetentionPolicy: true,
+    },
+    features: global.FEATURE_FLAGS,
+    fileId: global.FILE_ID,
+    hasActivityFeed: true,
+    hasMetadata: true,
+    hasSkills: true,
+    hasVersions: true,
+    token: global.TOKEN,
+};
+
+const docGenSidebarProps = {
+    enabled: true,
+    isDocGenTemplate: true,
+    checkDocGenTemplate: noop,
+    getDocGenTags: async () => ({
+        pagination: {},
+        data: mockDocGenTags,
+    }),
+};
+
+export const basic = {
+    args: {
+        defaultView: 'docgen',
+        docGenSidebarProps,
+    },
+};
+
+export const withModernizedBlueprint = {
+    args: {
+        enableModernizedComponents: true,
+        defaultView: 'docgen',
+        docGenSidebarProps,
+    },
+};
+
+const meta: Meta<typeof ContentSidebar> & { parameters: { msw: { handlers: HttpHandler[] } } } = {
+    title: 'Elements/ContentSidebar/DocGenSidebar',
+    component: ContentSidebar,
+    args: defaultArgs,
+    parameters: {
+        msw: {
+            handlers: [
+                http.get(mockFileRequest.url, () => {
+                    return HttpResponse.json(mockFileRequest.response);
+                }),
+            ],
+        },
+    },
+};
+
+export default meta;