Google latest code pulled

Author: Jeyaprakash-NK

kokoro/gcp_ubuntu_docker/continuous.cfg

@@ -0,0 +1,15 @@
+# -*- protobuffer -*-
+# proto-file: google3/devtools/kokoro/config/proto/build.proto
+# proto-message: BuildConfig
+
+# Location of the bash script. Should have value <github_scm.name>/<path_from_repository_root>.
+# github_scm.name is specified in the job configuration (next section).
+build_file: "dataproc-jupyter-plugin/kokoro/gcp_ubuntu_docker/kokoro_build.sh"
+
+action {
+  define_artifacts {
+    regex: "github/dataproc-jupyter-plugin/ui-tests/test-results/**"
+    regex: "github/dataproc-jupyter-plugin/ui-tests/playwright-report/**"
+    strip_prefix: "github/dataproc-jupyter-plugin/ui-tests/"
+  }
+}

kokoro/gcp_ubuntu_docker/kokoro_build.sh

@@ -0,0 +1,49 @@
+#!/bin/bash
+
+# Fail on any error.
+set -e
+
+# Display commands being run.
+# WARNING: please only enable 'set -x' if necessary for debugging, and be very
+#  careful if you handle credentials (e.g. from Keystore) with 'set -x':
+#  statements like "export VAR=$(cat /tmp/keystore/credentials)" will result in
+#  the credentials being printed in build logs.
+#  Additionally, recursive invocation with credentials as command-line
+#  parameters, will print the full command, with credentials, in the build logs.
+# set -x
+
+# Code under repo is checked out to ${KOKORO_ARTIFACTS_DIR}/github.
+# The final directory name in this path is determined by the scm name specified
+# in the job configuration.
+
+export PATH="$HOME/.local/bin:$PATH"
+
+# configure gcloud
+gcloud config set project dataproc-kokoro-tests
+gcloud config set compute/region us-central1
+
+# Install dependencies.
+sudo apt-get update
+sudo apt-get --assume-yes install python3 python3-pip nodejs
+
+# Install jupyter lab.
+pip install jupyterlab
+
+# Navigate to repo.
+cd "${KOKORO_ARTIFACTS_DIR}/github/dataproc-jupyter-plugin"
+
+# Install the plugin
+pip3 install -e ".[test]"
+# Link your development version of the extension with JupyterLab
+jupyter labextension develop . --overwrite
+# Server extension must be manually installed in develop mode
+jupyter server extension enable dataproc_jupyter_plugin
+# Rebuild extension Typescript source after making changes
+jlpm build
+
+
+# Run Playwright Tests
+cd ./ui-tests
+jlpm install
+jlpm playwright install
+PLAYWRIGHT_JUNIT_OUTPUT_NAME=test-results/sponge_log.xml jlpm playwright test --reporter=junit

kokoro/gcp_ubuntu_docker/presubmit.cfg

@@ -0,0 +1,15 @@
+# -*- protobuffer -*-
+# proto-file: google3/devtools/kokoro/config/proto/build.proto
+# proto-message: BuildConfig
+
+# Location of the bash script. Should have value <github_scm.name>/<path_from_repository_root>.
+# github_scm.name is specified in the job configuration (next section).
+build_file: "dataproc-jupyter-plugin/kokoro/gcp_ubuntu_docker/kokoro_build.sh"
+
+action {
+  define_artifacts {
+    regex: "github/dataproc-jupyter-plugin/ui-tests/test-results/**"
+    regex: "github/dataproc-jupyter-plugin/ui-tests/playwright-report/**"
+    strip_prefix: "github/dataproc-jupyter-plugin/ui-tests/"
+  }
+}

package.json

@@ -80,8 +80,6 @@
     "react-table": "^7.8.0",
     "react-tagsinput": "^3.20.3",
     "react-toastify": "^9.1.3",
