Also updated Taginput to wrapper class (#57)

* Add a new DataprocWidget base class that injects MUI themes.

* wrap tag input

* wrap tag input

Author: ptwng

package.json

@@ -78,7 +78,6 @@
     "react-arborist": "^3.1.0",
     "react-spinners": "^0.13.8",
     "react-table": "^7.8.0",
-    "react-tagsinput": "^3.20.3",
     "react-toastify": "^9.1.3",
     "yup": "^1.2.0"
   },
@@ -117,6 +116,7 @@
     "prettier": "^2.8.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-tagsinput": "^3.20.3",
     "rimraf": "^4.4.1",
     "semantic-ui-react": "^2.1.4",
     "source-map-loader": "^1.0.2",

src/batches/batches.tsx

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { ReactWidget } from '@jupyterlab/apputils';
 import React, { useState, useEffect, useRef } from 'react';
 import {
   authApi,
@@ -42,6 +41,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import { deleteBatchAPI } from '../utils/batchService';
 import CreateBatch from './createBatch';
 import PollingTimer from '../utils/pollingTimer';
+import { DataprocWidget } from '../controls/DataprocWidget';
 
 const iconDelete = new LabIcon({
   name: 'launcher:delete-icon',
@@ -320,12 +320,8 @@ const BatchesComponent = (): React.JSX.Element => {
   );
 };
 
-export class Batches extends ReactWidget {
-  constructor() {
-    super();
-  }
-
-  render(): React.JSX.Element {
+export class Batches extends DataprocWidget {
+  renderInternal(): React.JSX.Element {
     return <BatchesComponent />;
   }
 }

src/batches/createBatch.tsx

@@ -44,8 +44,6 @@ import {
   SERVICE_ACCOUNT,
   STATUS_RUNNING
 } from '../utils/const';
-import TagsInput from 'react-tagsinput';
-import 'react-tagsinput/react-tagsinput.css';
 import LabelProperties from '../jobs/labelProperties';
 import { authApi } from '../utils/utils';
 import { ClipLoader } from 'react-spinners';
@@ -56,6 +54,7 @@ import { Select } from '../controls/MuiWrappedSelect';
 import { Input } from '../controls/MuiWrappedInput';
 import { Radio } from '@mui/material';
 import { Dropdown } from '../controls/MuiWrappedDropdown';
+import { TagsInput } from '../controls/MuiWrappedTagsInput';
 
 type Project = {
   projectId: string;

src/cluster/cluster.tsx

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { ReactWidget } from '@jupyterlab/apputils';
 import { LabIcon } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 import { ClipLoader } from 'react-spinners';
@@ -44,6 +43,7 @@ import {
 } from '../utils/utils';
 import ClusterDetails from './clusterDetails';
 import ListCluster from './listCluster';
+import { DataprocWidget } from '../controls/DataprocWidget';
 
 const iconStart = new LabIcon({
   name: 'launcher:start-icon',
@@ -445,12 +445,8 @@ const ClusterComponent = (): React.JSX.Element => {
   );
 };
 
-export class Cluster extends ReactWidget {
-  constructor() {
-    super();
-  }
-
-  render(): React.JSX.Element {
+export class Cluster extends DataprocWidget {
+  renderInternal(): React.JSX.Element {
     return <ClusterComponent />;
   }
 }

src/controls/DataprocWidget.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ReactWidget, IThemeManager } from '@jupyterlab/apputils';
+import { ThemeProvider, createTheme } from '@mui/material';
+
+/**
+ * Theme to use when the current Jupyter Theme is light.
+ */
+export const lightTheme = createTheme({
+  palette: {
+    mode: 'light'
+  }
+});
+
+/**
+ * Theme to use when the current Jupyter Theme is dark.
+ */
+export const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#FF0064'
+    },
+    secondary: {
+      main: '#7000F2'
+    }
+  }
+});
+
+/**
+ * Base Widget class that injects MUI themeprovider context so
+ * mui components will update when the jupyter theme changes.
+ * TODO: Add auth context provider here?
+ */
+export abstract class DataprocWidget extends ReactWidget {
+  /**
+   * Whether or not currently jupyter is displaying a light theme.
+   */
+  isLight: boolean = true;
+
+  /**
+   * @param themeManager Need thememanager to listen to theme changes
+   *   and to retrieve current theme properties.
+   */
+  constructor(protected themeManager: IThemeManager) {
+    super();
+    this.themeManager.themeChanged.connect(this.onThemeChanged, this);
+    this.updateIsLight();
+  }
+
+  /**
+   * Updates the isLight property based on current theme properties.
+   * @returns Whether or not isLight is updated based on the current theme.
+   */
+  private updateIsLight() {
+    const prevIsLight = this.isLight;
+    const currentTheme = this.themeManager.theme;
+    if (currentTheme) {
+      this.isLight = this.themeManager.isLight(currentTheme);
+    } else {
+      this.isLight = true;
+    }
+    return this.isLight !== prevIsLight;
+  }
+
+  private onThemeChanged() {
+    if (this.updateIsLight()) {
+      // Force a rerender if the theme has changed.
+      this.update();
+    }
+  }
+
+  dispose() {
+    this.themeManager.themeChanged.disconnect(this.onThemeChanged, this);
+    return super.dispose();
+  }
+
+  /**
+   * Renders the theme context providers as well as the child components
+   * as specified by renderInternal.
+   */
+  protected render(): React.ReactElement {
+    return (
+      <ThemeProvider theme={this.isLight ? lightTheme : darkTheme}>
+        {this.renderInternal()}
+      </ThemeProvider>
+    );
+  }
+
+  /**
+   * Child classes are expected to implement this instead of render().
+   */
+  protected abstract renderInternal(): React.ReactElement;
+}

src/controls/MuiWrappedTagsInput.tsx

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { styled } from '@mui/material';
+import { MuiChipsInput } from 'mui-chips-input';
+import React from 'react';
+import type { ReactTagsInputProps } from 'react-tagsinput';
+
+function TagsInputInternal(props: ReactTagsInputProps) {
+  const { className, value, onChange, addOnBlur, inputProps } = props;
+  return (
+    <MuiChipsInput
+      className={className}
+      onChange={tags => onChange(tags, [], [])}
+      addOnBlur={!!addOnBlur}
+      value={value}
+      placeholder={inputProps?.placeholder}
+    />
+  );
+}
+
+export const TagsInput = styled(TagsInputInternal)<ReactTagsInputProps>({
+  marginTop: '10px'
+});

src/dpms/databaseInfo.tsx

@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 
-import { ReactWidget } from '@jupyterlab/apputils';
 import React from 'react';
+import { IThemeManager } from '@jupyterlab/apputils';
+import { DataprocWidget } from '../controls/DataprocWidget';
 
 interface IDatabaseProps {
   title: string;
@@ -63,21 +64,18 @@ const DatabaseInfo = ({
   );
 };
 
-export class Database extends ReactWidget {
-  dataprocMetastoreServices: string;
-  databaseDetails: Record<string, string>;
+export class Database extends DataprocWidget {
   constructor(
     title: string,
-    dataprocMetastoreServices: string,
-    databaseDetails: Record<string, string>
+    private dataprocMetastoreServices: string,
+    private databaseDetails: Record<string, string>,
+    themeManager: IThemeManager
   ) {
-    super();
+    super(themeManager);
     this.title.label = title;
-    this.dataprocMetastoreServices = dataprocMetastoreServices;
-    this.databaseDetails = databaseDetails;
   }
 
-  render(): React.ReactElement {
+  renderInternal(): React.ReactElement {
     return (
       <DatabaseInfo
         title={this.title.label}

src/dpms/dpmsWidget.tsx

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { ReactWidget } from '@jupyterlab/apputils';
 import { JupyterLab } from '@jupyterlab/application';
 import React, { useEffect, useState } from 'react';
 import { Tree, NodeRendererProps } from 'react-arborist';
@@ -47,6 +46,8 @@ import { authApi } from '../utils/utils';
 import { Table } from './tableInfo';
 import { ClipLoader } from 'react-spinners';
 import { ToastContainer, toast } from 'react-toastify';
+import { DataprocWidget } from '../controls/DataprocWidget';
+import { IThemeManager } from '@jupyterlab/apputils';
 
 const iconDatabase = new LabIcon({
   name: 'launcher:database-icon',
@@ -99,7 +100,13 @@ const calculateDepth = (node: any): number => {
   return depth;
 };
 
-const DpmsComponent = ({ app }: { app: JupyterLab }): JSX.Element => {
+const DpmsComponent = ({
+  app,
+  themeManager
+}: {
+  app: JupyterLab;
+  themeManager: IThemeManager;
+}): JSX.Element => {
   const [searchTerm, setSearchTerm] = useState('');
   const [notebookValue, setNotebookValue] = useState<string>('');
   const [dataprocMetastoreServices, setDataprocMetastoreServices] =
@@ -268,7 +275,8 @@ fetching database name from fully qualified name structure */
         const content = new Database(
           node.data.name,
           dataprocMetastoreServices,
-          databaseDetails
+          databaseDetails,
+          themeManager
         );
         const widget = new MainAreaWidget<Database>({ content });
         const widgetId = 'node-widget-db';
@@ -285,7 +293,8 @@ fetching database name from fully qualified name structure */
           dataprocMetastoreServices,
           database,
           column,
-          tableDescription
+          tableDescription,
+          themeManager
         );
         const widget = new MainAreaWidget<Table>({ content });
         const widgetId = `node-widget-${uuidv4()}`;
@@ -707,15 +716,12 @@ fetching database name from fully qualified name structure */
   );
 };
 
-export class dpmsWidget extends ReactWidget {
-  app: JupyterLab;
-
-  constructor(app: JupyterLab) {
-    super();
-    this.app = app;
+export class dpmsWidget extends DataprocWidget {
+  constructor(private app: JupyterLab, themeManager: IThemeManager) {
+    super(themeManager);
   }
 
-  render(): JSX.Element {
-    return <DpmsComponent app={this.app} />;
+  renderInternal(): JSX.Element {
+    return <DpmsComponent app={this.app} themeManager={this.themeManager} />;
   }
 }

src/dpms/tableInfo.tsx

@@ -16,8 +16,9 @@
  */
 
 import React from 'react';
-import { ReactWidget } from '@jupyterlab/apputils';
 import { useTable } from 'react-table';
+import { IThemeManager } from '@jupyterlab/apputils';
+import { DataprocWidget } from '../controls/DataprocWidget';
 interface IColumn {
   name: string;
   type: string;
@@ -41,8 +42,8 @@ const TableInfo = ({
 }: IDatabaseProps): React.JSX.Element => {
   const table = {
     'Table name': title,
-    'Description': tableDescription[title],
-    'Database': database,
+    Description: tableDescription[title],
+    Database: database,
     'Dataproc Metastore Instance': dataprocMetastoreServices
   };
 
@@ -145,27 +146,19 @@ const TableInfo = ({
   );
 };
 
-export class Table extends ReactWidget {
-  dataprocMetastoreServices: string;
-  database!: string;
-  column: IColumn[];
-  tableDescription: Record<string, string>;
-
+export class Table extends DataprocWidget {
   constructor(
     title: string,
-    dataprocMetastoreServices: string,
-    database: string,
-    column: IColumn[],
-    tableDescription: Record<string, string>
+    private dataprocMetastoreServices: string,
+    private database: string,
+    private column: IColumn[],
+    private tableDescription: Record<string, string>,
+    themeManager: IThemeManager
   ) {
-    super();
-    this.dataprocMetastoreServices = dataprocMetastoreServices;
-    this.database = database;
-    this.column = column;
-    this.tableDescription = tableDescription;
+    super(themeManager);
   }
 
-  render(): React.JSX.Element {
+  renderInternal(): React.JSX.Element {
     return (
       <TableInfo
         title={this.title.label}