refactor: SampleSection component to conditionally render based on ro…

…ute (#2000) SampleSection component is now responsible for rendering / not rendering based on route. Contrast to before where we rendered everything and then hid via css. Seems to cut time to run styleguide tests by more than half locally. <img width="455" alt="image" src="https://github.com/deephaven/web-client-ui/assets/1900643/b8b5826a-ae99-413e-8dfe-c3c93dd54c6a">
deephaven · May 23, 2024 · 236a10e · 236a10e
1 parent 34d6472
commit 236a10e
Show file tree

Hide file tree

Showing 31 changed files with 231 additions and 194 deletions.
diff --git a/packages/code-studio/src/styleguide/Buttons.tsx b/packages/code-studio/src/styleguide/Buttons.tsx
@@ -1,9 +1,8 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React, { Component, ReactElement } from 'react';
 import { Button, SocketedButton, Flex } from '@deephaven/components';
 
 import { dhTruck } from '@deephaven/icons';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 function noOp(): void {
   return undefined;
@@ -17,10 +16,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     return (
       <>
         <h5>Button Kinds</h5>
-        <div
-          {...sampleSectionIdAndClasses('buttons-regular')}
-          style={{ padding: '1rem 0' }}
-        >
+        <SampleSection name="buttons-regular" style={{ padding: '1rem 0' }}>
           <Flex gap="size-100">
             <Button kind="primary" onClick={noOp}>
               Primary
@@ -44,7 +40,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
               Ghost
             </Button>
           </Flex>
-        </div>
+        </SampleSection>
       </>
     );
   }
@@ -60,10 +56,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     };
 
     return (
-      <div
-        {...sampleSectionIdAndClasses('links')}
-        style={{ paddingTop: '1rem' }}
-      >
+      <SampleSection name="links" style={{ paddingTop: '1rem' }}>
         <h5>Links</h5>
         <Flex gap="1rem">
           {Object.entries(levelMap).map(([level, semantic]) => (
@@ -73,13 +66,13 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
             </a>
           ))}
         </Flex>
-      </div>
+      </SampleSection>
     );
   }
 
   static renderSocketedButtons(): ReactElement {
     return (
-      <div {...sampleSectionIdAndClasses('buttons-socketed')}>
+      <SampleSection name="buttons-socketed">
         <h5>Socketed Buttons (for linker)</h5>
         <SocketedButton
           style={{ marginBottom: '1rem', marginRight: '1rem' }}
@@ -116,7 +109,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
         >
           Disabled
         </SocketedButton>
-      </div>
+      </SampleSection>
     );
   }
 
@@ -132,10 +125,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
     const { toggle } = this.state;
 
     return (
-      <div
-        {...sampleSectionIdAndClasses('buttons-inline')}
-        style={{ padding: '1rem 0' }}
-      >
+      <SampleSection name="buttons-inline" style={{ padding: '1rem 0' }}>
         <h5>Inline Buttons</h5>
         Regular btn-inline:
         <Button
@@ -176,7 +166,7 @@ class Buttons extends Component<Record<string, never>, ButtonsState> {
         <Button kind="ghost" icon={dhTruck} onClick={noOp}>
           Text Button
         </Button>
-      </div>
+      </SampleSection>
     );
   }
 

diff --git a/packages/code-studio/src/styleguide/Charts.tsx b/packages/code-studio/src/styleguide/Charts.tsx
@@ -1,11 +1,8 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React, { ReactElement, useState } from 'react';
 import { Chart, ChartModel, MockChartModel } from '@deephaven/chart';
 import { useApi } from '@deephaven/jsapi-bootstrap';
