Feat/step draggable (#15)

* Feature: Step Draggable * feat: step bar * fix: code smell --------- Co-authored-by: Tim <[email protected]>
mycloudnexus · Jun 13, 2024 · cd736be · cd736be
1 parent 57d924d
commit cd736be
Show file tree

Hide file tree

Showing 11 changed files with 470 additions and 189 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-router-dom": "^6.23.1",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "stream-browserify": "^3.0.0",

diff --git a/src/assets/newAPIServer/close.svg b/src/assets/newAPIServer/close.svg
diff --git a/src/pages/NewAPIServer/__test__/components.test.tsx b/src/pages/NewAPIServer/__test__/components.test.tsx
@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "@/utils/helpers/reactQuery";
+import { BrowserRouter } from "react-router-dom";
+import StepBar from "../components/StepBar";
+
+test("test API step bar", () => {
+  const { container } = render(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <StepBar currentStep={1} />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+  expect(container).toBeInTheDocument();
+});
diff --git a/src/pages/NewAPIServer/components/AddEnv.tsx b/src/pages/NewAPIServer/components/AddEnv.tsx
@@ -11,12 +11,18 @@ const AddEnv = ({ form, active }: Props) => {
   const isStage = Form.useWatch("isStage", form);
   const isUat = Form.useWatch("isUat", form);
   return (
-    <div style={{ display: active ? "block" : "none" }}>
+    <div
+      style={{
+        display: active ? "flex" : "none",
+        flex: 1,
+        flexDirection: "column",
+      }}
+    >
       <Text.BoldLarge>Add information for the API server</Text.BoldLarge>
       <p>
         <Text.NormalLarge>Console connect application</Text.NormalLarge>
       </p>
-      <div className={styles.paper}>
+      <div className={styles.paper} style={{ flex: 1 }}>
         <Row gutter={[40, 16]}>
           <Col span={24}>
             <Text.LightLarge>
@@ -35,7 +41,7 @@ const AddEnv = ({ form, active }: Props) => {
               className={styles.inputUrl}
               rules={[{ required: isSIT, message: "Please fill the url" }]}
             >
-              <Input placeholder="Add URL"  disabled={!isSIT} />
+              <Input placeholder="Add URL" disabled={!isSIT} />
             </Form.Item>
           </Col>
           <Col span={4}>
@@ -50,7 +56,7 @@ const AddEnv = ({ form, active }: Props) => {
               className={styles.inputUrl}
               rules={[{ required: isProd, message: "Please fill the url" }]}
             >
-              <Input placeholder="Add URL"  disabled={!isProd} />
+              <Input placeholder="Add URL" disabled={!isProd} />
             </Form.Item>
           </Col>
           <Col span={4}>
@@ -65,7 +71,7 @@ const AddEnv = ({ form, active }: Props) => {
               className={styles.inputUrl}
               rules={[{ required: isStage, message: "Please fill the url" }]}
             >
-              <Input placeholder="Add URL"  disabled={!isStage} />
+              <Input placeholder="Add URL" disabled={!isStage} />
             </Form.Item>
           </Col>
           <Col span={4}>
@@ -80,7 +86,7 @@ const AddEnv = ({ form, active }: Props) => {
               className={styles.inputUrl}
               rules={[{ required: isUat, message: "Please fill the url" }]}
             >
-              <Input placeholder="Add URL"  disabled={!isUat} />
+              <Input placeholder="Add URL" disabled={!isUat} />
             </Form.Item>
           </Col>
         </Row>

diff --git a/src/pages/NewAPIServer/components/SelectAPIServer.tsx b/src/pages/NewAPIServer/components/SelectAPIServer.tsx
@@ -1,6 +1,6 @@
 import Text from "@/components/Text";
 import styles from "./index.module.scss";
-import { Col, Form, Row, Input, Upload, Button, FormInstance } from "antd";
+import { Form, Input, Upload, Button, FormInstance } from "antd";
 import { PaperClipOutlined, UploadOutlined } from "@ant-design/icons";
 import Flex from "@/components/Flex";
 import { get, isEmpty } from "lodash";
@@ -31,101 +31,88 @@ const SelectAPIServer = ({ form, active }: Props) => {
   };
 
   return (
-    <div style={{ display: active ? "block" : "none" }}>
+    <div
+      style={{
+        display: active ? "flex" : "none",
+        flex: 1,
+        flexDirection: "column",
+      }}
+    >
       <ReplaceFileModal
         isOpen={isOpenModal}
         onOk={handleReplace}
         onCancel={closeModal}
       />
       <Text.BoldLarge>Add information for the API server</Text.BoldLarge>
-      <div className={styles.paper}>
-        <Row gutter={[40, 16]} style={{ width: "100%" }}>
-          <Col span={8}>
-            <Form.Item
-              label="API server name"
-              name="name"
-              rules={[
-                {
-                  required: true,
-                  message: "Please fill the application name",
-                },
-              ]}
-              labelCol={{ span: 24 }}
+      <div className={styles.paper} style={{ flex: 1 }}>
+        <Form.Item
+          label="API server name"
+          name="name"
+          rules={[
+            {
+              required: true,
+              message: "Please fill the application name",
+            },
+          ]}
+          labelCol={{ span: 24 }}
+        >
+          <Input placeholder="Add application name" style={{ width: "50%" }} />
+        </Form.Item>
+        <Form.Item
+          label="Description"
+          name="description"
+          labelCol={{ span: 24 }}
+        >
+          <Input placeholder="Add description" style={{ width: "50%" }} />
+        </Form.Item>
+        <Form.Item
+          label="Online API document link"
+          name="link"
+          rules={[
+            {
+              required: false,
+            },
+            {
+              validator: (_, value) => {
+                if (isURL(value) || isEmpty(value)) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(new Error("Please enter a valid URL"));
+              },
+            },
+          ]}
+          labelCol={{ span: 24 }}
+          validateTrigger="onBlur"
+        >
+          <Input placeholder="Add link" style={{ width: "50%" }} />
+        </Form.Item>
+        <Form.Item
+          name="file"
+          label="Upload API Spec:"
+          rules={[{ required: true, message: "Please upload a file" }]}
+        >
+          {isEmpty(file?.file) ? (
+            <Upload
+              id="upload-file"
+              accept=".yaml"
+              showUploadList={false}
+              multiple={false}
+              beforeUpload={() => false}
             >
-              <Input
-                placeholder="Add application name"
-                style={{ width: "100%" }}
-              />
-            </Form.Item>
-          </Col>
-          <Col span={8}>
-            <Form.Item
-              label="Description"
-              name="description"
-              labelCol={{ span: 24 }}
-            >
-              <Input placeholder="Add description" style={{ width: "100%" }} />
-            </Form.Item>
-          </Col>
-          <Col span={8}>
-            <Form.Item
-              label="Online API document link"
-              name="link"
-              rules={[
-                {
-                  required: false,
-                },
-                {
-                  validator: (_, value) => {
-                    if (isURL(value) || isEmpty(value)) {
-                      return Promise.resolve();
-                    }
-                    return Promise.reject(
-                      new Error("Please enter a valid URL")
-                    );
-                  },
-                },
-              ]}
-              labelCol={{ span: 24 }}
-              validateTrigger="onBlur"
-            >
-              <Input placeholder="Add link" style={{ width: "100%" }} />
-            </Form.Item>
-          </Col>
-          <Col span={24}>
-            <Form.Item
-              name="file"
-              label="Upload API Spec:"
-              rules={[{ required: true, message: "Please upload a file" }]}
-            >
-              {isEmpty(file?.file) ? (
-                <Upload
-                  id="upload-file"
-                  accept=".yaml"
-                  showUploadList={false}
-                  multiple={false}
-                  beforeUpload={() => false}
-                >
-                  <Button icon={<UploadOutlined />}>Click to upload</Button>
-                </Upload>
-              ) : (
-                <Button icon={<UploadOutlined />} onClick={openModal}>
-                  Click to upload
-                </Button>
-              )}
-            </Form.Item>
-          </Col>
-          <Col span={24} style={{ marginTop: -16 }}>
-            {file ? (
-              <Flex gap={9} justifyContent="flex-start">
-                <PaperClipOutlined />
-                <Text.LightMedium>
-                  {get(file, "file.name", "")}
-                </Text.LightMedium>
-              </Flex>
-            ) : null}
-          </Col>
-        </Row>
+              <Button icon={<UploadOutlined />}>Click to upload</Button>
+            </Upload>
+          ) : (
+            <Button icon={<UploadOutlined />} onClick={openModal}>
+              Click to upload
+            </Button>
+          )}
+        </Form.Item>
+        {file ? (
+          <Flex gap={9} justifyContent="flex-start">
+            <PaperClipOutlined />
+            <Text.LightMedium>{get(file, "file.name", "")}</Text.LightMedium>
+          </Flex>
+        ) : null}
       </div>
     </div>
   );