Fix lints and deprecation warnings (#768)

package.json

@@ -22,9 +22,9 @@
     "@hyper-tuner/ini": "^0.4.0",
     "@hyper-tuner/types": "^0.4.0",
     "@reduxjs/toolkit": "^1.8.5",
-    "@sentry/react": "^7.13.0",
-    "@sentry/tracing": "^7.13.0",
-    "antd": "^4.23.2",
+    "@sentry/react": "^7.14.1",
+    "@sentry/tracing": "^7.14.1",
+    "antd": "^4.23.4",
     "appwrite": "^9.0.2",
     "kbar": "^0.1.0-beta.36",
     "lodash.debounce": "^4.0.8",
@@ -40,19 +40,19 @@
     "react-router-dom": "^6.4.1",
     "uplot": "^1.6.22",
     "uplot-react": "^1.1.1",
-    "vite": "^3.1.3"
+    "vite": "^3.1.4"
   },
   "devDependencies": {
     "@hyper-tuner/eslint-config": "^0.1.6",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^18.7.22",
+    "@types/node": "^18.8.0",
     "@types/pako": "^2.0.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "@vitejs/plugin-react": "^2.1.0",
     "eslint": "^8.24.0",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -65,6 +65,6 @@
     "less": "^4.1.3",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.8.2",
-    "typescript": "^4.8.3"
+    "typescript": "^4.8.4"
   }
 }

src/pages/Diagnose.tsx

