Refactoring the repoSettings view (#398)

Author: Noah Lee

ui/src/views/Repo.tsx

@@ -13,7 +13,7 @@ import RepoHome from './RepoHome'
 import RepoLock from "./RepoLock";
 import RepoDeploy from './RepoDeploy'
 import RepoRollabck from './RepoRollback'
-import RepoSettings from "./RepoSettings"
+import RepoSettings from "./repoSettings"
 
 interface Params {
     namespace: string

ui/src/views/RepoSettings.tsx

@@ -0,0 +1,83 @@
+import { shallowEqual } from "react-redux";
+import { Form, Input, Button, Space, Typography } from "antd"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { save, deactivate, repoSettingsSlice as slice } from "../../redux/repoSettings"
+import { RequestStatus } from "../../models"
+
+export default function RepoSettingForm(): JSX.Element {
+    const { repo, saving } = useAppSelector(state => state.repoSettings, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    const layout = {
+      labelCol: { span: 5},
+      wrapperCol: { span: 12 },
+    };
+
+    const submitLayout = {
+      wrapperCol: { offset: 5, span: 12 },
+    };
+
+    const onClickFinish = (values: any) => {
+        dispatch(slice.actions.setConfigPath(values.config))
+        dispatch(save())
+    }
+
+    const onClickDeactivate = () => {
+        dispatch(deactivate())
+    }
+
+    const initialValues = {
+        "config": repo?.configPath
+    }
+
+    return (
+        <Form
+            name="setting"
+            initialValues={initialValues}
+            onFinish={onClickFinish}
+        >
+            <Form.Item
+                label="Config"
+                {...layout}
+            >
+                <Space>
+                    <Form.Item
+                        name="config"
+                        rules={[{required: true}]}
+                        noStyle
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Typography.Link target="_blank" href={`/link/${repo?.namespace}/${repo?.name}/config`}>
+                        Link
+                    </Typography.Link>
+                </Space>
+            </Form.Item>
+            <Form.Item {...submitLayout}>
+                <Form.Item noStyle>
+                    <Button 
+                        loading={saving === RequestStatus.Pending}
+                        type="primary" 
+                        htmlType="submit"
+                    >
+                        Submit
+                    </Button>
+                </Form.Item>
+            </Form.Item>
+            <Form.Item {...submitLayout}>
+                <Form.Item noStyle>
+                    <Space>
+                        <Button
+                            danger
+                            type="primary"
+                            onClick={onClickDeactivate}
+                        >
+                            DEACTIVATE
+                        </Button>
+                    </Space>
+                </Form.Item>
+            </Form.Item>
+        </Form>
+    )
+}

ui/src/views/repoSettings/SettingsForm.tsx

@@ -0,0 +1,41 @@
+import { useEffect  } from "react";
+import { useParams } from "react-router-dom";
+import { shallowEqual } from "react-redux";
+import { PageHeader } from "antd"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { init } from "../../redux/repoSettings"
+
+import SettingsForm from "./SettingsForm"
+
+interface Params {
+    namespace: string
+    name: string
+}
+
+export default function RepoSettings(): JSX.Element {
+    const { namespace, name } = useParams<Params>()
+    const { repo } = useAppSelector(state => state.repoSettings, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        const f = async () => {
+            await dispatch(init({namespace, name}))
+        }
+        f()
+        // eslint-disable-next-line
+    }, [dispatch])
+
+    return (
+        <div>
+            <div>
+                <PageHeader title="Settings"/>
+            </div>
+            <div>
+                {(repo)?
+                    <SettingsForm />
+                    :<></>}
+            </div>
+        </div>
+    )
+}