-import {
-  sampleSectionIdAndClasses,
-  useSeededRandomNumberCallback,
-} from './utils';
+import { useSeededRandomNumberCallback } from './utils';
+import SampleSection from './SampleSection';
 
 function Charts(): ReactElement {
   const dh = useApi();
@@ -15,12 +12,12 @@ function Charts(): ReactElement {
   const [model] = useState(() => new MockChartModel(dh));
 
   return (
-    <div {...sampleSectionIdAndClasses('charts')}>
+    <SampleSection name="charts">
       <h2 className="ui-title">Chart</h2>
       <div style={{ height: 500 }}>
         <Chart model={model as ChartModel} />
       </div>
-    </div>
+    </SampleSection>
   );
 }
 

diff --git a/packages/code-studio/src/styleguide/Colors.tsx b/packages/code-studio/src/styleguide/Colors.tsx
@@ -1,8 +1,7 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import classNames from 'classnames';
-import { sampleSectionIdAndClasses } from './utils';
 import { Swatch } from './Swatch';
+import SampleSection from './SampleSection';
 
 function Colors(): React.ReactElement {
   const graySwatches = [
@@ -61,7 +60,7 @@ function Colors(): React.ReactElement {
   ));
 
   return (
-    <div {...sampleSectionIdAndClasses('colors')}>
+    <SampleSection name="colors">
       <h2 className="ui-title">Colors</h2>
       <div className="row">
         <div className="col">
@@ -79,7 +78,7 @@ function Colors(): React.ReactElement {
           </p>
         </div>
       </div>
-    </div>
+    </SampleSection>
   );
 }
 

diff --git a/packages/code-studio/src/styleguide/ContextMenus.tsx b/packages/code-studio/src/styleguide/ContextMenus.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint no-alert: "off" */
 /* eslint no-console: "off" */
 import React, { Component } from 'react';
@@ -16,7 +15,7 @@ import {
   vsQuestion,
   IconDefinition,
 } from '@deephaven/icons';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 interface ContextMenuItem {
   title: string;
@@ -108,7 +107,7 @@ class ContextMenus extends Component {
       });
 
     return (
-      <div {...sampleSectionIdAndClasses('context-menus')}>
+      <SampleSection name="context-menus">
         <h2 className="ui-title">Context Menu</h2>
         <Button
           kind="primary"
@@ -134,7 +133,7 @@ class ContextMenus extends Component {
           Right Click Me
           <ContextActions actions={delayedActions} />
         </Button>
-      </div>
+      </SampleSection>
     );
   }
 }

diff --git a/packages/code-studio/src/styleguide/Dialog.tsx b/packages/code-studio/src/styleguide/Dialog.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint no-alert: "off" */
 /* eslint no-console: "off" */
 import React, { Component } from 'react';
@@ -8,7 +7,7 @@ import {
   HierarchicalCheckboxValueMap,
   Button,
 } from '@deephaven/components';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 interface DialogState {
   isShown: boolean;
@@ -89,7 +88,7 @@ class Dialog extends Component<unknown, DialogState> {
     const { isShown, checkBoxMap } = this.state;
 
     return (
-      <div {...sampleSectionIdAndClasses('dialog')}>
+      <SampleSection name="dialog">
         <h2 className="ui-title">Popover Dialog</h2>
         <p>
           Popover dialog that can contain interactive elements, can be set to
@@ -136,7 +135,7 @@ class Dialog extends Component<unknown, DialogState> {
           valueMap={checkBoxMap}
           onUpdateValueMap={this.handleUpdateCheckboxMap}
         />
-      </div>
+      </SampleSection>
     );
   }
 }

diff --git a/packages/code-studio/src/styleguide/DraggableLists.tsx b/packages/code-studio/src/styleguide/DraggableLists.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint no-console: "off" */
 import React, { Component } from 'react';
 import {
@@ -10,7 +9,7 @@ import {
 import memoize from 'memoizee';
 import { DragUtils, DraggableItemList, Range } from '@deephaven/components';
 import DraggableListInput from './DraggableListInput';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 const DRAG_LIST_TITLES = ['Draggable Only', 'Drag and Drop', 'Droppable Only'];
 const DRAG_LIST_PROPS = [
@@ -190,11 +189,7 @@ class DraggableLists extends Component<
   render(): React.ReactElement {
     const { items, lists, selectedRanges } = this.state;
     return (
-      <div
-        {...sampleSectionIdAndClasses('draggable-lists', [
-          'style-guide-inputs',
-        ])}
-      >
+      <SampleSection name="draggable-lists" className="style-guide-inputs">
         <h2 className="ui-title">Drag and Drop Lists</h2>
         <div className="row">
           <DragDropContext
@@ -219,7 +214,7 @@ class DraggableLists extends Component<
             ))}
           </DragDropContext>
         </div>
-      </div>
+      </SampleSection>
     );
   }
 }

diff --git a/packages/code-studio/src/styleguide/DropdownMenus.tsx b/packages/code-studio/src/styleguide/DropdownMenus.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint no-alert: "off" */
 /* eslint no-console: "off" */
 import React, { Component } from 'react';
@@ -18,7 +17,7 @@ import {
   vsKebabVertical,
   vsQuestion,
 } from '@deephaven/icons';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 interface DropdownMenus {
   button: React.RefObject<HTMLDivElement>;
@@ -92,7 +91,7 @@ class DropdownMenus extends Component<
     const { isShown } = this.state;
 
     return (
-      <div {...sampleSectionIdAndClasses('dropdown-menus')}>
+      <SampleSection name="dropdown-menus">
         <h2 className="ui-title">Dropdown Menu</h2>
         <p>
           A simple dropdown menu of actions, can open on click of parent
@@ -136,7 +135,7 @@ class DropdownMenus extends Component<
             actions={actions}
           />
         </div>
-      </div>
+      </SampleSection>
     );
   }
 }