-    "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.4",
     "yup": "^1.2.0"
   },
   "devDependencies": {
@@ -120,6 +118,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^4.4.1",
+    "semantic-ui-react": "^2.1.4",
     "source-map-loader": "^1.0.2",
     "storybook": "^7.4.0",
     "style-loader": "^3.3.1",

src/batches/createBatch.tsx

@@ -18,9 +18,7 @@
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import { LabIcon } from '@jupyterlab/ui-components';
 import LeftArrowIcon from '../../style/icons/left_arrow_icon.svg';
-import 'semantic-ui-css/semantic.min.css';
 import 'react-toastify/dist/ReactToastify.css';
-import { Input, Radio, Select } from 'semantic-ui-react';
 import {
   API_HEADER_BEARER,
   API_HEADER_CONTENT_TYPE,
@@ -55,7 +53,10 @@ import { ClipLoader } from 'react-spinners';
 import { toast } from 'react-toastify';
 import ErrorPopup from '../utils/errorPopup';
 import errorIcon from '../../style/icons/error_icon.svg';
-// import { set } from 'lib0/encoding';
+import { Select } from '../controls/MuiWrappedSelect';
+import { Input } from '../controls/MuiWrappedInput';
+import { Radio } from '@mui/material';
+// import { Dropdown } from '../controls/MuiWrappedDropdown';
 
 type Project = {
   projectId: string;
@@ -556,9 +557,7 @@ function CreateBatch({
           response
             .json()
             .then((responseResult: { clusters: Cluster[] }) => {
-              let transformClusterListData = [];
-
-              transformClusterListData = responseResult.clusters.filter(
+              let transformClusterListData = responseResult.clusters.filter(
                 (data: Cluster) => {
                   if (data.status.state === STATUS_RUNNING) {
                     return {
@@ -568,11 +567,9 @@ function CreateBatch({
                 }
               );
 
-              const keyLabelStructure = transformClusterListData.map(obj => ({
-                key: obj.clusterName,
-                value: obj.clusterName,
-                text: obj.clusterName
-              }));
+              const keyLabelStructure = transformClusterListData.map(
+                obj => obj.clusterName
+              );
               setClustersList(keyLabelStructure);
             })
             .catch((e: Error) => {
@@ -746,13 +743,7 @@ function CreateBatch({
           response
             .json()
             .then((responseResult: { subnetworks: string[] }) => {
-              let transformedSubNetworkList = [];
-              /*
-         Extracting  subnetworks from Network
-         Example: "https://www.googleapis.com/compute/v1/projects/{projectName}/global/networks/subnetwork",
-      */
-
-              transformedSubNetworkList = responseResult.subnetworks.map(
+              let transformedSubNetworkList = responseResult.subnetworks.map(
                 (data: string) => {
                   return {
                     subnetworks: data.split(
@@ -799,9 +790,7 @@ function CreateBatch({
           response
             .json()
             .then((responseResult: { services: Service[] }) => {
-              let transformClusterListData = [];
-
-              transformClusterListData = responseResult.services.filter(
+              let transformClusterListData = responseResult.services.filter(
                 (data: Service) => {
                   return {
                     name: data.name
@@ -843,8 +832,7 @@ function CreateBatch({
           response
             .json()
             .then((responseResult: { projects: Project[] }) => {
-              let transformedProjectList = [];
-              transformedProjectList = responseResult.projects.map(
+              let transformedProjectList = responseResult.projects.map(
                 (data: Project) => {
                   return {
                     value: data.projectId,
@@ -881,8 +869,7 @@ function CreateBatch({
           response
             .json()
             .then((responseResult: { items: Region[] }) => {
-              let transformedRegionList = [];
-              transformedRegionList = responseResult.items.map(
+              let transformedRegionList = responseResult.items.map(
                 (data: Region) => {
                   return {
                     value: data.name,
@@ -1196,8 +1183,8 @@ function CreateBatch({
     setKeySelected(data.value);
   };
 
-  const handleClusterSelected = (event: any, data: any) => {
-    setClusterSelected(data.value);
+  const handleClusterSelected = (event: any, value: any) => {
+    setClusterSelected(value);
   };
   const handleManualKeySelected = (event: ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value;
@@ -1292,6 +1279,7 @@ function CreateBatch({
                 <div>
                   <div className="create-batch-radio">
                     <Radio
+                      size="small"
                       className="select-batch-radio-style"
                       value="mainClass"
                       checked={selectedRadio === 'mainClass'}
@@ -1339,6 +1327,7 @@ function CreateBatch({
                 <div>
                   <div className="create-batch-radio">
                     <Radio
+                      size="small"
                       className="select-batch-radio-style"
                       value="mainJarURI"
                       checked={selectedRadio === 'mainJarURI'}
@@ -1833,6 +1822,7 @@ function CreateBatch({
               <div>
                 <div className="create-batch-radio">
                   <Radio
+                    size="small"
                     className="select-batch-radio-style"
                     value="googleManaged"
                     checked={selectedEncryptionRadio === 'googleManaged'}
@@ -1849,6 +1839,7 @@ function CreateBatch({
               <div>
                 <div className="create-batch-radio">
                   <Radio
+                    size="small"
                     className="select-batch-radio-style"
                     value="googleManaged"
                     checked={selectedEncryptionRadio === 'customerManaged'}
@@ -1876,6 +1867,7 @@ function CreateBatch({
                     <div>
                       <div className="create-batch-encrypt">
                         <Radio
+                          size="small"
                           className="select-batch-encrypt-radio-style"
                           value="mainClass"
                           checked={selectedRadioValue === 'key'}
@@ -1930,6 +1922,7 @@ function CreateBatch({
                     <div className="manual-input">
                       <div className="encrypt">
                         <Radio
+                          size="small"
                           className="select-batch-encrypt-radio-style "
                           value="mainClass"
                           checked={selectedRadioValue === 'manually'}

src/controls/MuiWrappedDropdown.tsx

@@ -0,0 +1,50 @@
+/**
+ * @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 {
+  Autocomplete,
+  AutocompleteProps,
+  TextField,
+  styled
+} from '@mui/material';
+import React from 'react';
+
+type Props = Omit<
+  AutocompleteProps<string, undefined, undefined, undefined>,
+  'renderInput'
+>;
+
+function DropdownInternal(props: Props) {
+  const { className, value, onChange, options } = props;
+  return (
+    <Autocomplete
+      className={className}
+      value={value}
+      onChange={onChange}
+      options={options}
+      renderInput={params => <TextField {...params} placeholder="Search..." />}
+    />
+  );
+}
+
+export const Dropdown = styled(DropdownInternal)<Props>({
+  '& .MuiInputBase-root': {
+    padding: 0
+  },
+  '& .MuiOutlinedInput-notchedOutline': {
+    borderStyle: 'none'
+  }
+});

src/controls/MuiWrappedInput.tsx

@@ -0,0 +1,45 @@
+/**
+ * @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 { TextField, styled } from '@mui/material';
+import React from 'react';
+import type { InputProps } from 'semantic-ui-react';
+
+function InputInternal(props: InputProps) {
+  const { className, value, onChange, placeholder } = props;
+  return (
+    <TextField
+      className={className}
+      value={value}
+      onChange={e =>
+        onChange?.(e as React.ChangeEvent<HTMLInputElement>, {
+          value: e.target.value
+        })
+      }
+      placeholder={placeholder}
+    ></TextField>
+  );
+}
+
+export const Input = styled(InputInternal)<InputProps>({
+  marginTop: '10px',
+  '& .MuiInputBase-input': {
+    padding: '9.5px 14px'
+  },
+  '& .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'rgb(0,0,0)'
+  }
+});

src/controls/MuiWrappedSelect.tsx

@@ -0,0 +1,48 @@
+/**
+ * @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 { MenuItem, Select as MuiSelect, styled } from '@mui/material';
+import React from 'react';
+import type { SelectProps } from 'semantic-ui-react';
+
+function SelectInternal(props: SelectProps) {
+  const { className, value, onChange, options } = props;
+  return (
+    <MuiSelect
+      className={className}
+      value={value}
+      onChange={e =>
+        onChange?.(e as React.ChangeEvent<HTMLInputElement>, {
+          value: e.target.value
+        })
+      }
+    >
+      {options.map(option => (
+        <MenuItem value={option.value as string}>{option.text}</MenuItem>
+      ))}
+    </MuiSelect>
+  );
+}
+
+export const Select = styled(SelectInternal)<SelectProps>({
+  marginTop: '10px',
+  '& .MuiInputBase-input': {
+    padding: '9.5px 14px'
+  },
+  '& .MuiOutlinedInput-notchedOutline': {
+    borderStyle: 'none'
+  }
+});