Separate the state from the repoDeploy view (#404)

Author: Noah Lee

ui/src/views/Repo.tsx

@@ -11,7 +11,7 @@ import ActivateButton from "../components/ActivateButton"
 import Main from './main'
 import RepoHome from './repoHome'
 import RepoLock from "./repoLock"
-import RepoDeploy from './RepoDeploy'
+import RepoDeploy from './repoDeploy'
 import RepoRollabck from './RepoRollback'
 import RepoSettings from "./repoSettings"
 

ui/src/components/DeployForm.tsx renamed to ui/src/views/repoDeploy/DeployForm.tsx

@@ -1,17 +1,19 @@
 import { useState } from "react"
 import { Form, Select, Radio, Button, Typography, Avatar, Tag as AntdTag } from "antd"
 
-import { Branch, Commit, Tag, Deployment, DeploymentType, Status, Env } from "../models"
+import { Branch, Commit, Tag, Deployment, DeploymentType, Status, Env } from "../../models"
 
-import CreatableSelect, {Option as Op} from "./CreatableSelect"
-import StatusStateIcon from "./StatusStateIcon"
+import CreatableSelect, {Option as Op} from "../../components/CreatableSelect"
+import StatusStateIcon from "../../components/StatusStateIcon"
 import moment from "moment"
 
 export type Option = Op
 
 const { Text } = Typography
 
-interface DeployFormProps {
+// TODO: Remove the set functions and
+// change it so that the component returns a value when submitting.
+export interface DeployFormProps {
     envs: Env[]
     onSelectEnv(env: Env): void
     onChangeType(type: DeploymentType): void

ui/src/components/DynamicPayloadModal.tsx renamed to ui/src/views/repoDeploy/DynamicPayloadModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, Form, Select, Input, InputNumber, Checkbox } from "antd"
 
-import { Env, DynamicPayloadInput, DynamicPayloadInputTypeEnum } from "../models"
+import { Env, DynamicPayloadInput, DynamicPayloadInputTypeEnum } from "../../models"
 
 export interface DynamicPayloadModalProps {
     visible: boolean

ui/src/views/RepoDeploy.tsx renamed to ui/src/views/repoDeploy/index.tsx

@@ -3,8 +3,8 @@ import { shallowEqual } from "react-redux";
 import { useParams } from "react-router-dom";
 import { PageHeader, Result, Button } from "antd";
 
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { DeploymentType, Branch, Commit, Tag, RequestStatus, Env } from "../models";
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { DeploymentType, Branch, Commit, Tag, RequestStatus, Env } from "../../models";
 import { 
     fetchConfig, 
     repoDeploySlice, 
@@ -21,20 +21,18 @@ import {
     searchCandidates,
     fetchUser,
     deploy
-} from "../redux/repoDeploy"
-
-import DeployForm, {Option} from "../components/DeployForm"
-import DynamicPayloadModal from "../components/DynamicPayloadModal";
+} from "../../redux/repoDeploy"
+import DeployForm, { DeployFormProps,  Option} from "./DeployForm"
+import DynamicPayloadModal, { DynamicPayloadModalProps } from "./DynamicPayloadModal"
 
 const { actions } = repoDeploySlice
 
-interface Params {
-    namespace: string
-    name: string
-}
+export default (): JSX.Element => {
+    const { namespace, name } = useParams<{
+        namespace: string
+        name: string
+    }>()
 
-export default function RepoDeploy(): JSX.Element {
-    const { namespace, name } = useParams<Params>()
     const { 
         display,
         config, 
@@ -48,9 +46,8 @@ export default function RepoDeploy(): JSX.Element {
         tags, 
         tagStatuses,
         deploying } = useAppSelector(state => state.repoDeploy, shallowEqual)
-    const dispatch = useAppDispatch()
 
-    const [payloadModalVisible, setPayloadModalVisible] = useState(false);
+    const dispatch = useAppDispatch()
 
     useEffect(() => {
         const f = async () => {
@@ -104,20 +101,11 @@ export default function RepoDeploy(): JSX.Element {
     }
 
     const onClickDeploy = () => {
-        if (env?.dynamicPayload?.enabled) {
-            setPayloadModalVisible(true)
-        } else {
-            dispatch(deploy(null))
-        }
+        dispatch(deploy(null))
     }
 
     const onClickDeployWithPayload = (values: any) => {
         dispatch(deploy(values))
-        setPayloadModalVisible(false)
-    }
-
-    const onClickCancel = () => {
-        setPayloadModalVisible(false)
     }
 
     if (!display) {
@@ -140,6 +128,81 @@ export default function RepoDeploy(): JSX.Element {
             />
         )
     }
+    return (
+        <RepoDeploy 
+            envs={envs}
+            onSelectEnv={onSelectEnv}
+            onChangeType={onChangeType}
+            currentDeployment={currentDeployment}
+            branches={branches}
+            onSelectBranch={onSelectBranch}
+            onClickAddBranch={onClickAddBranch}
+            branchStatuses={branchStatuses}
+            commits={commits}
+            onSelectCommit={onSelectCommit}
+            onClickAddCommit={onClickAddCommit}
+            commitStatuses={commitStatuses}
+            tags={tags}
+            onSelectTag={onSelectTag}
+            onClickAddTag={onClickAddTag}
+            tagStatuses={tagStatuses}
+            deploying={deploying === RequestStatus.Pending}
+            onClickDeploy={onClickDeploy}
+            env={env}
+            onClickOk={onClickDeployWithPayload}
+        />
+    )
+}
+
+interface RepoDeployProps extends 
+    DeployFormProps,
+    Omit<DynamicPayloadModalProps, "visible" | "env" | "onClickCancel"> {
+    env?: Env
+}
+
+function RepoDeploy({
+    // Properities for the DeployForm component.
+    envs, 
+    onSelectEnv,
+    onChangeType,
+    currentDeployment,
+    branches,
+    onSelectBranch,
+    onClickAddBranch,
+    branchStatuses,
+    commits,
+    onSelectCommit,
+    onClickAddCommit,
+    commitStatuses,
+    tags,
+    onSelectTag,
+    onClickAddTag,
+    tagStatuses,
+    deploying,
+    onClickDeploy,
+    // Properties for the DynamicPayloadModal component.
+    env,
+    onClickOk,
+}: RepoDeployProps): JSX.Element {
+
+    const [payloadModalVisible, setPayloadModalVisible] = useState(false);
+
+    const _onClickDeploy = () => {
+        if (env?.dynamicPayload?.enabled) {
+            setPayloadModalVisible(true)
+        } else {
+            onClickDeploy()
+        }
+    }
+
+    const _onClickOk = (values: any) => {
+        onClickOk(values)
+        setPayloadModalVisible(false)
+    }
+
+    const onClickCancel = () => {
+        setPayloadModalVisible(false)
+    }
 
     return (
         <div>
@@ -166,14 +229,14 @@ export default function RepoDeploy(): JSX.Element {
                     onSelectTag={onSelectTag}
                     onClickAddTag={onClickAddTag}
                     tagStatuses={tagStatuses}
-                    deploying={deploying === RequestStatus.Pending}
-                    onClickDeploy={onClickDeploy} 
+                    deploying={deploying}
+                    onClickDeploy={_onClickDeploy} 
                 />
                 {(env)? 
                     <DynamicPayloadModal
                         visible={payloadModalVisible}
                         env={env}
-                        onClickOk={onClickDeployWithPayload}
+                        onClickOk={_onClickOk}
                         onClickCancel={onClickCancel}
                     />
                     :

ui/src/views/repoHome/ActivityLogs.tsx

@@ -20,7 +20,7 @@ export default function ActivityLogs({ deployments }: ActivityLogsProps): JSX.El
                 const dot = (d.status === DeploymentStatusEnum.Running)? 
                     <SyncOutlined style={{color: "purple"}} spin />
                     : 
-                    <></>
+                    null
                 const avatar = <UserAvatar user={d.deployer} />
 
                 return (