Skip to content

Commit af41f64

Browse files
author
ptwng
authored
replace semantic ui with mui inplace (#55)
1 parent 0bc71cb commit af41f64

16 files changed

+292
-410
lines changed

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,6 @@
8080
"react-table": "^7.8.0",
8181
"react-tagsinput": "^3.20.3",
8282
"react-toastify": "^9.1.3",
83-
"semantic-ui-css": "^2.5.0",
84-
"semantic-ui-react": "^2.1.4",
8583
"yup": "^1.2.0"
8684
},
8785
"devDependencies": {
@@ -120,6 +118,7 @@
120118
"react": "^18.2.0",
121119
"react-dom": "^18.2.0",
122120
"rimraf": "^4.4.1",
121+
"semantic-ui-react": "^2.1.4",
123122
"source-map-loader": "^1.0.2",
124123
"storybook": "^7.4.0",
125124
"style-loader": "^3.3.1",

‎src/batches/createBatch.tsx

+31-47
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@
1818
import React, { ChangeEvent, useEffect, useState } from 'react';
1919
import { LabIcon } from '@jupyterlab/ui-components';
2020
import LeftArrowIcon from '../../style/icons/left_arrow_icon.svg';
21-
import 'semantic-ui-css/semantic.min.css';
2221
import 'react-toastify/dist/ReactToastify.css';
23-
import { Input, Radio, Select, Dropdown } from 'semantic-ui-react';
2422
import {
2523
API_HEADER_BEARER,
2624
API_HEADER_CONTENT_TYPE,
@@ -54,6 +52,10 @@ import { ClipLoader } from 'react-spinners';
5452
import { toast } from 'react-toastify';
5553
import ErrorPopup from '../utils/errorPopup';
5654
import errorIcon from '../../style/icons/error_icon.svg';
55+
import { Select } from '../controls/MuiWrappedSelect';
56+
import { Input } from '../controls/MuiWrappedInput';
57+
import { Radio } from '@mui/material';
58+
import { Dropdown } from '../controls/MuiWrappedDropdown';
5759

5860
type Project = {
5961
projectId: string;
@@ -166,9 +168,7 @@ function CreateBatch({
166168
const [additionalPythonFileSelected, setAdditionalPythonFileSelected] =
167169
useState([...pythonFileUris]);
168170
const [mainPythonSelected, setMainPythonSelected] = useState('');
169-
const [clustersList, setClustersList] = useState<
170-
Array<{ key: string; value: string; text: string }>
171-
>([]);
171+
const [clustersList, setClustersList] = useState<string[]>([]);
172172
const [additionalPythonFileValidation, setAdditionalPythonFileValidation] =
173173
useState(true);
174174
const [jarFileValidation, setJarFileValidation] = useState(true);
@@ -250,11 +250,7 @@ function CreateBatch({
250250

251251
function isSubmitDisabled() {
252252
const commonConditions =
253-
batchIdSelected === '' ||
254-
regionName === '' ||
255-
batchIdValidation
256-
;
257-
253+
batchIdSelected === '' || regionName === '' || batchIdValidation;
258254
switch (batchTypeSelected) {
259255
case 'spark':
260256
return (
@@ -350,9 +346,7 @@ function CreateBatch({
350346
response
351347
.json()
352348
.then((responseResult: { clusters: Cluster[] }) => {
353-
let transformClusterListData = [];
354-
355-
transformClusterListData = responseResult.clusters.filter(
349+
let transformClusterListData = responseResult.clusters.filter(
356350
(data: Cluster) => {
357351
if (data.status.state === STATUS_RUNNING) {
358352
return {
@@ -362,11 +356,9 @@ function CreateBatch({
362356
}
363357
);
364358

365-
const keyLabelStructure = transformClusterListData.map(obj => ({
366-
key: obj.clusterName,
367-
value: obj.clusterName,
368-
text: obj.clusterName
369-
}));
359+
const keyLabelStructure = transformClusterListData.map(
360+
obj => obj.clusterName
361+
);
370362
setClustersList(keyLabelStructure);
371363
})
372364
.catch((e: Error) => {
@@ -540,13 +532,7 @@ function CreateBatch({
540532
response
541533
.json()
542534
.then((responseResult: { subnetworks: string[] }) => {
543-
let transformedSubNetworkList = [];
544-
/*
545-
Extracting subnetworks from Network
546-
Example: "https://www.googleapis.com/compute/v1/projects/{projectName}/global/networks/subnetwork",
547-
*/
548-
549-
transformedSubNetworkList = responseResult.subnetworks.map(
535+
let transformedSubNetworkList = responseResult.subnetworks.map(
550536
(data: string) => {
551537
return {
552538
subnetworks: data.split(
@@ -593,9 +579,7 @@ function CreateBatch({
593579
response
594580
.json()
595581
.then((responseResult: { services: Service[] }) => {
596-
let transformClusterListData = [];
597-
598-
transformClusterListData = responseResult.services.filter(
582+
let transformClusterListData = responseResult.services.filter(
599583
(data: Service) => {
600584
return {
601585
name: data.name
@@ -637,8 +621,7 @@ function CreateBatch({
637621
response
638622
.json()
639623
.then((responseResult: { projects: Project[] }) => {
640-
let transformedProjectList = [];
641-
transformedProjectList = responseResult.projects.map(
624+
let transformedProjectList = responseResult.projects.map(
642625
(data: Project) => {
643626
return {
644627
value: data.projectId,
@@ -675,8 +658,7 @@ function CreateBatch({
675658
response
676659
.json()
677660
.then((responseResult: { items: Region[] }) => {
678-
let transformedRegionList = [];
679-
transformedRegionList = responseResult.items.map(
661+
let transformedRegionList = responseResult.items.map(
680662
(data: Region) => {
681663
return {
682664
value: data.name,
@@ -960,8 +942,8 @@ function CreateBatch({
960942
setKeySelected(data.value);
961943
};
962944

963-
const handleClusterSelected = (event: any, data: any) => {
964-
setClusterSelected(data.value);
945+
const handleClusterSelected = (event: any, value: any) => {
946+
setClusterSelected(value);
965947
};
966948
const handleManualKeySelected = (event: ChangeEvent<HTMLInputElement>) => {
967949
const inputValue = event.target.value;
@@ -1038,6 +1020,7 @@ function CreateBatch({
10381020
<div>
10391021
<div className="create-batch-radio">
10401022
<Radio
1023+
size="small"
10411024
className="select-batch-radio-style"
10421025
value="mainClass"
10431026
checked={selectedRadio === 'mainClass'}
@@ -1052,7 +1035,8 @@ function CreateBatch({
10521035
</div>
10531036
{selectedRadio === 'mainClass' && (
10541037
<div className="create-batch-input">
1055-
<div className="create-batch-message">Main class*</div>
1038+
<span className="create-batch-message">Main class*</span>
1039+
<br />
10561040
<Input
10571041
className="create-batch-style "
10581042
value={mainClassSelected}
@@ -1077,6 +1061,7 @@ function CreateBatch({
10771061
<div>
10781062
<div className="create-batch-radio">
10791063
<Radio
1064+
size="small"
10801065
className="select-batch-radio-style"
10811066
value="mainJarURI"
10821067
checked={selectedRadio === 'mainJarURI'}
@@ -1090,7 +1075,8 @@ function CreateBatch({
10901075
</div>
10911076
{selectedRadio === 'mainJarURI' && (
10921077
<div className="create-batch-input">
1093-
<div className="create-batch-message">Main jar*</div>
1078+
<span className="create-batch-message">Main jar*</span>
1079+
<br />
10941080
<Input
10951081
className="create-batch-style "
10961082
value={mainJarSelected}
@@ -1477,6 +1463,7 @@ function CreateBatch({
14771463
<div>
14781464
<div className="create-batch-radio">
14791465
<Radio
1466+
size="small"
14801467
className="select-batch-radio-style"
14811468
value="googleManaged"
14821469
checked={selectedEncryptionRadio === 'googleManaged'}
@@ -1493,6 +1480,7 @@ function CreateBatch({
14931480
<div>
14941481
<div className="create-batch-radio">
14951482
<Radio
1483+
size="small"
14961484
className="select-batch-radio-style"
14971485
value="googleManaged"
14981486
checked={selectedEncryptionRadio === 'customerManaged'}
@@ -1526,6 +1514,7 @@ function CreateBatch({
15261514
<div>
15271515
<div className="create-batch-encrypt">
15281516
<Radio
1517+
size="small"
15291518
className="select-batch-encrypt-radio-style"
15301519
value="mainClass"
15311520
checked={selectedRadioValue === 'key'}
@@ -1559,6 +1548,7 @@ function CreateBatch({
15591548
</div>
15601549
<div className="encrypt">
15611550
<Radio
1551+
size="small"
15621552
className="select-batch-encrypt-radio-style "
15631553
value="mainClass"
15641554
checked={selectedRadioValue === 'manually'}
@@ -1571,16 +1561,13 @@ function CreateBatch({
15711561
disabled={selectedRadioValue === 'key'}
15721562
onChange={handleManualKeySelected}
15731563
/>
1574-
15751564
</div>
15761565
{!manualValidation && (
1577-
<div className="error-key-parent">
1578-
<iconError.react tag="div" />
1579-
<div className="error-key-missing">
1580-
{KEY_MESSAGE}
1581-
</div>
1582-
</div>
1583-
)}
1566+
<div className="error-key-parent">
1567+
<iconError.react tag="div" />
1568+
<div className="error-key-missing">{KEY_MESSAGE}</div>
1569+
</div>
1570+
)}
15841571
</div>
15851572
</>
15861573
)}
@@ -1661,12 +1648,9 @@ function CreateBatch({
16611648

16621649
<Dropdown
16631650
className="select-job-style"
1664-
search
1665-
selection
16661651
value={clusterSelected}
16671652
onChange={handleClusterSelected}
16681653
options={clustersList}
1669-
placeholder="Search..."
16701654
/>
16711655
<div className="submit-job-label-header">Properties</div>
16721656
<LabelProperties

‎src/controls/MuiWrappedDropdown.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* @license
3+
* Copyright 2023 Google LLC
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
import {
18+
Autocomplete,
19+
AutocompleteProps,
20+
TextField,
21+
styled
22+
} from '@mui/material';
23+
import React from 'react';
24+
25+
type Props = Omit<
26+
AutocompleteProps<string, undefined, undefined, undefined>,
27+
'renderInput'
28+
>;
29+
30+
function DropdownInternal(props: Props) {
31+
const { className, value, onChange, options } = props;
32+
return (
33+
<Autocomplete
34+
className={className}
35+
value={value}
36+
onChange={onChange}
37+
options={options}
38+
renderInput={params => <TextField {...params} placeholder="Search..." />}
39+
/>
40+
);
41+
}
42+
43+
export const Dropdown = styled(DropdownInternal)<Props>({
44+
'& .MuiInputBase-root': {
45+
padding: 0
46+
},
47+
'& .MuiOutlinedInput-notchedOutline': {
48+
borderStyle: 'none'
49+
}
50+
});

‎src/controls/MuiWrappedInput.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* @license
3+
* Copyright 2023 Google LLC
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
import { TextField, styled } from '@mui/material';
18+
import React from 'react';
19+
import type { InputProps } from 'semantic-ui-react';
20+
21+
function InputInternal(props: InputProps) {
22+
const { className, value, onChange, placeholder } = props;
23+
return (
24+
<TextField
25+
className={className}
26+
value={value}
27+
onChange={e =>
28+
onChange?.(e as React.ChangeEvent<HTMLInputElement>, {
29+
value: e.target.value
30+
})
31+
}
32+
placeholder={placeholder}
33+
></TextField>
34+
);
35+
}
36+
37+
export const Input = styled(InputInternal)<InputProps>({
38+
marginTop: '10px',
39+
'& .MuiInputBase-input': {
40+
padding: '9.5px 14px'
41+
},
42+
'& .MuiOutlinedInput-notchedOutline': {
43+
borderColor: 'rgb(0,0,0)'
44+
}
45+
});

‎src/controls/MuiWrappedSelect.tsx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* @license
3+
* Copyright 2023 Google LLC
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
import { MenuItem, Select as MuiSelect, styled } from '@mui/material';
18+
import React from 'react';
19+
import type { SelectProps } from 'semantic-ui-react';
20+
21+
function SelectInternal(props: SelectProps) {
22+
const { className, value, onChange, options } = props;
23+
return (
24+
<MuiSelect
25+
className={className}
26+
value={value}
27+
onChange={e =>
28+
onChange?.(e as React.ChangeEvent<HTMLInputElement>, {
29+
value: e.target.value
30+
})
31+
}
32+
>
33+
{options.map(option => (
34+
<MenuItem value={option.value as string}>{option.text}</MenuItem>
35+
))}
36+
</MuiSelect>
37+
);
38+
}
39+
40+
export const Select = styled(SelectInternal)<SelectProps>({
41+
marginTop: '10px',
42+
'& .MuiInputBase-input': {
43+
padding: '9.5px 14px'
44+
},
45+
'& .MuiOutlinedInput-notchedOutline': {
46+
borderStyle: 'none'
47+
}
48+
});

0 commit comments

Comments
 (0)