diff --git a/packages/code-studio/src/styleguide/Editors.tsx b/packages/code-studio/src/styleguide/Editors.tsx
@@ -1,12 +1,11 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import { Editor } from '@deephaven/console';
 import Constants from './StyleConstants';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 function Editors(): React.ReactElement {
   return (
-    <div {...sampleSectionIdAndClasses('editors')}>
+    <SampleSection name="editors">
       <h2 className="ui-title">Editor</h2>
       <h5 className="sub-title">Python</h5>
       <div style={{ height: 400, position: 'relative' }}>
@@ -20,7 +19,7 @@ function Editors(): React.ReactElement {
           settings={{ language: 'groovy', value: Constants.testGroovy }}
         />
       </div>
-    </div>
+    </SampleSection>
   );
 }
 

diff --git a/packages/code-studio/src/styleguide/ErrorViews.tsx b/packages/code-studio/src/styleguide/ErrorViews.tsx
@@ -1,8 +1,7 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* eslint no-alert: "off" */
 import React, { CSSProperties } from 'react';
 import { ErrorView } from '@deephaven/components';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 function ErrorViews(): React.ReactElement {
   const columnStyle: CSSProperties = {
@@ -20,7 +19,7 @@ function ErrorViews(): React.ReactElement {
   const longErrorType = 'SuperLongErrorMessageType';
 
   return (
-    <div {...sampleSectionIdAndClasses('error-views')}>
+    <SampleSection name="error-views">
       <h2 className="ui-title" title="Display error messages easily">
         Error Views
       </h2>
@@ -52,7 +51,7 @@ function ErrorViews(): React.ReactElement {
           />
         </div>
       </div>
-    </div>
+    </SampleSection>
   );
 }
 

diff --git a/packages/code-studio/src/styleguide/GoldenLayout.tsx b/packages/code-studio/src/styleguide/GoldenLayout.tsx
@@ -1,7 +1,6 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import classnames from 'classnames';
-import { sampleSectionIdAndClasses } from './utils';
+import SampleSection from './SampleSection';
 
 const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
 
@@ -23,7 +22,7 @@ function Tab({
 
 export function GoldenLayout(): JSX.Element {
   return (
-    <div {...sampleSectionIdAndClasses('golden-layout')}>
+    <SampleSection name="golden-layout">
       <h2 className="ui-title">Golden Layout</h2>
       {[false, true].map(isMaximised => (
         <React.Fragment key={String(isMaximised)}>
@@ -50,7 +49,7 @@ export function GoldenLayout(): JSX.Element {
           </div>
         </React.Fragment>
       ))}
-    </div>
+    </SampleSection>
   );
 }