From 09a85c8896aca7562fc88b53358def81877483f3 Mon Sep 17 00:00:00 2001
From: ahussein3 <ahmed.magdy@weave.works>
Date: Wed, 22 Nov 2023 19:45:17 +0200
Subject: [PATCH 1/9] init add comment to suspend action

---
 ui/components/Sync/SuspendMessageModal.tsx | 30 ++++++++++++++++++++++
 ui/components/Sync/SyncActions.tsx         |  1 +
 2 files changed, 31 insertions(+)
 create mode 100644 ui/components/Sync/SuspendMessageModal.tsx

diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
new file mode 100644
index 0000000000..1c1b925b12
--- /dev/null
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -0,0 +1,30 @@
+import React, { Dispatch, SetStateAction } from "react";
+import Modal from "../Modal";
+import Input from "../Input";
+
+export type Props = {
+  onCloseModal: Dispatch<SetStateAction<boolean>>;
+  open: boolean;
+};
+let suspendMessage ='';
+
+
+function SuspendMessageModal({ onCloseModal, open,  }: Props) {
+  const onClose = () => onCloseModal(false);
+
+  const content = (
+    <Input value={suspendMessage}></Input>
+  );
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Suspend message"
+      description="Add a suspend message"
+      children={content}
+    />
+  );
+}
+
+export default SuspendMessageModal;
diff --git a/ui/components/Sync/SyncActions.tsx b/ui/components/Sync/SyncActions.tsx
index 674888cec6..074b8e7741 100644
--- a/ui/components/Sync/SyncActions.tsx
+++ b/ui/components/Sync/SyncActions.tsx
@@ -52,6 +52,7 @@ const SyncActions = ({
     {
       objects: objects,
       suspend: true,
+      comment: "Suspended from UI",
     },
     "object"
   );

From 920e4b85f7305f0acc41edf194bf936731566b03 Mon Sep 17 00:00:00 2001
From: AMagdy <ahmed.magdy@weave.works>
Date: Thu, 23 Nov 2023 11:36:28 +0200
Subject: [PATCH 2/9] style trials

---
 ui/components/Sync/SuspendMessageModal.tsx | 51 ++++++++++++++++++----
 ui/components/Sync/SyncActions.tsx         | 43 ++++++++++++------
 2 files changed, 72 insertions(+), 22 deletions(-)

diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
index 1c1b925b12..c801e9e917 100644
--- a/ui/components/Sync/SuspendMessageModal.tsx
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -1,28 +1,63 @@
 import React, { Dispatch, SetStateAction } from "react";
 import Modal from "../Modal";
-import Input from "../Input";
+import { TextField } from "@material-ui/core";
+import styled from "styled-components";
 
 export type Props = {
   onCloseModal: Dispatch<SetStateAction<boolean>>;
   open: boolean;
+  setSuspendMessage: Dispatch<SetStateAction<string>>;
+  suspend: any;
+  suspendMessage: string;
 };
-let suspendMessage ='';
 
+const MessageModal = styled(Modal)`
+  &.test {
+    background-color: red;
+  }
+  & .test {
+    background-color: red;
+  }
+  .test {
+    background-color: red;
+  }
+  background-color: red;
+`;
 
-function SuspendMessageModal({ onCloseModal, open,  }: Props) {
-  const onClose = () => onCloseModal(false);
+function SuspendMessageModal({
+  onCloseModal,
+  open,
+  setSuspendMessage,
+  suspend,
+  suspendMessage,
+}: Props) {
+  const closeHandler = () => {
+    setSuspendMessage(suspendMessage);
+    suspend.mutateAsync();
+    setSuspendMessage("");
+    onCloseModal(false);
+  };
+
+  const onClose = () => closeHandler();
 
   const content = (
-    <Input value={suspendMessage}></Input>
+    <form>
+      <TextField
+        value={suspendMessage}
+        onChange={(ev) => setSuspendMessage(ev.target.value)}
+      ></TextField>
+    </form>
   );
 
   return (
-    <Modal
+    <MessageModal
       open={open}
       onClose={onClose}
-      title="Suspend message"
-      description="Add a suspend message"
+      title="Suspend Message"
+      description="Add reaasdasdson for suspending"
       children={content}
+      className="test"
+      bodyClassName="test"
     />
   );
 }
diff --git a/ui/components/Sync/SyncActions.tsx b/ui/components/Sync/SyncActions.tsx
index 074b8e7741..fb1d6d09a4 100644
--- a/ui/components/Sync/SyncActions.tsx
+++ b/ui/components/Sync/SyncActions.tsx
@@ -4,6 +4,7 @@ import { useSyncFluxObject } from "../../hooks/automations";
 import { useToggleSuspend } from "../../hooks/flux";
 import { Kind } from "../../lib/api/core/types.pb";
 import SyncControls, { SyncType } from "./SyncControls";
+import SuspendMessageModal from "./SuspendMessageModal";
 
 interface Props {
   name?: string;
@@ -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,7 +55,7 @@ const SyncActions = ({
     {
       objects: objects,
       suspend: true,
-      comment: "Suspended from UI",
+      comment: suspendMessage,
     },
     "object"
   );
@@ -61,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}
+      />
+    </>
   );
 };
 

From 89eda3a73aef492be84069ef6de46e79769c47ce Mon Sep 17 00:00:00 2001
From: Simon Howe <simon@weave.works>
Date: Thu, 23 Nov 2023 12:21:49 +0100
Subject: [PATCH 3/9] Remove className and rename bodyClassName -> className

- As the exisiting className doesn't really do anything with the modal
  as it using a portal and mounts the dom element elsewhere in the dom
  tree
---
 ui/components/InfoModal.tsx                | 38 ++++++++++-------
 ui/components/Modal.tsx                    | 47 +++++++++-------------
 ui/components/Sync/SuspendMessageModal.tsx | 18 +++------
 3 files changed, 47 insertions(+), 56 deletions(-)

diff --git a/ui/components/InfoModal.tsx b/ui/components/InfoModal.tsx
index d7ce0f0e84..35b5a3e3a2 100644
--- 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
index 7238edf73d..428a040e0c 100644
--- a/ui/components/Modal.tsx
+++ b/ui/components/Modal.tsx
@@ -8,8 +8,6 @@ import Flex from "./Flex";
 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,14 +37,9 @@ 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,
@@ -54,27 +47,25 @@ function UnstyledModal({
   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>
-            <h2 id="simple-modal-title">{title}</h2>
-            <p id="simple-modal-description">{description}</p>
-          </Flex>
-          <Content>{children}</Content>
-          <Flex wide end>
-            <Button onClick={onClose} color="inherit" variant="text">
-              Close
-            </Button>
-          </Flex>
-        </Body>
-      </MaterialModal>
-    </div>
+    <MaterialModal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="simple-modal-title"
+      aria-describedby="simple-modal-description"
+    >
+      <Body className={className}>
+        <Flex column>
+          <h2 id="simple-modal-title">{title}</h2>
+          <p id="simple-modal-description">{description}</p>
+        </Flex>
+        {children}
+        <Flex wide end>
+          <Button onClick={onClose} color="inherit" variant="text">
+            Close
+          </Button>
+        </Flex>
+      </Body>
+    </MaterialModal>
   );
 }
 
diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
index c801e9e917..5d4d2fad3e 100644
--- a/ui/components/Sync/SuspendMessageModal.tsx
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -1,7 +1,7 @@
-import React, { Dispatch, SetStateAction } from "react";
-import Modal from "../Modal";
 import { TextField } from "@material-ui/core";
+import React, { Dispatch, SetStateAction } from "react";
 import styled from "styled-components";
+import Modal from "../Modal";
 
 export type Props = {
   onCloseModal: Dispatch<SetStateAction<boolean>>;
@@ -9,22 +9,15 @@ export type Props = {
   setSuspendMessage: Dispatch<SetStateAction<string>>;
   suspend: any;
   suspendMessage: string;
+  className?: string;
 };
 
 const MessageModal = styled(Modal)`
-  &.test {
-    background-color: red;
-  }
-  & .test {
-    background-color: red;
-  }
-  .test {
-    background-color: red;
-  }
   background-color: red;
 `;
 
 function SuspendMessageModal({
+  className,
   onCloseModal,
   open,
   setSuspendMessage,
@@ -56,8 +49,7 @@ function SuspendMessageModal({
       title="Suspend Message"
       description="Add reaasdasdson for suspending"
       children={content}
-      className="test"
-      bodyClassName="test"
+      className={className}
     />
   );
 }

From 6fc0e59cf0c679b0e9d6d9dc0c1fb4534882f83f Mon Sep 17 00:00:00 2001
From: AMagdy <ahmed.magdy@weave.works>
Date: Mon, 27 Nov 2023 14:41:43 +0200
Subject: [PATCH 4/9] update modal to had it's own close modal icon

---
 ui/components/Modal.tsx                    | 21 ++++++++++-----
 ui/components/Sync/SuspendMessageModal.tsx | 30 +++++++++++++++++-----
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/ui/components/Modal.tsx b/ui/components/Modal.tsx
index 428a040e0c..8751fa74b8 100644
--- a/ui/components/Modal.tsx
+++ b/ui/components/Modal.tsx
@@ -1,8 +1,9 @@
 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 {
@@ -55,15 +56,21 @@ function UnstyledModal({
     >
       <Body className={className}>
         <Flex column>
-          <h2 id="simple-modal-title">{title}</h2>
+          <Flex row wide align between>
+            <h2 id="simple-modal-title">{title}</h2>
+            <IconButton
+              onClick={onClose}
+              className={className}
+              variant="text"
+              color="inherit"
+            >
+              <Icon type={IconType.ClearIcon} size="medium" color="neutral30" />
+            </IconButton>
+          </Flex>
+
           <p id="simple-modal-description">{description}</p>
         </Flex>
         {children}
-        <Flex wide end>
-          <Button onClick={onClose} color="inherit" variant="text">
-            Close
-          </Button>
-        </Flex>
       </Body>
     </MaterialModal>
   );
diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
index 5d4d2fad3e..7d354a461f 100644
--- a/ui/components/Sync/SuspendMessageModal.tsx
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -1,7 +1,8 @@
-import { TextField } from "@material-ui/core";
 import React, { Dispatch, SetStateAction } from "react";
 import styled from "styled-components";
 import Modal from "../Modal";
+import Flex from "../Flex";
+import Button from "../Button";
 
 export type Props = {
   onCloseModal: Dispatch<SetStateAction<boolean>>;
@@ -13,7 +14,15 @@ export type Props = {
 };
 
 const MessageModal = styled(Modal)`
-  background-color: red;
+  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};
+  }
 `;
 
 function SuspendMessageModal({
@@ -25,6 +34,9 @@ function SuspendMessageModal({
   suspendMessage,
 }: Props) {
   const closeHandler = () => {
+    onCloseModal(false);
+  };
+  const suspendHandler = () => {
     setSuspendMessage(suspendMessage);
     suspend.mutateAsync();
     setSuspendMessage("");
@@ -34,12 +46,18 @@ function SuspendMessageModal({
   const onClose = () => closeHandler();
 
   const content = (
-    <form>
-      <TextField
+    <>
+      <textarea
+        rows={5}
         value={suspendMessage}
         onChange={(ev) => setSuspendMessage(ev.target.value)}
-      ></TextField>
-    </form>
+      ></textarea>
+      <Flex wide end>
+        <Button onClick={suspendHandler} color="inherit" variant="text">
+          Suspend
+        </Button>
+      </Flex>
+    </>
   );
 
   return (

From 71df6ae7f9d7e4268c90eaca99567366b3ae6d0c Mon Sep 17 00:00:00 2001
From: AMagdy <ahmed.magdy@weave.works>
Date: Mon, 27 Nov 2023 17:53:43 +0200
Subject: [PATCH 5/9] add ability to add group reason so bulk suspend

---
 ui/components/Sync/CheckboxActions.tsx | 50 ++++++++++++++++++--------
 1 file changed, 36 insertions(+), 14 deletions(-)

diff --git a/ui/components/Sync/CheckboxActions.tsx b/ui/components/Sync/CheckboxActions.tsx
index d3afdc9bb4..a6aae74303 100644
--- a/ui/components/Sync/CheckboxActions.tsx
+++ b/ui/components/Sync/CheckboxActions.tsx
@@ -7,6 +7,7 @@ import { useToggleSuspend } from "../../hooks/flux";
 import { ObjectRef } from "../../lib/api/core/types.pb";
 import { V2Routes } from "../../lib/types";
 import SyncControls, { SyncType } from "./SyncControls";
+import SuspendMessageModal from "./SuspendMessageModal";
 
 export const makeObjects = (checked: string[], rows: any[]): ObjectRef[] => {
   const objects = [];
@@ -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}
+      />
+    </>
   );
 }
 

From 7a3eac87dc63f5683f2511e9e912c64030bf270e Mon Sep 17 00:00:00 2001
From: AMagdy <ahmed.magdy@weave.works>
Date: Mon, 27 Nov 2023 18:00:58 +0200
Subject: [PATCH 6/9] run lint --fix also fix typo in modal description

---
 ui/components/Sync/CheckboxActions.tsx     | 2 +-
 ui/components/Sync/SuspendMessageModal.tsx | 8 ++++----
 ui/components/Sync/SyncActions.tsx         | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/components/Sync/CheckboxActions.tsx b/ui/components/Sync/CheckboxActions.tsx
index a6aae74303..fde5fde289 100644
--- a/ui/components/Sync/CheckboxActions.tsx
+++ b/ui/components/Sync/CheckboxActions.tsx
@@ -6,8 +6,8 @@ import { useSyncFluxObject } from "../../hooks/automations";
 import { useToggleSuspend } from "../../hooks/flux";
 import { ObjectRef } from "../../lib/api/core/types.pb";
 import { V2Routes } from "../../lib/types";
-import SyncControls, { SyncType } from "./SyncControls";
 import SuspendMessageModal from "./SuspendMessageModal";
+import SyncControls, { SyncType } from "./SyncControls";
 
 export const makeObjects = (checked: string[], rows: any[]): ObjectRef[] => {
   const objects = [];
diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
index 7d354a461f..3fe6b6749f 100644
--- a/ui/components/Sync/SuspendMessageModal.tsx
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -1,8 +1,8 @@
 import React, { Dispatch, SetStateAction } from "react";
 import styled from "styled-components";
-import Modal from "../Modal";
-import Flex from "../Flex";
 import Button from "../Button";
+import Flex from "../Flex";
+import Modal from "../Modal";
 
 export type Props = {
   onCloseModal: Dispatch<SetStateAction<boolean>>;
@@ -64,8 +64,8 @@ function SuspendMessageModal({
     <MessageModal
       open={open}
       onClose={onClose}
-      title="Suspend Message"
-      description="Add reaasdasdson for suspending"
+      title="Suspend Reason"
+      description="Add reason for suspending"
       children={content}
       className={className}
     />
diff --git a/ui/components/Sync/SyncActions.tsx b/ui/components/Sync/SyncActions.tsx
index fb1d6d09a4..9b48971bfa 100644
--- a/ui/components/Sync/SyncActions.tsx
+++ b/ui/components/Sync/SyncActions.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { useSyncFluxObject } from "../../hooks/automations";
 import { useToggleSuspend } from "../../hooks/flux";
 import { Kind } from "../../lib/api/core/types.pb";
-import SyncControls, { SyncType } from "./SyncControls";
 import SuspendMessageModal from "./SuspendMessageModal";
+import SyncControls, { SyncType } from "./SyncControls";
 
 interface Props {
   name?: string;

From 7668ee3371520b9772a7500a5e31baa124d4bca9 Mon Sep 17 00:00:00 2001
From: ahussein3 <ahmed.magdy@weave.works>
Date: Sat, 2 Dec 2023 12:50:25 +0200
Subject: [PATCH 7/9] refactor styled component and update prop type

---
 ui/components/Sync/SuspendMessageModal.tsx | 38 +++++++++++++---------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
index 3fe6b6749f..5a42bfc7b8 100644
--- a/ui/components/Sync/SuspendMessageModal.tsx
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -3,27 +3,32 @@ import styled from "styled-components";
 import Button from "../Button";
 import Flex from "../Flex";
 import Modal from "../Modal";
+import { UseMutationResult } from "react-query/types/react";
+import { ToggleSuspendResourceResponse } from "../../lib/api/core/core.pb";
 
 export type Props = {
   onCloseModal: Dispatch<SetStateAction<boolean>>;
   open: boolean;
   setSuspendMessage: Dispatch<SetStateAction<string>>;
-  suspend: any;
+  suspend: UseMutationResult<ToggleSuspendResourceResponse>;
   suspendMessage: string;
   className?: string;
 };
 
-const MessageModal = styled(Modal)`
-  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};
-  }
-`;
+
+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,
@@ -34,11 +39,12 @@ function SuspendMessageModal({
   suspendMessage,
 }: Props) {
   const closeHandler = () => {
+    setSuspendMessage("");
     onCloseModal(false);
   };
   const suspendHandler = () => {
     setSuspendMessage(suspendMessage);
-    suspend.mutateAsync();
+    suspend.mutateAsync({});
     setSuspendMessage("");
     onCloseModal(false);
   };
@@ -47,11 +53,11 @@ function SuspendMessageModal({
 
   const content = (
     <>
-      <textarea
+      <MessageTextarea
         rows={5}
         value={suspendMessage}
         onChange={(ev) => setSuspendMessage(ev.target.value)}
-      ></textarea>
+      ></MessageTextarea>
       <Flex wide end>
         <Button onClick={suspendHandler} color="inherit" variant="text">
           Suspend
@@ -61,7 +67,7 @@ function SuspendMessageModal({
   );
 
   return (
-    <MessageModal
+    <Modal
       open={open}
       onClose={onClose}
       title="Suspend Reason"

From 6059ba8e314be149f330df7eaf96e9fd50bc5675 Mon Sep 17 00:00:00 2001
From: ahussein3 <ahmed.magdy@weave.works>
Date: Sat, 2 Dec 2023 13:41:36 +0200
Subject: [PATCH 8/9] run yarn lint --fix

---
 ui/components/Sync/SuspendMessageModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
index 5a42bfc7b8..5b5e5ae861 100644
--- a/ui/components/Sync/SuspendMessageModal.tsx
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -1,10 +1,10 @@
 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";
-import { UseMutationResult } from "react-query/types/react";
-import { ToggleSuspendResourceResponse } from "../../lib/api/core/core.pb";
 
 export type Props = {
   onCloseModal: Dispatch<SetStateAction<boolean>>;

From 75ab1eb48519958b5e52f702903579282a025c70 Mon Sep 17 00:00:00 2001
From: Simon Howe <simon@weave.works>
Date: Mon, 4 Dec 2023 16:21:45 +0100
Subject: [PATCH 9/9] Prettier

---
 ui/components/Sync/SuspendMessageModal.tsx | 25 +++++++++++-----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/ui/components/Sync/SuspendMessageModal.tsx b/ui/components/Sync/SuspendMessageModal.tsx
index 5b5e5ae861..7e0a21eb95 100644
--- a/ui/components/Sync/SuspendMessageModal.tsx
+++ b/ui/components/Sync/SuspendMessageModal.tsx
@@ -15,20 +15,19 @@ export type Props = {
   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;
-}
-`
+  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,