From 6c4e21b396f12ff7ad459f0ea884422adbbc1a4b Mon Sep 17 00:00:00 2001
From: Christina Jenks <christina.jenks@ess.eu>
Date: Tue, 19 Mar 2024 08:30:54 +0000
Subject: [PATCH] CE-2405: replace git ref selector with common component
---
package-lock.json | 14 +-
package.json | 2 +-
src/components/IOC/DeployIOC/DeployIOC.js | 4 +-
.../IOC/IOCDeployDialog/IOCDeployDialog.js | 136 +++++-------------
src/components/IOC/IOCManage/IOCManage.js | 11 +-
5 files changed, 49 insertions(+), 118 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 790121bc..0ffc373f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "^4.10.0",
+ "@ess-ics/ce-ui-common": "^4.11.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
@@ -3023,9 +3023,9 @@
}
},
"node_modules/@ess-ics/ce-ui-common": {
- "version": "4.10.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.10.0.tgz",
- "integrity": "sha1-hKEwWLHk409pHzq/DBOlBQj5tv8=",
+ "version": "4.11.0",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.11.0.tgz",
+ "integrity": "sha1-fzwY1y6ZV+LEtULgSFcwjR8qKrQ=",
"dependencies": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
@@ -38829,9 +38829,9 @@
"dev": true
},
"@ess-ics/ce-ui-common": {
- "version": "4.10.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.10.0.tgz",
- "integrity": "sha1-hKEwWLHk409pHzq/DBOlBQj5tv8=",
+ "version": "4.11.0",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-4.11.0.tgz",
+ "integrity": "sha1-fzwY1y6ZV+LEtULgSFcwjR8qKrQ=",
"requires": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index ffa2ada3..c47b973d 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "^4.10.0",
+ "@ess-ics/ce-ui-common": "^4.11.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
diff --git a/src/components/IOC/DeployIOC/DeployIOC.js b/src/components/IOC/DeployIOC/DeployIOC.js
index 85422cb3..613ff501 100644
--- a/src/components/IOC/DeployIOC/DeployIOC.js
+++ b/src/components/IOC/DeployIOC/DeployIOC.js
@@ -11,7 +11,7 @@ export function DeployIOC({
submitCallback,
iocId,
hasActiveDeployment,
- init = {},
+ deployIocFormDefaults = {},
buttonDisabled,
setButtonDisabled
}) {
@@ -44,7 +44,7 @@ export function DeployIOC({
setOpen={setOpen}
iocId={iocId}
submitCallback={action}
- init={init}
+ deployIocFormDefaults={deployIocFormDefaults}
hasActiveDeployment={hasActiveDeployment}
error={error}
resetError={() => setError(null)}
diff --git a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
index c09e031a..8f5abdcb 100644
--- a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
+++ b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
@@ -3,7 +3,6 @@ import {
Button,
TextField,
Typography,
- Tooltip,
CircularProgress,
Autocomplete,
Alert,
@@ -15,8 +14,7 @@ import { apiContext } from "../../../api/DeployApi";
import {
useAPIMethod,
Dialog,
- EllipsisText,
- formatDateAndTime
+ GitRefAutocomplete
} from "@ess-ics/ce-ui-common";
export function IOCDeployDialog({
@@ -25,13 +23,14 @@ export function IOCDeployDialog({
iocId,
submitCallback,
hasActiveDeployment,
- init = {},
+ deployIocFormDefaults = {},
error,
resetError,
buttonDisabled,
setButtonDisabled
}) {
const client = useContext(apiContext);
+
const {
value: hosts,
wrapper: getHosts,
@@ -51,6 +50,7 @@ export function IOCDeployDialog({
call: false,
init: []
});
+
const getTagOrCommitId = useCallback(
(gitProjectId, reference, includeAllReference, searchMethod) => {
callGetTagOrCommitId({
@@ -63,15 +63,12 @@ export function IOCDeployDialog({
[callGetTagOrCommitId]
);
- const [host, setHost] = useState(init);
+ const [host, setHost] = useState(deployIocFormDefaults);
const [query, onHostKeyUp] = useTypingTimer({ interval: 500 });
-
- const [gitRepo, setGitRepo] = useState(init.git || "");
- const [gitVersion, setGitVersion] = useState(init.version || "");
- const [queryGitVersion, onGitVersionKeyUp] = useTypingTimer({
- interval: 500
- });
- const gitProjectId = init.gitProjectId;
+ const [gitRepo, setGitRepo] = useState(deployIocFormDefaults.git || "");
+ const [revision, setRevision] = useState(deployIocFormDefaults.version || "");
+ const [revisionQuery, onRevisionQueryChange] = useState("");
+ const gitProjectId = deployIocFormDefaults.gitProjectId;
const handleClose = () => {
setOpen(false);
@@ -80,9 +77,10 @@ export function IOCDeployDialog({
useEffect(() => {
getHosts({ query: transformHostQuery(`${query}`) });
}, [query, getHosts]);
+
useEffect(() => {
- getTagOrCommitId(gitProjectId, queryGitVersion, false, "CONTAINS");
- }, [queryGitVersion, gitProjectId, getTagOrCommitId]);
+ getTagOrCommitId(gitProjectId, revisionQuery, false, "CONTAINS");
+ }, [revisionQuery, gitProjectId, getTagOrCommitId]);
const onSubmit = (event) => {
event.preventDefault();
@@ -97,47 +95,17 @@ export function IOCDeployDialog({
{
requestBody: {
sourceUrl: git,
- sourceVersion: gitVersion,
+ sourceVersion: revision,
hostCSEntryId: host
? Number(host.csEntryHost.id)
- : init.csEntryHost
- ? init.csEntryHost.id
+ : deployIocFormDefaults.csEntryHost
+ ? deployIocFormDefaults.csEntryHost.id
: undefined
}
}
);
};
- // Creates, and formats tags/commitIds with dates into a table-format for using it in autocomplete
- function createOptionTags(option) {
- return (
- <table>
- <tr>
- <td style={{ width: "7em", maxWidth: "7em" }}>
- <EllipsisText
- TypographyProps={{
- fontFamily: "monospace",
- fontWeight: "bolder"
- }}
- disableTooltip
- >
- {option.shortReference}
- </EllipsisText>
- </td>
- <td style={{ width: "1em" }}>-</td>
- <td>
- <Typography
- fontFamily="monospace"
- display="inline-block"
- >
- {formatDateAndTime(option.commitDate)}
- </Typography>
- </td>
- </tr>
- </table>
- );
- }
-
return (
<Dialog
open={open}
@@ -161,7 +129,7 @@ export function IOCDeployDialog({
id="git"
label="Git repository"
variant="standard"
- defaultValue={init.git || ""}
+ defaultValue={deployIocFormDefaults.git || ""}
fullWidth
onChange={(event) => {
setGitRepo(event.target.value);
@@ -170,37 +138,23 @@ export function IOCDeployDialog({
disabled
required
/>
-
- <Autocomplete
- autoHighlight
+ <GitRefAutocomplete
id="version"
+ label="Revision"
options={tagOrCommitId}
loading={loadingTagsAndCommitIds}
- clearOnBlur={false}
defaultValue={
- init.version
+ deployIocFormDefaults.version
? {
- reference: init.version,
- shortReference: init.shortVersion
- ? init.shortVersion
- : init.version
+ reference: deployIocFormDefaults.version,
+ shortReference: deployIocFormDefaults.shortVersion
+ ? deployIocFormDefaults.shortVersion
+ : deployIocFormDefaults.version
}
: null
}
- getOptionLabel={(option) => {
- return option.shortReference;
- }}
- renderOption={(props, option) => {
- return (
- <li {...props}>
- <Tooltip title={option.description}>
- <div>{createOptionTags(option)}</div>
- </Tooltip>
- </li>
- );
- }}
- onChange={(event, value, reason) => {
- setGitVersion(value?.reference);
+ onGitQueryValueSelect={(value) => {
+ setRevision(value?.reference);
resetError();
getTagOrCommitId(
gitProjectId,
@@ -209,37 +163,13 @@ export function IOCDeployDialog({
"CONTAINS"
);
}}
- onInputChange={(event, value, reason) => {
- event && onGitVersionKeyUp(event.nativeEvent);
- }}
+ onGitQueryStringChange={onRevisionQueryChange}
disabled={!gitRepo || gitRepo.trim() === ""}
- renderInput={(params) => (
- <TextField
- {...params}
- label="Revision"
- variant="outlined"
- fullWidth
- required
- InputProps={{
- ...params.InputProps,
- endAdornment: (
- <React.Fragment>
- {loadingTagsAndCommitIds ? (
- <CircularProgress
- color="inherit"
- size={20}
- />
- ) : null}
- {params.InputProps.endAdornment}
- </React.Fragment>
- )
- }}
- helperText={
- tagOrCommitIdError ? `Error: ${tagOrCommitId?.message}` : ""
- }
- />
- )}
- autoSelect
+ textFieldProps={{
+ helperText: tagOrCommitIdError
+ ? `Error: ${tagOrCommitId?.message}`
+ : ""
+ }}
/>
<Autocomplete
@@ -248,7 +178,7 @@ export function IOCDeployDialog({
options={query ? hosts?.csEntryHosts ?? [] : []}
loading={loadingHosts}
clearOnBlur={false}
- defaultValue={init}
+ defaultValue={deployIocFormDefaults}
getOptionLabel={(option) => {
return option?.csEntryHost?.fqdn ?? "";
}}
@@ -311,7 +241,7 @@ export function IOCDeployDialog({
color="primary"
variant="contained"
type="submit"
- disabled={!host || !gitVersion}
+ disabled={!host || !revision || buttonDisabled}
>
Deploy
</Button>
diff --git a/src/components/IOC/IOCManage/IOCManage.js b/src/components/IOC/IOCManage/IOCManage.js
index 30899f91..45de0384 100644
--- a/src/components/IOC/IOCManage/IOCManage.js
+++ b/src/components/IOC/IOCManage/IOCManage.js
@@ -138,7 +138,7 @@ export function IOCManage({
if (ioc) {
const managedIOC = { ...ioc };
- const formInit = {
+ const deployIocFormDefaults = {
name: ioc.namingName,
description: ioc.description,
git: ioc.sourceUrl,
@@ -146,9 +146,10 @@ export function IOCManage({
};
if (ioc.activeDeployment) {
- formInit.version = ioc.activeDeployment.sourceVersion;
- formInit.shortVersion = ioc.activeDeployment.sourceVersionShort;
- formInit.csEntryHost = {
+ deployIocFormDefaults.version = ioc.activeDeployment.sourceVersion;
+ deployIocFormDefaults.shortVersion =
+ ioc.activeDeployment.sourceVersionShort;
+ deployIocFormDefaults.csEntryHost = {
fqdn: ioc.activeDeployment.host.fqdn,
id: ioc.activeDeployment.host.csEntryId
};
@@ -227,7 +228,7 @@ export function IOCManage({
open={deployDialogOpen}
setOpen={setDeployDialogOpen}
submitCallback={closeDeployModal}
- init={formInit}
+ defaultHost={deployIocFormDefaults}
iocId={ioc.id}
hasActiveDeployment={Boolean(ioc.activeDeployment)}
buttonDisabled={buttonDisabled}
--
GitLab