diff --git a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.tsx similarity index 63% rename from src/components/IOC/IOCDeployDialog/IOCDeployDialog.js rename to src/components/IOC/IOCDeployDialog/IOCDeployDialog.tsx index e7619cd51fe2bb796d69067aac42b85f093825ee..c44efba1b724c85c3e386dea42aacc6df87a047b 100644 --- a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js +++ b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.tsx @@ -1,4 +1,4 @@ -import { useCallback, useContext, useEffect, useState, useMemo } from "react"; +import { useCallback, useEffect, useState, useMemo } from "react"; import { Button, TextField, @@ -8,12 +8,43 @@ import { Alert, Stack } from "@mui/material"; -import { apiContext } from "../../../api/DeployApi"; +import { Dialog, GitRefAutocomplete } from "@ess-ics/ce-ui-common"; import { - useAPIMethod, - Dialog, - GitRefAutocomplete -} from "@ess-ics/ce-ui-common"; + GitReference, + HostInfoWithId, + useLazyListHostsQuery, + useLazyListTagsAndCommitIdsQuery +} from "../../../store/deployApi"; +import { getErrorMessage } from "../../common/Helper"; +import { FormElements } from "../../../types/common"; + +interface DeployIocFormDefaults { + name: string; + description: string; + git: string; + gitProjectId: number; + reference?: string; + short_reference?: string; + netBoxHost?: { + fqdn: string; + hostId: string; + }; +} + +interface IOCDeployDialogProps { + open: boolean; + setOpen: (open: boolean) => void; + iocId: string; + submitCallback: (arg0: object, arg1: object) => void; + hasActiveDeployment: boolean; + deployIocFormDefaults: DeployIocFormDefaults; + error: string; + resetError: () => void; + buttonDisabled: boolean; + setButtonDisabled: (buttonDisabled: boolean) => void; +} + +type SearchMethodConstants = "EQUALS" | "CONTAINS"; export function IOCDeployDialog({ open, @@ -21,44 +52,36 @@ export function IOCDeployDialog({ iocId, submitCallback, hasActiveDeployment, - deployIocFormDefaults = {}, + deployIocFormDefaults, error, resetError, buttonDisabled, setButtonDisabled -}) { - const client = useContext(apiContext); - - const { - value: hosts, - wrapper: getHosts, - loading: loadingHosts - } = useAPIMethod({ - fcn: client.apis.Hosts.listHosts, - call: false - }); - - const { - value: tagOrCommitId, - wrapper: callGetTagOrCommitId, - loading: loadingTagsAndCommitIds, - error: tagOrCommitIdError - } = useAPIMethod({ - fcn: client.apis.Git.listTagsAndCommitIds, - call: false, - init: [] - }); - - const getTagOrCommitId = useCallback( - (gitProjectId, reference, includeAllReference, searchMethod) => { - callGetTagOrCommitId({ - project_id: gitProjectId, - reference: reference, - include_all_reference: includeAllReference, - search_method: searchMethod +}: IOCDeployDialogProps) { + const [getHosts, { data: hosts, isFetching: loadingHosts }] = + useLazyListHostsQuery(); + const [ + callgetTagOrCommitIds, + { + data: tagOrCommitIds = [], + isFetching: loadingTagsAndCommitIds, + error: tagOrCommitIdsError + } + ] = useLazyListTagsAndCommitIdsQuery(); + + const getTagOrCommitIds = useCallback( + ( + gitProjectId: number, + reference: string, + searchMethod: SearchMethodConstants + ) => { + callgetTagOrCommitIds({ + projectId: gitProjectId, + reference, + searchMethod }); }, - [callGetTagOrCommitId] + [callgetTagOrCommitIds] ); const initHost = useMemo( @@ -71,29 +94,32 @@ export function IOCDeployDialog({ const [host, setHost] = useState(initHost); const [query, setQuery] = useState(""); - const [gitRepo, setGitRepo] = useState(deployIocFormDefaults.git || ""); - const [revision, setRevision] = useState(deployIocFormDefaults); + const [gitRepo, setGitRepo] = useState(deployIocFormDefaults.git); + const [revision, setRevision] = useState(deployIocFormDefaults.reference); const gitProjectId = deployIocFormDefaults.gitProjectId; + const hasHostData = host?.hostId || host?.fqdn; const handleClose = () => { setOpen(false); + setHost(initHost); resetError(); }; useEffect(() => { - if (query && query.length > 2) { + if (!hasHostData && query && query.length > 2) { getHosts({ text: `${query}` }); } }, [query, getHosts]); useEffect(() => { - getTagOrCommitId(gitProjectId, "", false, "CONTAINS"); - }, [gitProjectId, getTagOrCommitId]); + getTagOrCommitIds(gitProjectId, "", "CONTAINS"); + }, [gitProjectId, getTagOrCommitIds]); - const onSubmit = (event) => { + const onSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); setButtonDisabled(true); - const { git: gitText } = event.currentTarget.elements; + const { git: gitText } = event.currentTarget + .elements as FormElements<"git">; const git = gitText.value; submitCallback( @@ -103,7 +129,7 @@ export function IOCDeployDialog({ { requestBody: { sourceUrl: git, - sourceVersion: revision.reference, + sourceVersion: revision, hostId: host.hostId, type: "DEPLOY" } @@ -146,24 +172,26 @@ export function IOCDeployDialog({ <GitRefAutocomplete id="version" label="Revision" - options={tagOrCommitId} + options={tagOrCommitIds} loading={loadingTagsAndCommitIds} disabled={!gitRepo || gitRepo.trim() === ""} autocompleteProps={{ autoSelect: false, - defaultValue: tagOrCommitId.find( + defaultValue: tagOrCommitIds.find( (tagOrCommit) => tagOrCommit.reference === deployIocFormDefaults.reference ) }} - onGitQueryValueSelect={(_, value) => { - setRevision(value); + onGitQueryValueSelect={( + _: React.SyntheticEvent<Element, Event>, + value: GitReference + ) => { + setRevision(value?.reference); resetError(); }} textFieldProps={{ - helperText: tagOrCommitIdError - ? `Error: ${tagOrCommitId?.message}` - : "" + helperText: + tagOrCommitIdsError && getErrorMessage(tagOrCommitIdsError) }} /> @@ -199,11 +227,11 @@ export function IOCDeployDialog({ }} /> )} - onChange={(_event, value) => { - setHost(value); + onChange={(_, value: HostInfoWithId | null) => { + setHost({ fqdn: value?.fqdn, hostId: value?.hostId }); resetError(); }} - onInputChange={(_event, value) => setQuery(value)} + onInputChange={(_, value) => setQuery(value)} disabled={hasActiveDeployment} autoSelect filterOptions={(options) => options} diff --git a/src/types/common.ts b/src/types/common.ts index dc8ab7a1268448a15da84468c867f3d91a77d189..4f06d5aa1d90b463cc89a81392f32b050189c11c 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -44,3 +44,6 @@ export interface ApiResult<T> { error?: ApiError; data?: T; } + +export type FormElements<U extends string> = HTMLFormControlsCollection & + Record<U, HTMLInputElement>;