From 0a5957e361525a541b8b680d8ebd0f293ef50705 Mon Sep 17 00:00:00 2001
From: Walter Galvao <walterbgneto@gmail.com>
Date: Sun, 22 Sep 2024 03:50:49 -0300
Subject: [PATCH] chore: address review

---
 .../form-pr-size-labeler-settings.tsx         |  8 +--
 .../settings/pr-size-labeler/page.tsx         | 54 +++++++++----------
 .../settings/pr-size-labeler/types.ts         | 40 +++++++-------
 .../settings/pr-title-check/page.tsx          | 17 +++---
 .../automations/settings/use-automation.tsx   |  4 ++
 .../app/settings/integrations/slack/page.tsx  | 15 ------
 6 files changed, 64 insertions(+), 74 deletions(-)

diff --git a/apps/web/src/app/automations/settings/pr-size-labeler/components/form-pr-size-labeler-settings/form-pr-size-labeler-settings.tsx b/apps/web/src/app/automations/settings/pr-size-labeler/components/form-pr-size-labeler-settings/form-pr-size-labeler-settings.tsx
index e16b783..1ad7ecf 100644
--- a/apps/web/src/app/automations/settings/pr-size-labeler/components/form-pr-size-labeler-settings/form-pr-size-labeler-settings.tsx
+++ b/apps/web/src/app/automations/settings/pr-size-labeler/components/form-pr-size-labeler-settings/form-pr-size-labeler-settings.tsx
@@ -28,8 +28,8 @@ export const FormPrSizeLabelerSettings = ({
 
       {form.values.enabled &&
         (
-          Object.keys(form.values.settings) as Array<
-            keyof typeof form.values.settings
+          Object.keys(form.values.settings.labels) as Array<
+            keyof typeof form.values.settings.labels
           >
         ).map((size) => (
           <BoxSetting
@@ -41,7 +41,7 @@ export const FormPrSizeLabelerSettings = ({
               <Input
                 maw={140}
                 placeholder={size}
-                {...form.getInputProps(`settings.${size}.label`)}
+                {...form.getInputProps(`settings.labels.${size}.label`)}
                 maxLength={100}
               ></Input>
               <ColorInput
@@ -49,7 +49,7 @@ export const FormPrSizeLabelerSettings = ({
                 error={false}
                 swatches={colorPickerSwatches}
                 swatchesPerRow={7}
-                {...form.getInputProps(`settings.${size}.color`)}
+                {...form.getInputProps(`settings.labels.${size}.color`)}
                 maw={120}
                 withEyeDropper={false}
               />
diff --git a/apps/web/src/app/automations/settings/pr-size-labeler/page.tsx b/apps/web/src/app/automations/settings/pr-size-labeler/page.tsx
index 9c3293b..f811028 100644
--- a/apps/web/src/app/automations/settings/pr-size-labeler/page.tsx
+++ b/apps/web/src/app/automations/settings/pr-size-labeler/page.tsx
@@ -10,10 +10,8 @@ import { useForm, zodResolver } from "@mantine/form";
 import { useEffect, useMemo, FormEventHandler } from "react";
 import { useDrawerPage } from "../../../../providers/drawer-page.provider";
 import { FormPrSizeLabeler } from "./types";
-import { useNavigate } from "react-router-dom";
 
 export const AutomationPrSizeLabelerPage = () => {
-  const navigate = useNavigate();
   const { automation, automationSettings, query, mutation, mutate } =
     useAutomationSettings(AutomationType.PR_SIZE_LABELER);
 
@@ -26,29 +24,35 @@ export const AutomationPrSizeLabelerPage = () => {
   });
 
   useEffect(() => {
-    const settings = automationSettings?.settings as any;
+    const settings = automationSettings?.settings as
+      | FormPrSizeLabeler["settings"]
+      | undefined
+      | null;
+
     form.setValues({
       enabled: automationSettings?.enabled || false,
       settings: {
-        tiny: {
-          label: settings?.labels?.tiny?.label || "tiny",
-          color: settings?.labels?.tiny?.color || "#69db7c",
-        },
-        small: {
-          label: settings?.labels?.small?.label || "small",
-          color: settings?.labels?.small?.color || "#69db7c",
-        },
-        medium: {
-          label: settings?.labels?.medium?.label || "medium",
-          color: settings?.labels?.medium?.color || "#a6a7ab",
-        },
-        large: {
-          label: settings?.labels?.large?.label || "large",
-          color: settings?.labels?.large?.color || "#ff8787",
-        },
-        huge: {
-          label: settings?.labels?.huge?.label || "huge",
-          color: settings?.labels?.huge?.color || "#ff8787",
+        labels: {
+          tiny: {
+            label: settings?.labels?.tiny?.label || "tiny",
+            color: settings?.labels?.tiny?.color || "#69db7c",
+          },
+          small: {
+            label: settings?.labels?.small?.label || "small",
+            color: settings?.labels?.small?.color || "#69db7c",
+          },
+          medium: {
+            label: settings?.labels?.medium?.label || "medium",
+            color: settings?.labels?.medium?.color || "#a6a7ab",
+          },
+          large: {
+            label: settings?.labels?.large?.label || "large",
+            color: settings?.labels?.large?.color || "#ff8787",
+          },
+          huge: {
+            label: settings?.labels?.huge?.label || "huge",
+            color: settings?.labels?.huge?.color || "#ff8787",
+          },
         },
       },
     });
@@ -67,8 +71,6 @@ export const AutomationPrSizeLabelerPage = () => {
       settings: form.values.settings,
       enabled: form.values.enabled,
     });
-
-    navigate("/automations");
   };
 
   return (
@@ -86,9 +88,7 @@ export const AutomationPrSizeLabelerPage = () => {
           </Title>
         </Group>
       }
-      toolbar={
-        <>{automation.docsUrl && <ButtonDocs href={automation.docsUrl} />}</>
-      }
+      toolbar={automation.docsUrl && <ButtonDocs href={automation.docsUrl} />}
       actions={
         <Button
           type="submit"
diff --git a/apps/web/src/app/automations/settings/pr-size-labeler/types.ts b/apps/web/src/app/automations/settings/pr-size-labeler/types.ts
index 8b50fe4..c6ca012 100644
--- a/apps/web/src/app/automations/settings/pr-size-labeler/types.ts
+++ b/apps/web/src/app/automations/settings/pr-size-labeler/types.ts
@@ -4,25 +4,27 @@ import { mustBeHexadecimal } from "../../../../providers/zod-rules.provider";
 export const FormPrSizeLabeler = z.object({
   enabled: z.boolean(),
   settings: z.object({
-    tiny: z.object({
-      label: z.string().min(1),
-      color: mustBeHexadecimal,
-    }),
-    small: z.object({
-      label: z.string().min(1),
-      color: mustBeHexadecimal,
-    }),
-    medium: z.object({
-      label: z.string().min(1),
-      color: mustBeHexadecimal,
-    }),
-    large: z.object({
-      label: z.string().min(1),
-      color: mustBeHexadecimal,
-    }),
-    huge: z.object({
-      label: z.string().min(1),
-      color: mustBeHexadecimal,
+    labels: z.object({
+      tiny: z.object({
+        label: z.string().min(1),
+        color: mustBeHexadecimal,
+      }),
+      small: z.object({
+        label: z.string().min(1),
+        color: mustBeHexadecimal,
+      }),
+      medium: z.object({
+        label: z.string().min(1),
+        color: mustBeHexadecimal,
+      }),
+      large: z.object({
+        label: z.string().min(1),
+        color: mustBeHexadecimal,
+      }),
+      huge: z.object({
+        label: z.string().min(1),
+        color: mustBeHexadecimal,
+      }),
     }),
   }),
 });
diff --git a/apps/web/src/app/automations/settings/pr-title-check/page.tsx b/apps/web/src/app/automations/settings/pr-title-check/page.tsx
index 4ec0966..fd57c6f 100644
--- a/apps/web/src/app/automations/settings/pr-title-check/page.tsx
+++ b/apps/web/src/app/automations/settings/pr-title-check/page.tsx
@@ -9,11 +9,9 @@ import { ButtonDocs } from "../../../../components/button-docs";
 import { useForm, zodResolver } from "@mantine/form";
 import { FormEventHandler, useEffect, useMemo } from "react";
 import { FormPrTitleCheck } from "./types";
-import { useNavigate } from "react-router-dom";
 import { HeaderAutomation } from "../components/header-automation";
 
 export const AutomationPrTitleCheckPage = () => {
-  const navigate = useNavigate();
   const { automation, automationSettings, query, mutation, mutate } =
     useAutomationSettings(AutomationType.PR_TITLE_CHECK);
 
@@ -26,11 +24,16 @@ export const AutomationPrTitleCheckPage = () => {
   });
 
   useEffect(() => {
+    const settings = automationSettings?.settings as
+      | FormPrTitleCheck["settings"]
+      | undefined
+      | null;
+
     form.setValues({
       enabled: automationSettings?.enabled || false,
       settings: {
-        regex: (automationSettings?.settings as any)?.regex || "",
-        regexExample: (automationSettings?.settings as any)?.regexExample || "",
+        regex: settings?.regex || "",
+        regexExample: settings?.regexExample || "",
       },
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -48,8 +51,6 @@ export const AutomationPrTitleCheckPage = () => {
       settings: form.values.settings,
       enabled: form.values.enabled,
     });
-
-    navigate("/automations");
   };
 
   return (
@@ -67,9 +68,7 @@ export const AutomationPrTitleCheckPage = () => {
           </Title>
         </Group>
       }
-      toolbar={
-        <>{automation.docsUrl && <ButtonDocs href={automation.docsUrl} />}</>
-      }
+      toolbar={automation.docsUrl && <ButtonDocs href={automation.docsUrl} />}
       actions={
         <Button
           type="submit"
diff --git a/apps/web/src/app/automations/settings/use-automation.tsx b/apps/web/src/app/automations/settings/use-automation.tsx
index e664801..cec5b74 100644
--- a/apps/web/src/app/automations/settings/use-automation.tsx
+++ b/apps/web/src/app/automations/settings/use-automation.tsx
@@ -12,8 +12,10 @@ import {
   showErrorNotification,
 } from "../../../providers/notification.provider";
 import { useAutomationCards } from "../use-automation-cards";
+import { useNavigate } from "react-router-dom";
 
 export const useAutomationSettings = (type: AutomationType) => {
+  const navigate = useNavigate();
   const { workspace } = useWorkspace();
   const { automationCards } = useAutomationCards();
   const automation = automationCards[type];
@@ -22,6 +24,8 @@ export const useAutomationSettings = (type: AutomationType) => {
       showSuccessNotification({
         message: `Automation settings updated.`,
       });
+
+      navigate("/automations");
     },
     onError: () => {
       showErrorNotification({
diff --git a/apps/web/src/app/settings/integrations/slack/page.tsx b/apps/web/src/app/settings/integrations/slack/page.tsx
index 82df4ea..371d941 100644
--- a/apps/web/src/app/settings/integrations/slack/page.tsx
+++ b/apps/web/src/app/settings/integrations/slack/page.tsx
@@ -48,21 +48,6 @@ export const IntegrationSlackPage = () => {
           </Title>
         </Group>
       }
-      toolbar={
-        <Anchor
-          underline="never"
-          target="_blank"
-          href="https://docs.sweetr.dev"
-        >
-          <Button
-            variant="subtle"
-            color="dark.1"
-            leftSection={<IconBook2 stroke={1.5} size={20} />}
-          >
-            Docs
-          </Button>
-        </Anchor>
-      }
       actions={
         <>
           {integration && !integration?.isEnabled && integration.installUrl && (