@@ -44,7 +44,6 @@ import TriggerLogsParser, {
 import ToothCanvas from '../components/TriggerLogs/ToothCanvas';
 import Loader from '../components/Loader';
 
-const { TabPane } = Tabs;
 const { Content } = Layout;
 const { Step } = Steps;
 
@@ -148,14 +147,22 @@ const Diagnose = ({ ui, config, loadedLogs }: { ui: UIState, config: Config, loa
           <Loader />
           :
           !ui.sidebarCollapsed &&
-          <Tabs defaultActiveKey="files" style={{ marginLeft: 20 }}>
-            <TabPane tab={<FileTextOutlined />} key="files">
-              <PerfectScrollbar options={{ suppressScrollX: true }}>
-                <Typography.Paragraph>tooth.csv</Typography.Paragraph>
-                <Typography.Paragraph>composite.csv</Typography.Paragraph>
-              </PerfectScrollbar>
-            </TabPane>
-          </Tabs>
+          <Tabs
+            defaultActiveKey="files"
+            style={{ marginLeft: 20 }}
+            items={[
+              {
+                label: <FileTextOutlined />,
+                key: 'files',
+                children: (
+                  <PerfectScrollbar options={{ suppressScrollX: true }}>
+                    <Typography.Paragraph>tooth.csv</Typography.Paragraph>
+                    <Typography.Paragraph>composite.csv</Typography.Paragraph>
+                  </PerfectScrollbar>
+                ),
+              },
+            ]}
+          />
         }
       </Sider>
       <Layout style={{ width: '100%', textAlign: 'center', marginTop: 50 }}>

src/pages/Logs.tsx

@@ -51,7 +51,6 @@ import {
 } from '../types/state';
 import Loader from '../components/Loader';
 
-const { TabPane } = Tabs;
 const { Content } = Layout;
 const { Step } = Steps;
 const edgeUnknown = 'Unknown';
@@ -222,42 +221,56 @@ const Logs = ({
           <Loader />
           :
           !ui.sidebarCollapsed &&
-          <Tabs defaultActiveKey="fields" style={{ marginLeft: 20 }}>
-            <TabPane tab={<EditOutlined />} key="fields">
-              <div style={{ height: '45%' }}>
-                <PerfectScrollbar options={{ suppressScrollX: true }}>
-                  <Checkbox.Group onChange={setSelectedFields1} value={selectedFields1}>
-                    {fields.map((field) => (
-                      <Row key={field.name}>
-                        <Checkbox key={field.name} value={field.name}>
-                          {isExpression(field.label) ? stripExpression(field.label) : field.label}
-                        </Checkbox>
-                      </Row>
-                    ))}
-                  </Checkbox.Group>
-                </PerfectScrollbar>
-              </div>
-              <Divider />
-              <div style={{ height: '45%' }}>
-                <PerfectScrollbar options={{ suppressScrollX: true }}>
-                  <Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}>
-                    {fields.map((field) => (
-                      <Row key={field.name}>
-                        <Checkbox key={field.name} value={field.name}>
-                          {isExpression(field.label) ? stripExpression(field.label) : field.label}
-                        </Checkbox>
-                      </Row>
-                    ))}
-                  </Checkbox.Group>
-                </PerfectScrollbar>
-              </div>
-            </TabPane>
-            <TabPane tab={<FileTextOutlined />} key="files">
-              <PerfectScrollbar options={{ suppressScrollX: true }}>
-                some_tune.mlg
-              </PerfectScrollbar>
-            </TabPane>
-          </Tabs>
+          <Tabs
+            defaultActiveKey="fields"
+            style={{ marginLeft: 20 }}
+            items={[
+              {
+                label: <EditOutlined />,
+                key: 'fields',
+                children: (
+                  <>
+                    <div style={{ height: '45%' }}>
+                      <PerfectScrollbar options={{ suppressScrollX: true }}>
+                        <Checkbox.Group onChange={setSelectedFields1} value={selectedFields1}>
+                          {fields.map((field) => (
+                            <Row key={field.name}>
+                              <Checkbox key={field.name} value={field.name}>
+                                {isExpression(field.label) ? stripExpression(field.label) : field.label}
+                              </Checkbox>
+                            </Row>
+                          ))}
+                        </Checkbox.Group>
+                      </PerfectScrollbar>
+                    </div>
+                    <Divider />
+                    <div style={{ height: '45%' }}>
+                      <PerfectScrollbar options={{ suppressScrollX: true }}>
+                        <Checkbox.Group onChange={setSelectedFields2} value={selectedFields2}>
+                          {fields.map((field) => (
+                            <Row key={field.name}>
+                              <Checkbox key={field.name} value={field.name}>
+                                {isExpression(field.label) ? stripExpression(field.label) : field.label}
+                              </Checkbox>
+                            </Row>
+                          ))}
+                        </Checkbox.Group>
+                      </PerfectScrollbar>
+                    </div>
+                  </>
+                ),
+              },
+              {
+                label: <FileTextOutlined />,
+                key: 'files',
+                children: (
+                  <PerfectScrollbar options={{ suppressScrollX: true }}>
+                    some_tune.mlg
+                  </PerfectScrollbar>
+                ),
+              },
+            ]}
+          />
         }
       </Sider>
       <Layout style={{ width: '100%', textAlign: 'center', marginTop: 50 }}>

src/pages/Tune.tsx

@@ -35,7 +35,7 @@ const Tune = ({ config, tune }: { config: ConfigType | null, tune: TuneState })
   const tuneId = tunePathMatch?.params.tuneId;
 
   useEffect(() => {
-    if (tune && config && tuneRootMatch) {
+    if (tune && config && tuneRootMatch && tuneId) {
       const firstCategory = Object.keys(config!.menus)[0];
       const firstDialog = Object.keys(config!.menus[firstCategory].subMenus)[0];
 

src/pages/Upload.tsx

@@ -452,7 +452,7 @@ const UploadPage = () => {
     }
 
     setTuneIsLoading(false);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentUser, form, navigateToNewTuneId]);
 
   const prepareData = useCallback(async () => {
@@ -631,26 +631,38 @@ const UploadPage = () => {
           <Typography.Text type="secondary">(markdown)</Typography.Text>
         </Space>
       </Divider>
-      <Tabs defaultActiveKey="source" className="upload-readme">
-        <Tabs.TabPane tab="Edit" key="source" style={{ height: descriptionEditorHeight }}>
-          <Item name="readme">
-            <Input.TextArea
-              rows={10}
-              showCount
-              value={readme}
-              onChange={(e) => setReadme(e.target.value)}
-              maxLength={3_000}
-            />
-          </Item>
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="Preview" key="preview" style={{ height: descriptionEditorHeight }}>
-          <div className="markdown-preview">
-            <ReactMarkdown>
-              {readme}
-            </ReactMarkdown>
-          </div>
-        </Tabs.TabPane>
-      </Tabs>
+      <Tabs
+        defaultActiveKey="source"
+        className="upload-readme"
+        items={[
+          {
+            label: 'Edit',
+            key: 'source',
+            style: { height: descriptionEditorHeight },
+            children: (
+              <Input.TextArea
+                rows={10}
+                showCount
+                value={readme}
+                onChange={(e) => setReadme(e.target.value)}
+                maxLength={3_000}
+              />
+            ),
+          },
+          {
+            label: 'Preview',
+            key: 'preview',
+            style: { height: descriptionEditorHeight },
+            children: (
+              <div className="markdown-preview">
+                <ReactMarkdown>
+                  {readme}
+                </ReactMarkdown>
+              </div>
+            ),
+          },
+        ]}
+      />
     </>
   );