From ee59251a8192b87b1d46598a385fe6fc1c9ce9e7 Mon Sep 17 00:00:00 2001
From: rogermparent <rogermparent@gmail.com>
Date: Wed, 25 May 2022 18:46:49 -0400
Subject: [PATCH 1/3] Make plots wrapper element have 100% width and height

---
 webview/src/plots/components/Plots.tsx          | 1 +
 webview/src/plots/components/styles.module.scss | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/webview/src/plots/components/Plots.tsx b/webview/src/plots/components/Plots.tsx
index afcdcded50..307f8324f2 100644
--- a/webview/src/plots/components/Plots.tsx
+++ b/webview/src/plots/components/Plots.tsx
@@ -169,6 +169,7 @@ export const Plots = ({ state }: PlotsProps) => {
 
   return (
     <div
+      className={styles.plots}
       style={variables}
       onContextMenu={e => {
         e.preventDefault()
diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
index 6b53f9f477..e70621d0e9 100644
--- a/webview/src/plots/components/styles.module.scss
+++ b/webview/src/plots/components/styles.module.scss
@@ -3,6 +3,11 @@
 
 $gap: 20px;
 
+.plots {
+  width: 100%;
+  height: 100%;
+}
+
 .plotsContainer {
   width: 100%;
 

From 5ab9c6feafda0db5bfe81a55951f2aad740c12ce Mon Sep 17 00:00:00 2001
From: rogermparent <rogermparent@gmail.com>
Date: Wed, 25 May 2022 19:46:37 -0400
Subject: [PATCH 2/3] Make WebviewWrapper component that provides theme
 variables

---
 .../experiments/components/Experiments.tsx    | 13 +++-------
 webview/src/plots/components/Plots.tsx        | 22 +++++------------
 .../WebviewWrapper.test.tsx}                  |  8 +++----
 .../webviewWrapper/WebviewWrapper.tsx         | 19 +++++++++++++++
 .../webviewWrapper/styles.module.scss         |  4 ++++
 .../useThemeVariables.ts}                     | 24 ++-----------------
 .../src/stories/ComparisonTable.stories.tsx   |  6 ++---
 .../stories/ComparisonTableHeader.stories.tsx |  6 ++---
 webview/src/stories/ContextMenu.stories.tsx   |  6 ++---
 webview/src/stories/IconMenu.stories.tsx      |  6 ++---
 10 files changed, 50 insertions(+), 64 deletions(-)
 rename webview/src/shared/components/{theme/Theme.test.tsx => webviewWrapper/WebviewWrapper.test.tsx} (88%)
 create mode 100644 webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx
 create mode 100644 webview/src/shared/components/webviewWrapper/styles.module.scss
 rename webview/src/shared/components/{theme/Theme.tsx => webviewWrapper/useThemeVariables.ts} (73%)

diff --git a/webview/src/experiments/components/Experiments.tsx b/webview/src/experiments/components/Experiments.tsx
index 75fc991257..ef7fbe72b6 100644
--- a/webview/src/experiments/components/Experiments.tsx
+++ b/webview/src/experiments/components/Experiments.tsx
@@ -23,7 +23,7 @@ import { GetStarted } from './GetStarted'
 import styles from './table/styles.module.scss'
 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 { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { DragDropProvider } from '../../shared/components/dragDrop/DragDropContext'
 
@@ -219,21 +219,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>
       {tableData ? (
         <ExperimentsTable tableData={tableData} />
       ) : (
         <EmptyState>Loading Experiments...</EmptyState>
       )}
-    </div>
+    </WebviewWrapper>
   )
 }
 
diff --git a/webview/src/plots/components/Plots.tsx b/webview/src/plots/components/Plots.tsx
index 307f8324f2..462878c482 100644
--- a/webview/src/plots/components/Plots.tsx
+++ b/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'
@@ -164,18 +164,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>
+)
diff --git a/webview/src/shared/components/theme/Theme.test.tsx b/webview/src/shared/components/webviewWrapper/WebviewWrapper.test.tsx
similarity index 88%
rename from webview/src/shared/components/theme/Theme.test.tsx
rename to webview/src/shared/components/webviewWrapper/WebviewWrapper.test.tsx
index 0d279e17d5..e7a4b442a5 100644
--- a/webview/src/shared/components/theme/Theme.test.tsx
+++ b/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',
diff --git a/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx b/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx
new file mode 100644
index 0000000000..e63ef7d801
--- /dev/null
+++ b/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx
@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react'
+import { useThemeVariables } from './useThemeVariables'
+import styles from './styles.module.scss'
+
+export const WebviewWrapper = ({ children }: { children: ReactNode }) => {
+  const themeVariables = useThemeVariables()
+
+  return (
+    <div
+      className={styles.webviewWrapper}
+      style={themeVariables}
+      onContextMenu={e => {
+        e.preventDefault()
+      }}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/webview/src/shared/components/webviewWrapper/styles.module.scss b/webview/src/shared/components/webviewWrapper/styles.module.scss
new file mode 100644
index 0000000000..289632f4b7
--- /dev/null
+++ b/webview/src/shared/components/webviewWrapper/styles.module.scss
@@ -0,0 +1,4 @@
+.webviewWrapper {
+  width: 100%;
+  height: 100%;
+}
diff --git a/webview/src/shared/components/theme/Theme.tsx b/webview/src/shared/components/webviewWrapper/useThemeVariables.ts
similarity index 73%
rename from webview/src/shared/components/theme/Theme.tsx
rename to webview/src/shared/components/webviewWrapper/useThemeVariables.ts
index b918c47749..1e2b717b47 100644
--- a/webview/src/shared/components/theme/Theme.tsx
+++ b/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>
-  )
-}
diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx
index b3c0b1d78f..b4a63b75c7 100644
--- a/webview/src/stories/ComparisonTable.stories.tsx
+++ b/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>
   )
 }
 
