Merge pull request #2043 from porter-dev/master

Tag adding fix + Job deletion fix -> staging

dashboard/package.json

@@ -25,8 +25,8 @@
     "brace": "^0.11.1",
     "clipboard": "^2.0.8",
     "cohere-js": "^1.0.19",
-    "color": "^4.2.3",
     "cohere-sentry": "^1.0.1",
+    "color": "^4.2.3",
     "core-js": "^3.16.1",
     "cron-parser": "^4.3.0",
     "cron-validator": "^1.3.1",
@@ -74,6 +74,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/color": "^3.0.3",
     "@types/d3-array": "^2.9.0",
     "@types/d3-time-format": "^3.0.0",
     "@types/jest": "^24.0.0",

dashboard/src/components/SearchSelector.tsx

@@ -35,6 +35,7 @@ const SearchSelector = ({
   const handleOptionClick = (e: any, option: any) => {
     setIsExpanded(false);
     onSelect(option);
+    setFilter("");
   };
 
   const getLabel = (option: any) => {
@@ -83,12 +84,12 @@ const SearchSelector = ({
             <Dropdown dropdownMaxHeight={dropdownMaxHeight}>
               {!filteredOptions.length ? (
                 <>
-                { !renderAddButton ? (
-                  <DropdownLabel>
-                    {noOptionsText || "No options available for this filter"}
-                  </DropdownLabel>
+                  {!renderAddButton ? (
+                    <DropdownLabel>
+                      {noOptionsText || "No options available for this filter"}
+                    </DropdownLabel>
                   ) : (
-                    <div 
+                    <div
                       onMouseDown={(e) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -97,13 +98,12 @@ const SearchSelector = ({
                     >
                       {renderAddButton()}
                     </div>
-                  )
-                }
+                  )}
                 </>
               ) : (
                 <>
                   {renderAddButton && (
-                    <div 
+                    <div
                       onMouseDown={(e) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -122,7 +122,6 @@ const SearchSelector = ({
                       onMouseDown={(e) => {
                         e.stopPropagation();
                         e.preventDefault();
-                        setFilter("");
                       }}
                       onClick={(e) => handleOptionClick(e, option)}
                     >
@@ -227,19 +226,3 @@ const Option = styled.div`
     background: #ffffff22;
   }
 `;
-
-const Icon = styled.div`
-  height: 20px;
-  width: 30px;
-  margin-left: -5px;
-  margin-right: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: visible;
-
-  > img {
-    height: 18px;
-    width: auto;
-  }
-`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/TagSelector.tsx

@@ -100,21 +100,6 @@ const TagSelector = ({ onSave, release }: Props) => {
     return hasAddedSomething || hasDeletedSomething;
   }, [values, release]);
 
-  /*
-          { 
-          values.length === 0 && "This application has no tags"
-        }
-        <Wrapper>
-          <Tooltip title="Create a new tag">
-            <AddButton
-              className="material-icons-outlined"
-              onClick={() => setOpenModal((prev) => !prev)}
-            >
-              add
-            </AddButton>
-          </Tooltip>
-        </Wrapper>
-  */
   return (
     <>
       {openModal ? (
@@ -145,9 +130,15 @@ const TagSelector = ({ onSave, release }: Props) => {
       <SearchSelector
         options={availableTags}
         dropdownLabel="Select a tag"
-        renderAddButton={() => <AddTagButton onClick={(e) => {
-          setOpenModal((prev) => !prev);
-        }}>+ Create a new tag</AddTagButton>}
+        renderAddButton={() => (
+          <AddTagButton
+            onClick={(e) => {
+              setOpenModal((prev) => !prev);
+            }}
+          >
+            + Create a new tag
+          </AddTagButton>
+        )}
         filterBy="name"
         onSelect={(value) => {
           console.log(value);
@@ -191,26 +182,6 @@ const AddTagButton = styled.div`
   }
 `;
 
-const Wrapper = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-`;
-
-const TagSelectorWrapper = styled.div`
-  position: absolute;
-  bottom: -260px;
-  right: 0;
-  width: 330px;
-  border-radius: 5px;
-  height: 250px;
-  background: #33353b;
-  border-radius: 5px;
-  z-index: 999;
-  overflow-y: auto;
-  box-shadow: 0px 4px 15px 0px #000000aa;
-`;
-
 const Br = styled.div`
   width: 100%;
   height: 10px;
@@ -325,36 +296,14 @@ const Flex = styled.div`
   position: relative;
 `;
 
-const AddButton = styled.div`
-  border-radius: 50%;
-  border: 1px solid #ffffff11;
-  padding: 5px;
-  height: 20px;
-  width: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 10px;
-  margin-top: 2px;
-  background: #ffffff11;
-  color: #ffffff88;
-  font-size: 18px;
-  :hover {
-    background: #ffffff22;
-    color: #ffffff;
-    cursor: pointer;
-  }
-`;
-
 const Tag = styled.div<{ color: string }>`
   display: inline-flex;
   color: ${(props) => Color(props.color).darken(0.4).string() || "inherit"};
   user-select: none;
-  border: 1px solid ${props => Color(props.color).darken(0.4).string()};
+  border: 1px solid ${(props) => Color(props.color).darken(0.4).string()};
   border-radius: 5px;
   padding: 4px 8px;
   position: relative;
-  padding-right: 24px;
   margin-bottom: 20px;
   text-align: center;
   align-items: center;
@@ -369,9 +318,6 @@ const Tag = styled.div<{ color: string }>`
   }
 
   > .material-icons {
-    position: absolute;
-    top: 4px;
-    right: 4px;
     font-size: 16px;
     :hover {
       cursor: pointer;

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobList.tsx

@@ -26,7 +26,6 @@ const JobListFC = (props: PropsType): JSX.Element => {
     setCurrentOverlay,
     setCurrentError,
   } = useContext(Context);
-  const [deletionCandidate, setDeletionCandidate] = useState(null);
   const [deletionJob, setDeletionJob] = useState(null);
 
   const {
@@ -36,8 +35,6 @@ const JobListFC = (props: PropsType): JSX.Element => {
     page,
     prevPage,
     totalPages,
-    pageSize,
-    setPageSize,
     canNextPage,
     canPreviousPage,
   } = usePagination({
@@ -45,8 +42,7 @@ const JobListFC = (props: PropsType): JSX.Element => {
     initialPageSize: 30,
   });
 
-  const deleteJob = () => {
-    let job = deletionCandidate;
+  const deleteJob = (job: any) => {
     setCurrentOverlay(null);
     api
       .deleteJob(
@@ -60,8 +56,7 @@ const JobListFC = (props: PropsType): JSX.Element => {
         }
       )
       .then((res) => {
-        setDeletionJob(deletionCandidate);
-        setDeletionCandidate(null);
+        setDeletionJob(job);
       })
       .catch((err) => {
         let parsedErr = err?.response?.data?.error;
@@ -69,6 +64,9 @@ const JobListFC = (props: PropsType): JSX.Element => {
           err = parsedErr;
         }
         setCurrentError(err);
+      })
+      .finally(() => {
+        setCurrentOverlay(null);
       });
   };
 
@@ -95,14 +93,10 @@ const JobListFC = (props: PropsType): JSX.Element => {
                 expandJob={props.expandJob}
                 job={job}
                 handleDelete={() => {
-                  setDeletionCandidate(job);
                   setCurrentOverlay({
                     message: "Are you sure you want to delete this job run?",
-                    onYes: deleteJob,
-                    onNo: () => {
-                      setDeletionCandidate(null);
-                      setCurrentOverlay(null);
-                    },
+                    onYes: () => deleteJob(job),
+                    onNo: () => setCurrentOverlay(null),
                   });
                 }}
                 deleting={deletionJob?.metadata?.name == job.metadata?.name}

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/useJobs.ts

@@ -236,51 +236,6 @@ export const useJobs = (chart: ChartType) => {
     setSelectedJob(job);
   };
 
-  // useEffect(() => {
-  //   let isSubscribed = true;
-
-  //   if (!chart) {
-  //     return () => {
-  //       isSubscribed = false;
-  //     };
-  //   }
-
-  //   if (
-  //     previousChart?.name === chart?.name &&
-  //     previousChart?.namespace === chart?.namespace
-  //   ) {
-  //     return () => {
-  //       isSubscribed = false;
-  //     };
-  //   }
-
-  //   setStatus("loading");
-  //   const newestImage = chart?.config?.image?.repository;
-
-  //   setHasPorterImageTemplate(PORTER_IMAGE_TEMPLATES.includes(newestImage));
-
-  //   api
-  //     .getJobs(
-  //       "<token>",
-  //       {},
-  //       {
-  //         id: currentProject?.id,
-  //         cluster_id: currentCluster?.id,
-  //         namespace: chart.namespace,
-  //         release_name: chart.name,
-  //       }
-  //     )
-  //     .then((res) => {
-  //       if (isSubscribed) {
-  //         sortJobsAndSave(res.data);
-  //         setStatus("ready");
-  //       }
-  //     });
-  //   return () => {
-  //     isSubscribed = false;
-  //   };
-  // }, [chart]);
-
   useEffect(() => {
     if (!chart || !chart.namespace || !chart.name) {
       return () => {};
@@ -406,9 +361,6 @@ export const useJobs = (chart: ChartType) => {
           err = parsedErr;
         }
 
-        // this.setState({
-        //   saveValuesStatus: parsedErr,
-        // });
         setTriggerRunStatus("Couldn't trigger a new run for this job.");
         setTimeout(() => setTriggerRunStatus(""), 500);
         setCurrentError(parsedErr);