weaveworks · ahussein3 · Dec 4, 2023 · Nov 22, 2023 · Nov 23, 2023 · Nov 23, 2023
diff --git a/ui/components/InfoModal.tsx b/ui/components/InfoModal.tsx
@@ -15,25 +15,33 @@ const ClusterName = styled(Text)`
   padding: ${(props) => props.theme.spacing.base};
 `;
 
+const OverflowWrapper = styled.div`
+  overflow-y: scroll;
+`;
+
 function InfoModal({ searchedNamespaces, onCloseModal, open }: Props) {
   const onClose = () => onCloseModal(false);
 
   const content = (
-    <List>
-      {Object.entries(searchedNamespaces || []).map(
-        ([kind, clusterNamespacesList]) => (
-          <Fragment key={kind}>
-            <h2>kind: {kind}</h2>
-            {clusterNamespacesList?.map((clusterNamespaces) => (
-              <ListItem key={clusterNamespaces.clusterName}>
-                <ClusterName bold>{clusterNamespaces.clusterName}</ClusterName>
-                {clusterNamespaces.namespaces.join(", ")}
-              </ListItem>
-            ))}
-          </Fragment>
-        )
-      )}
-    </List>
+    <OverflowWrapper>
+      <List>
+        {Object.entries(searchedNamespaces || []).map(
+          ([kind, clusterNamespacesList]) => (
+            <Fragment key={kind}>
+              <h2>kind: {kind}</h2>
+              {clusterNamespacesList?.map((clusterNamespaces) => (
+                <ListItem key={clusterNamespaces.clusterName}>
+                  <ClusterName bold>
+                    {clusterNamespaces.clusterName}
+                  </ClusterName>
+                  {clusterNamespaces.namespaces.join(", ")}
+                </ListItem>
+              ))}
+            </Fragment>
+          )
+        )}
+      </List>
+    </OverflowWrapper>
   );
 
   return (

diff --git a/ui/components/Modal.tsx b/ui/components/Modal.tsx
@@ -1,15 +1,14 @@
 import MaterialModal from "@material-ui/core/Modal";
 import * as React from "react";
 import styled from "styled-components";
-import Button from "./Button";
+import { IconButton } from "./Button";
 import Flex from "./Flex";
+import Icon, { IconType } from "./Icon";
 
 /** Modal Properties */
 export interface Props {
   /** CSS MUI Overrides or other styling. (for the `<div />` that wraps Modal) */
   className?: string;
-  /** CSS MUI Overrides or other styling. (for the Modal `<Body />`) */
-  bodyClassName?: string;
   /** state variable to display Modal */
   open: boolean;
   /** Close event handler function */
@@ -39,42 +38,41 @@ export const Body = styled.div`
   max-height: 90vh;
 `;
 
-export const Content = styled.div`
-  overflow-y: scroll;
-`;
-
 /** Form Modal */
 function UnstyledModal({
   className,
-  bodyClassName,
   open,
   onClose,
   title,
   description,
   children,
 }: Props) {
   return (
-    <div className={className}>
-      <MaterialModal
-        open={open}
-        onClose={onClose}
-        aria-labelledby="simple-modal-title"
-        aria-describedby="simple-modal-description"
-      >
-        <Body className={bodyClassName}>
-          <Flex column>
+    <MaterialModal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="simple-modal-title"
+      aria-describedby="simple-modal-description"
+    >
+      <Body className={className}>
+        <Flex column>
+          <Flex row wide align between>
             <h2 id="simple-modal-title">{title}</h2>
-            <p id="simple-modal-description">{description}</p>
+            <IconButton
+              onClick={onClose}
+              className={className}
+              variant="text"
+              color="inherit"
+            >
+              <Icon type={IconType.ClearIcon} size="medium" color="neutral30" />
+            </IconButton>
           </Flex>
-          <Content>{children}</Content>
-          <Flex wide end>
-            <Button onClick={onClose} color="inherit" variant="text">
-              Close
-            </Button>
-          </Flex>
-        </Body>
-      </MaterialModal>
-    </div>
+
+          <p id="simple-modal-description">{description}</p>
+        </Flex>
+        {children}
+      </Body>
+    </MaterialModal>
   );
 }
 

diff --git a/ui/components/Sync/CheckboxActions.tsx b/ui/components/Sync/CheckboxActions.tsx
@@ -6,6 +6,7 @@ import { useSyncFluxObject } from "../../hooks/automations";
 import { useToggleSuspend } from "../../hooks/flux";
 import { ObjectRef } from "../../lib/api/core/types.pb";
 import { V2Routes } from "../../lib/types";
+import SuspendMessageModal from "./SuspendMessageModal";
 import SyncControls, { SyncType } from "./SyncControls";
 
 export const makeObjects = (checked: string[], rows: any[]): ObjectRef[] => {
@@ -31,18 +32,23 @@ const noSource = {
   [V2Routes.ImageUpdates]: true,
 };
 
-function createSuspendHandler(reqObjects: ObjectRef[], suspend: boolean) {
+function createSuspendHandler(
+  reqObjects: ObjectRef[],
+  suspend: boolean,
+  suspendMessage: string
+) {
   const result = useToggleSuspend(
     {
       objects: reqObjects,
       suspend: suspend,
+      comment: suspendMessage,
     },
     reqObjects[0]?.kind === "HelmRelease" ||
       reqObjects[0]?.kind === "Kustomization"
       ? "automations"
       : "sources"
   );
-  return () => result.mutateAsync();
+  return result;
 }
 
 type Props = {
@@ -53,6 +59,9 @@ type Props = {
 
 function CheckboxActions({ className, checked = [], rows = [] }: Props) {
   const [reqObjects, setReqObjects] = React.useState([]);
+  const [suspendMessageModalOpen, setSuspendMessageModalOpen] =
+    React.useState(false);
+  const [suspendMessage, setSuspendMessage] = React.useState("");
   const location = useLocation();
 
   React.useEffect(() => {
@@ -70,18 +79,31 @@ function CheckboxActions({ className, checked = [], rows = [] }: Props) {
   const disableButtons = !reqObjects[0];
 
   return (
-    <SyncControls
-      className={className}
-      hideSyncOptions={noSource[location.pathname]}
-      syncLoading={sync.isLoading}
-      syncDisabled={disableButtons}
-      suspendDisabled={disableButtons}
-      resumeDisabled={disableButtons}
-      tooltipSuffix=" selected"
-      onSyncClick={syncHandler}
-      onSuspendClick={createSuspendHandler(reqObjects, true)}
-      onResumeClick={createSuspendHandler(reqObjects, false)}
-    />
+    <>
+      <SyncControls
+        className={className}
+        hideSyncOptions={noSource[location.pathname]}
+        syncLoading={sync.isLoading}
+        syncDisabled={disableButtons}
+        suspendDisabled={disableButtons}
+        resumeDisabled={disableButtons}
+        tooltipSuffix=" selected"
+        onSyncClick={syncHandler}
+        onSuspendClick={() =>
+          setSuspendMessageModalOpen(!suspendMessageModalOpen)
+        }
+        onResumeClick={
+          createSuspendHandler(reqObjects, false, suspendMessage).mutateAsync
+        }
+      />
+      <SuspendMessageModal
+        open={suspendMessageModalOpen}
+        onCloseModal={setSuspendMessageModalOpen}
+        suspend={createSuspendHandler(reqObjects, true, suspendMessage)}
+        setSuspendMessage={setSuspendMessage}
+        suspendMessage={suspendMessage}
+      />
+    </>
   );
 }
 

diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
@@ -0,0 +1,80 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { UseMutationResult } from "react-query/react";
+import styled from "styled-components";
+import { ToggleSuspendResourceResponse } from "../../lib/api/core/core.pb";
+import Button from "../Button";
+import Flex from "../Flex";
+import Modal from "../Modal";
+
+export type Props = {
+  onCloseModal: Dispatch<SetStateAction<boolean>>;
+  open: boolean;
+  setSuspendMessage: Dispatch<SetStateAction<string>>;
+  suspend: UseMutationResult<ToggleSuspendResourceResponse>;
+  suspendMessage: string;
+  className?: string;
+};
+
+const MessageTextarea = styled.textarea`
+  width: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 100%;
+  border-radius: ${(props) => props.theme.spacing.xxs};
+  resize: none;
+  margin-bottom: ${(props) => props.theme.spacing.base};
+  padding: ${(props) => props.theme.spacing.xs};
+  &:focus {
+    outline: ${(props) => props.theme.colors.primary} solid 2px;
+  }
+`;
+
+function SuspendMessageModal({
+  className,
+  onCloseModal,
+  open,
+  setSuspendMessage,
+  suspend,
+  suspendMessage,
+}: Props) {
+  const closeHandler = () => {
+    setSuspendMessage("");
+    onCloseModal(false);
+  };
+  const suspendHandler = () => {
+    setSuspendMessage(suspendMessage);
+    suspend.mutateAsync({});
+    setSuspendMessage("");
+    onCloseModal(false);
+  };
+
+  const onClose = () => closeHandler();
+
+  const content = (
+    <>
+      <MessageTextarea
+        rows={5}
+        value={suspendMessage}
+        onChange={(ev) => setSuspendMessage(ev.target.value)}
+      ></MessageTextarea>
+      <Flex wide end>
+        <Button onClick={suspendHandler} color="inherit" variant="text">
+          Suspend
+        </Button>
+      </Flex>
+    </>
+  );
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Suspend Reason"
+      description="Add reason for suspending"
+      children={content}
+      className={className}
+    />
+  );
+}
+
+export default SuspendMessageModal;
diff --git a/ui/components/Sync/SyncActions.tsx b/ui/components/Sync/SyncActions.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { useSyncFluxObject } from "../../hooks/automations";
 import { useToggleSuspend } from "../../hooks/flux";
 import { Kind } from "../../lib/api/core/types.pb";
+import SuspendMessageModal from "./SuspendMessageModal";
 import SyncControls, { SyncType } from "./SyncControls";
 
 interface Props {
@@ -38,7 +39,9 @@ const SyncActions = ({
   const syncHandler = (syncType: SyncType) => {
     sync.mutateAsync({ withSource: syncType === SyncType.WithSource });
   };
-
+  const [suspendMessageModalOpen, setSuspendMessageModalOpen] =
+    React.useState(false);
+  const [suspendMessage, setSuspendMessage] = React.useState("");
   const objects = [
     {
       name,
@@ -52,6 +55,7 @@ const SyncActions = ({
     {
       objects: objects,
       suspend: true,
+      comment: suspendMessage,
     },
     "object"
   );
@@ -60,23 +64,35 @@ const SyncActions = ({
     {
       objects: objects,
       suspend: false,
+      comment: "",
     },
     "object"
   );
 
   return (
-    <SyncControls
-      className={className}
-      hideSyncOptions={hideSyncOptions}
-      syncLoading={sync.isLoading}
-      syncDisabled={suspended}
-      suspendDisabled={suspend.isLoading || suspended}
-      resumeDisabled={resume.isLoading || !suspended}
-      customActions={customActions}
-      onSyncClick={syncHandler}
-      onSuspendClick={() => suspend.mutateAsync()}
-      onResumeClick={() => resume.mutateAsync()}
-    />
+    <>
+      <SyncControls
+        className={className}
+        hideSyncOptions={hideSyncOptions}
+        syncLoading={sync.isLoading}
+        syncDisabled={suspended}
+        suspendDisabled={suspend.isLoading || suspended}
+        resumeDisabled={resume.isLoading || !suspended}
+        customActions={customActions}
+        onSyncClick={syncHandler}
+        onSuspendClick={() =>
+          setSuspendMessageModalOpen(!suspendMessageModalOpen)
+        }
+        onResumeClick={() => resume.mutateAsync()}
+      />
+      <SuspendMessageModal
+        open={suspendMessageModalOpen}
+        onCloseModal={setSuspendMessageModalOpen}
+        suspend={suspend}
+        setSuspendMessage={setSuspendMessage}
+        suspendMessage={suspendMessage}
+      />
+    </>
   );
 };