feat: repo settings for schedule and frequency

Author: eddiejaoude

src/app/account/repo/settings/[id]/form.js

@@ -3,49 +3,87 @@
 import { useFormState } from "react-dom";
 import { useFlags } from "flagsmith/react";
 
-import config from "@/config/app.json";
 import { saveSettings } from "./action";
 import { SubmitButton } from "@/components/forms/SubmitButton";
 import Input from "@/components/forms/Input";
 import Checkbox from "@/components/forms/Checkbox";
+import Select from "@/components/forms/Select";
 
 const initialState = {
-  data: undefined,
+  ignore: undefined,
   success: undefined,
   errors: undefined,
 };
 
-export default function Form({ id, data, disabled = false }) {
+export default function Form({ id, ignore, schedule, disabled = false }) {
   let { optionalchecks } = useFlags(["optionalchecks"]);
   optionalchecks = JSON.parse(optionalchecks.value);
   const [state, formAction] = useFormState(saveSettings, initialState);
 
   return (
     <form action={formAction}>
       <Input type="hidden" id="id" name="id" value={id} />
-      <div className="space-y-12">
-        <div className="border-b border-gray-900/10 pb-12">
+
+      <div className="border-b border-gray-700 pb-12 pt-4">
+        <div className="border-b border-gray-900/10">
           <p className="mt-1 text-sm leading-6 text-gray-300">
-            Hide any checks you wish to ignore.
+            What checks do you wish to ignore from your report?
           </p>
         </div>
+
+        <fieldset>
+          <legend className="text-sm font-semibold leading-6">
+            Hide these checks
+          </legend>
+          {optionalchecks?.map((option) => (
+            <div className="mt-2" key={option.id}>
+              <Checkbox
+                id={option.id}
+                name={option.id}
+                text={option.name}
+                value={true}
+                disabled={disabled}
+                defaultChecked={ignore.includes(option.id)}
+              />
+            </div>
+          ))}
+        </fieldset>
       </div>
 
-      <fieldset>
-        <legend className="text-sm font-semibold leading-6">Checks</legend>
-        {optionalchecks?.map((option) => (
-          <div className="mt-6 space-y-6" key={option.id}>
+      <div className="border-b border-gray-700 pb-12 pt-4">
+        <fieldset className="mb-6">
+          <legend className="text-sm font-semibold leading-6">Automate</legend>
+          <div className="mt-2">
             <Checkbox
-              id={option.id}
-              name={option.id}
-              text={option.name}
+              id="schedule"
+              name="schedule"
+              text="Schedule"
               value={true}
-              disabled={disabled}
-              defaultChecked={data.includes(option.id)}
+              disabled={true}
+              defaultChecked={true}
             />
           </div>
-        ))}
-      </fieldset>
+        </fieldset>
+        <fieldset>
+          <legend className="text-sm font-semibold leading-6">Frequency</legend>
+          <div className="mt-2">
+            <Select
+              id="schedule"
+              name="schedule"
+              text="How often to perform these checks? (days)"
+              options={[
+                { text: "1 day", value: 1 },
+                { text: "7 days", value: 7 },
+                { text: "30 days", value: 30 },
+              ]}
+              value={7}
+              disabled={true}
+              // defaultChecked={schedule}
+              classNameSelect="max-w-32"
+            />
+          </div>
+        </fieldset>
+      </div>
 
       <div className="mt-6 flex items-center justify-end gap-x-6">
         <SubmitButton text="SAVE" />

src/app/account/repo/settings/[id]/page.js

@@ -30,7 +30,7 @@ export default async function Page({ params }) {
           Repo Check List
         </Button>
       </Title>
-      <Form id={id} data={repository.ignoreChecks} />
+      <Form id={id} ignore={repository.ignoreChecks} />
     </>
   );
 }

src/components/forms/Select.js

@@ -0,0 +1,51 @@
+import classNames from "@/utils/classNames";
+import { useFormStatus } from "react-dom";
+
+export default function Select({
+  id,
+  name,
+  text,
+  options,
+  value,
+  disabled,
+  defaultValue,
+  classNameSelect,
+}) {
+  const { pending } = useFormStatus();
+
+  if (!name) {
+    name = id;
+  }
+
+  if (!text) {
+    text = name;
+  }
+
+  return (
+    <div>
+      <label htmlFor={name} className="block text-sm font-medium leading-6">
+        {text}
+      </label>
+      <select
+        id={id}
+        name={name}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        className={classNames(
+          "mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:bg-gray-600",
+          classNameSelect,
+        )}
+      >
+        {options?.map((option) => (
+          <option
+            value={option.value}
+            key={option.value}
+            selected={option.value === value}
+          >
+            {option.text}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}