From 4a2bed935d22c4a08e22e1d5683cee97353e1936 Mon Sep 17 00:00:00 2001 From: noah Date: Wed, 6 Apr 2022 21:12:36 +0900 Subject: [PATCH] Separate the state from the `repoDeploy` view --- ui/src/views/Repo.tsx | 2 +- .../repoDeploy}/DeployForm.tsx | 10 +- .../repoDeploy}/DynamicPayloadModal.tsx | 2 +- .../{RepoDeploy.tsx => repoDeploy/index.tsx} | 117 ++++++++++++++---- ui/src/views/repoHome/ActivityLogs.tsx | 2 +- 5 files changed, 99 insertions(+), 34 deletions(-) rename ui/src/{components => views/repoDeploy}/DeployForm.tsx (97%) rename ui/src/{components => views/repoDeploy}/DynamicPayloadModal.tsx (99%) rename ui/src/views/{RepoDeploy.tsx => repoDeploy/index.tsx} (68%) diff --git a/ui/src/views/Repo.tsx b/ui/src/views/Repo.tsx index 63f50fec..c9e45c05 100644 --- a/ui/src/views/Repo.tsx +++ b/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" diff --git a/ui/src/components/DeployForm.tsx b/ui/src/views/repoDeploy/DeployForm.tsx similarity index 97% rename from ui/src/components/DeployForm.tsx rename to ui/src/views/repoDeploy/DeployForm.tsx index ce162ab5..9cf74a13 100644 --- a/ui/src/components/DeployForm.tsx +++ b/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 diff --git a/ui/src/components/DynamicPayloadModal.tsx b/ui/src/views/repoDeploy/DynamicPayloadModal.tsx similarity index 99% rename from ui/src/components/DynamicPayloadModal.tsx rename to ui/src/views/repoDeploy/DynamicPayloadModal.tsx index 63648fb7..d4c4a733 100644 --- a/ui/src/components/DynamicPayloadModal.tsx +++ b/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 diff --git a/ui/src/views/RepoDeploy.tsx b/ui/src/views/repoDeploy/index.tsx similarity index 68% rename from ui/src/views/RepoDeploy.tsx rename to ui/src/views/repoDeploy/index.tsx index 8a53cc11..467e1421 100644 --- a/ui/src/views/RepoDeploy.tsx +++ b/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() 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 ( + + ) +} + +interface RepoDeployProps extends + DeployFormProps, + Omit { + 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 (
@@ -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)? : diff --git a/ui/src/views/repoHome/ActivityLogs.tsx b/ui/src/views/repoHome/ActivityLogs.tsx index 6b5754e5..196b0837 100644 --- a/ui/src/views/repoHome/ActivityLogs.tsx +++ b/ui/src/views/repoHome/ActivityLogs.tsx @@ -20,7 +20,7 @@ export default function ActivityLogs({ deployments }: ActivityLogsProps): JSX.El const dot = (d.status === DeploymentStatusEnum.Running)? : - <> + null const avatar = return (