Make reusable WebviewWrapper component (#1775)

* Make plots wrapper element have 100% width and height

* Make WebviewWrapper component that provides theme variables

* Allow setting className on WebviewWrapper

Author: rogermparent

webview/src/experiments/components/Experiments.tsx

@@ -23,7 +23,7 @@ import styles from './table/styles.module.scss'
 import { AddColumns, Welcome } from './GetStarted'
 import buildDynamicColumns from '../util/buildDynamicColumns'
 import { sendMessage } from '../../shared/vscode'
-import { useThemeVariables } from '../../shared/components/theme/Theme'
+import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
 import { GetStarted } from '../../shared/components/getStarted/GetStarted'
 import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
@@ -224,21 +224,14 @@ export const ExperimentsTable: React.FC<{
 const Experiments: React.FC<{
   tableData?: TableData | null
 }> = ({ tableData }) => {
-  const variables = useThemeVariables()
   return (
-    <div
-      className={styles.experiments}
-      style={variables}
-      onContextMenu={e => {
-        e.preventDefault()
-      }}
-    >
+    <WebviewWrapper className={styles.experiments}>
       {tableData ? (
         <ExperimentsTable tableData={tableData} />
       ) : (
         <EmptyState>Loading Experiments...</EmptyState>
       )}
-    </div>
+    </WebviewWrapper>
   )
 }
 

webview/src/plots/components/Plots.tsx

@@ -12,7 +12,7 @@ import { ComparisonTableWrapper } from './comparisonTable/ComparisonTableWrapper
 import { PlotsWebviewState } from '../hooks/useAppReducer'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { Modal } from '../../shared/components/modal/Modal'
-import { useThemeVariables } from '../../shared/components/theme/Theme'
+import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
 import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
 import { sendMessage } from '../../shared/vscode'
 import { getThemeValue, ThemeProperty } from '../../util/styles'
@@ -170,18 +170,8 @@ const PlotsContent = ({ state }: PlotsProps) => {
   )
 }
 
-export const Plots = ({ state }: PlotsProps) => {
-  const variables = useThemeVariables()
-
-  return (
-    <div
-      className={styles.plots}
-      style={variables}
-      onContextMenu={e => {
-        e.preventDefault()
-      }}
-    >
-      <PlotsContent state={state} />
-    </div>
-  )
-}
+export const Plots = ({ state }: PlotsProps) => (
+  <WebviewWrapper>
+    <PlotsContent state={state} />
+  </WebviewWrapper>
+)

webview/src/shared/components/theme/Theme.test.tsx renamed to webview/src/shared/components/webviewWrapper/WebviewWrapper.test.tsx

@@ -3,17 +3,17 @@
  */
 import React from 'react'
 import { render, cleanup, screen } from '@testing-library/react'
-import { Theme } from './Theme'
+import { WebviewWrapper } from './WebviewWrapper'
 
-describe('Theme', () => {
+describe('Wrapper', () => {
   afterEach(() => {
     cleanup()
   })
 
   it('should add some css variables to the markup', () => {
-    render(<Theme />)
+    render(<WebviewWrapper>Test</WebviewWrapper>)
 
-    const theme = screen.getByTestId('theme-wrapper')
+    const theme = screen.getByText('Test')
     const expectedVariables = [
       '--editor-background-transparency-1',
       '--editor-background-transparency-2',

webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react'
+import cx from 'classnames'
+import { useThemeVariables } from './useThemeVariables'
+import styles from './styles.module.scss'
+
+export const WebviewWrapper = ({
+  children,
+  className
+}: {
+  children: ReactNode
+  className?: string
+}) => {
+  const themeVariables = useThemeVariables()
+
+  return (
+    <div
+      className={cx(styles.webviewWrapper, className)}
+      style={themeVariables}
+      onContextMenu={e => {
+        e.preventDefault()
+      }}
+    >
+      {children}
+    </div>
+  )
+}

webview/src/shared/components/webviewWrapper/styles.module.scss

@@ -0,0 +1,4 @@
+.webviewWrapper {
+  width: 100%;
+  height: 100%;
+}

webview/src/shared/components/theme/Theme.tsx renamed to webview/src/shared/components/webviewWrapper/useThemeVariables.ts

@@ -1,19 +1,8 @@
-import React, {
-  DetailedHTMLProps,
-  HTMLAttributes,
-  useState,
-  useLayoutEffect,
-  useCallback
-} from 'react'
+import { useState, useLayoutEffect, useCallback } from 'react'
 import { alphaToHex, getThemeValue, ThemeProperty } from '../../../util/styles'
 
-type CSSVariables = DetailedHTMLProps<
-  HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
->
-
 export const useThemeVariables = () => {
-  const [variables, setVariables] = useState<CSSVariables>({})
+  const [variables, setVariables] = useState<Record<string, string>>({})
 
   const createCSSVariables = useCallback(() => {
     const ColorsWithOpacity = {
@@ -57,12 +46,3 @@ export const useThemeVariables = () => {
 
   return variables
 }
-
-export const Theme: React.FC = ({ children }) => {
-  const variables = useThemeVariables()
-  return (
-    <div style={variables} data-testid="theme-wrapper">
-      {children}
-    </div>
-  )
-}

webview/src/stories/ComparisonTable.stories.tsx

@@ -7,7 +7,7 @@ import {
   ComparisonTable,
   ComparisonTableProps
 } from '../plots/components/comparisonTable/ComparisonTable'
-import { Theme } from '../shared/components/theme/Theme'
+import { WebviewWrapper } from '../shared/components/webviewWrapper/WebviewWrapper'
 import { DragDropProvider } from '../shared/components/dragDrop/DragDropContext'
 
 export default {
@@ -18,11 +18,11 @@ export default {
 
 const Template: Story<ComparisonTableProps> = ({ plots, revisions }) => {
   return (
-    <Theme>
+    <WebviewWrapper>
       <DragDropProvider>
         <ComparisonTable plots={plots} revisions={revisions} />
       </DragDropProvider>
-    </Theme>
+    </WebviewWrapper>
   )
 }
 

webview/src/stories/ComparisonTableHeader.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
 import { ComparisonTableHeader } from '../plots/components/comparisonTable/ComparisonTableHeader'
-import { Theme } from '../shared/components/theme/Theme'
+import { WebviewWrapper } from '../shared/components/webviewWrapper/WebviewWrapper'
 
 const basicArgs = {
   displayColor: '#945DD6',
@@ -24,15 +24,15 @@ const Template: Story<{
   index: number
   isPinned: boolean
 }> = ({ name, displayColor, onClicked, isPinned }) => (
-  <Theme>
+  <WebviewWrapper>
     <ComparisonTableHeader
       displayColor={displayColor}
       onClicked={onClicked}
       isPinned={isPinned}
     >
       {name}
     </ComparisonTableHeader>
-  </Theme>
+  </WebviewWrapper>
 )
 
 export const Basic = Template.bind({})

webview/src/stories/ContextMenu.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import '../shared/style.scss'
 import './test-vscode-styles.scss'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
-import { Theme } from '../shared/components/theme/Theme'
+import { WebviewWrapper } from '../shared/components/webviewWrapper/WebviewWrapper'
 import {
   ContextMenu,
   ContextMenuProps
@@ -19,7 +19,7 @@ export default {
 
 const Template: Story<ContextMenuProps> = () => {
   return (
-    <Theme>
+    <WebviewWrapper>
       <ContextMenu
         content={
           <MessagesMenu
@@ -40,7 +40,7 @@ const Template: Story<ContextMenuProps> = () => {
           <Icon width={15} icon={AllIcons.LINES} />
         </div>
       </ContextMenu>
-    </Theme>
+    </WebviewWrapper>
   )
 }
 

webview/src/stories/IconMenu.stories.tsx

@@ -7,7 +7,7 @@ import { SelectMenu } from '../shared/components/selectMenu/SelectMenu'
 import { IconMenu } from '../shared/components/iconMenu/IconMenu'
 import { IconMenuItemProps } from '../shared/components/iconMenu/IconMenuItem'
 import { AllIcons } from '../shared/components/Icon'
-import { Theme } from '../shared/components/theme/Theme'
+import { WebviewWrapper } from '../shared/components/webviewWrapper/WebviewWrapper'
 
 const items: IconMenuItemProps[] = [
   {
@@ -90,9 +90,9 @@ export default {
 const Template: Story<{
   items: IconMenuItemProps[]
 }> = ({ items }) => (
-  <Theme>
+  <WebviewWrapper>
     <IconMenu items={items} />
-  </Theme>
+  </WebviewWrapper>
 )
 
 export const MenuWithIcons = Template.bind({})