diff --git a/webview/src/stories/ComparisonTableHeader.stories.tsx b/webview/src/stories/ComparisonTableHeader.stories.tsx
index 5f41e48c42..1d1a750c37 100644
--- a/webview/src/stories/ComparisonTableHeader.stories.tsx
+++ b/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,7 +24,7 @@ const Template: Story<{
   index: number
   isPinned: boolean
 }> = ({ name, displayColor, onClicked, isPinned }) => (
-  <Theme>
+  <WebviewWrapper>
     <ComparisonTableHeader
       displayColor={displayColor}
       onClicked={onClicked}
@@ -32,7 +32,7 @@ const Template: Story<{
     >
       {name}
     </ComparisonTableHeader>
-  </Theme>
+  </WebviewWrapper>
 )
 
 export const Basic = Template.bind({})
diff --git a/webview/src/stories/ContextMenu.stories.tsx b/webview/src/stories/ContextMenu.stories.tsx
index 76310a49c0..b2a1014c05 100644
--- a/webview/src/stories/ContextMenu.stories.tsx
+++ b/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>
   )
 }
 
diff --git a/webview/src/stories/IconMenu.stories.tsx b/webview/src/stories/IconMenu.stories.tsx
index 43275b5e0a..80d5d4d08e 100644
--- a/webview/src/stories/IconMenu.stories.tsx
+++ b/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({})

From eb5b07216de9007f7d922f69b9d81951ca842455 Mon Sep 17 00:00:00 2001
From: rogermparent <rogermparent@gmail.com>
Date: Wed, 25 May 2022 20:02:43 -0400
Subject: [PATCH 3/3] Allow setting className on WebviewWrapper

---
 webview/src/experiments/components/Experiments.tsx    |  2 +-
 .../components/webviewWrapper/WebviewWrapper.tsx      | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/webview/src/experiments/components/Experiments.tsx b/webview/src/experiments/components/Experiments.tsx
index ef7fbe72b6..3eae0d3d57 100644
--- a/webview/src/experiments/components/Experiments.tsx
+++ b/webview/src/experiments/components/Experiments.tsx
@@ -220,7 +220,7 @@ const Experiments: React.FC<{
   tableData?: TableData | null
 }> = ({ tableData }) => {
   return (
-    <WebviewWrapper>
+    <WebviewWrapper className={styles.experiments}>
       {tableData ? (
         <ExperimentsTable tableData={tableData} />
       ) : (
diff --git a/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx b/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx
index e63ef7d801..64197cf737 100644
--- a/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx
+++ b/webview/src/shared/components/webviewWrapper/WebviewWrapper.tsx
@@ -1,13 +1,20 @@
 import React, { ReactNode } from 'react'
+import cx from 'classnames'
 import { useThemeVariables } from './useThemeVariables'
 import styles from './styles.module.scss'
 
-export const WebviewWrapper = ({ children }: { children: ReactNode }) => {
+export const WebviewWrapper = ({
+  children,
+  className
+}: {
+  children: ReactNode
+  className?: string
+}) => {
   const themeVariables = useThemeVariables()
 
   return (
     <div
-      className={styles.webviewWrapper}
+      className={cx(styles.webviewWrapper, className)}
       style={themeVariables}
       onContextMenu={e => {
         e.preventDefault()