Icshwi 8839 gitlab commitlist upgrade

src/api/SwaggerApi.js

@@ -713,6 +713,12 @@ export function useTagsAndCommitIds(onError) {
   return useAsync({ fcn: method, call: false, onError: onError, init: [] });
 }
 
+export function useSearchTagsAndCommitsByRef(onError) {
+  const api = useContext(apiContext);
+  const method = useCallAndUnpack((gitProjectId, reference) => api.apis.Git.searchTagsAndCommitsByRefName({projectId : gitProjectId, reference: reference}), unpackTagAndCommitIdList)
+  return useAsync({ fcn: method, call: false, onError: onError, init: [] });
+}
+
 export function unpackIOCStatistics(statistics) {
   return { ...statistics };
 }

src/components/IOC/IOCDeployDialog.js

 import React, { useEffect, useState } from "react";
-import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, Typography, makeStyles } from "@material-ui/core";
+import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, Typography, makeStyles, Tooltip } from "@material-ui/core";
 import { Autocomplete, Alert } from "@material-ui/lab";
-import { useCSEntrySearch, useTagsAndCommitIds } from "../../api/SwaggerApi";
+import { useCSEntrySearch, useSearchTagsAndCommitsByRef } from "../../api/SwaggerApi";
 import { useTypingTimer } from "../common/SearchBoxFilter/TypingTimer";
+import {formatDate} from "../common/Helper";
 
 const useStyles = makeStyles((theme) => ({
   textField: {
@@ -22,7 +23,7 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy
   const [hosts, getHosts] = useCSEntrySearch();
   const [host, setHost] = useState(null);
   const [query, onHostKeyUp] = useTypingTimer({interval: 500});
-  const [tagOrCommitId, getTagOrCommitId] = useTagsAndCommitIds(onError);
+  const [tagOrCommitId, getTagOrCommitId] = useSearchTagsAndCommitsByRef(onError);
   const [gitRepo, setGitRepo] = useState(init.git || "");
   const [gitVersion, setGitVersion] = useState(init.version || "");
   const gitProjectId = init.gitProjectId;
@@ -31,8 +32,6 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy
     setOpen(false);
   };
 
-  console.log({...init});
-
   useEffect(() => getHosts(`fqdn:"${query}"`), [query, getHosts, getTagOrCommitId]);
 
   const onSubmit = (event) => {
@@ -48,6 +47,29 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy
       hostCSEntryId: host ? parseInt(host.csEntryHost.id) : (init.csEntryHost ? init.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"}}>
+            <Typography style={{ fontFamily: "monospace",  fontWeight:"bolder", 
+            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
+              {option.shortReference}
+            </Typography>
+          </td>
+          <td style={{ width: "1em" }}>
+            -
+          </td >
+          <td>
+            <Typography style={{ fontFamily: "monospace", display: 'inline-block' }}>
+              {formatDate(option.commitDate)}
+            </Typography>
+          </td>
+        </tr>
+      </table> 
+      )}
+
   return (
     <Dialog open={open} onClose={handleClose}>
       <form onSubmit={onSubmit}>
@@ -64,11 +86,26 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy
             options={tagOrCommitId}
             defaultValue = { init.version ? {
               "reference": init.version,
-              "shortReference": init.shortVersion
+              "shortReference": init.shortVersion ? init.shortVersion : init.version
             } : null }
             onFocus={(event) => {getTagOrCommitId(gitProjectId);}}
-            getOptionLabel={(option) => {return option.shortReference}}
-            onChange={(event, value, reason) => {setGitVersion(value?.reference); resetError();}}
+            getOptionLabel={(option) => {
+              return option.shortReference;
+            }}
+            renderOption={(option) => {
+              return (
+              <Tooltip title = {option.description}>
+                <div>
+                  {createOptionTags(option)}
+                </div>
+              </Tooltip>
+              )}}
+            onChange={(event, value, reason) => {
+              setGitVersion(value?.reference); 
+              resetError(); 
+              getTagOrCommitId(gitProjectId, value?.reference);
+            }}
+            onInputChange={(event, value, reason) => { getTagOrCommitId(gitProjectId, value);}}
             disabled={(!gitRepo) || (gitRepo.trim() === "")}
             renderInput={(params) => <TextField {...params} label="Git reference" variant="outlined" fullWidth required />}
           />
@@ -79,7 +116,7 @@ export function IOCDeployDialog({ open, setOpen, submitCallback, hasActiveDeploy
             id="host"
             options={hosts.hostList}
             defaultValue = { init }
-            getOptionLabel={option => {console.log(option); return option?.csEntryHost?.fqdn}}
+            getOptionLabel={option => {return option?.csEntryHost?.fqdn}}
             renderInput={(params) => <TextField {...params} label="host" variant="outlined" required/>}
             onChange={(event, value, reason) => {setHost(value); resetError();}}
             onInputChange={(event, value, reason) => {event && onHostKeyUp(event.nativeEvent)}}