feat: add icon field to config forms spec editor

Closes #1393
flanksource · Sep 21, 2023 · 0df44f7 · 0df44f7
1 parent 4ba0382
commit 0df44f7
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 59 deletions.
diff --git a/src/components/Forms/Configs/AWSConfigsFormEditor.tsx b/src/components/Forms/Configs/AWSConfigsFormEditor.tsx
@@ -1,9 +1,9 @@
-import FormikTextInput from "../Formik/FormikTextInput";
 import FormikCheckbox from "../Formik/FormikCheckbox";
+import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
 import FormikEnvVarConfigsFields from "../Formik/FormikConfigEnvVarFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
-import FormikScheduleField from "../Formik/FormikScheduleField";
+import FormikTextInput from "../Formik/FormikTextInput";
 
 type AWSConfigsFormEditorProps = {
   fieldName: string;
@@ -26,8 +26,7 @@ export default function AWSConfigsFormEditor({
 
   return (
     <>
-      {/* this a top level schema field, not nested under http */}
-      <FormikScheduleField name={`${name}.schedule`} />
+      <FormikCommonConfigTopLevelFields name={name} />
       <div className="flex flex-col space-y-2">
         <label className="font-semibold text-sm">AWS Connection</label>
         <FormikCheckboxFieldsGroup

diff --git a/src/components/Forms/Configs/AzureConfigsFormEditor.tsx b/src/components/Forms/Configs/AzureConfigsFormEditor.tsx
@@ -1,8 +1,8 @@
-import FormikTextInput from "../Formik/FormikTextInput";
-import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikScheduleField from "../Formik/FormikScheduleField";
 import { FormikCodeEditor } from "../Formik/FormikCodeEditor";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
+import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
 import FormikConnectionField from "../Formik/FormikConnectionField";
+import FormikTextInput from "../Formik/FormikTextInput";
 
 type AzureConfigsFormEditorProps = {
   fieldName: string;
@@ -17,7 +17,7 @@ export default function AzureConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
+      <FormikCommonConfigTopLevelFields name={name} />
       <div className="flex flex-col space-y-2">
         <FormikConnectionField
           name={`${fieldName}.connection`}

diff --git a/src/components/Forms/Configs/AzureDevopsConfigsFormEditor.tsx b/src/components/Forms/Configs/AzureDevopsConfigsFormEditor.tsx
@@ -1,10 +1,9 @@
-import FormikTextInput from "../Formik/FormikTextInput";
+import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
+import FormikEnvVarConfigsFields from "../Formik/FormikConfigEnvVarFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikScheduleField from "../Formik/FormikScheduleField";
-import FormikAdvancedScrapperFields from "../Formik/FormkiAdvancedScrapperFields";
 import FormikConnectionField from "../Formik/FormikConnectionField";
-import FormikEnvVarConfigsFields from "../Formik/FormikConfigEnvVarFields";
-import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
+import FormikTextInput from "../Formik/FormikTextInput";
 
 type AzureDevopsConfigsFormEditorProps = {
   fieldName: string;
@@ -19,8 +18,7 @@ export default function AzureDevopsConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
-
+      <FormikCommonConfigTopLevelFields name={name} />
       <FormikTextInput name={`${fieldName}.name`} label="Name" />
       <FormikConnectionField
         name={`${fieldName}.connection`}

diff --git a/src/components/Forms/Configs/FileConfigsFormEditor.tsx b/src/components/Forms/Configs/FileConfigsFormEditor.tsx
@@ -1,8 +1,8 @@
-import FormikTextInput from "../Formik/FormikTextInput";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikScheduleField from "../Formik/FormikScheduleField";
-import FormikAdvancedScrapperFields from "../Formik/FormkiAdvancedScrapperFields";
 import FormikConnectionField from "../Formik/FormikConnectionField";
+import FormikTextInput from "../Formik/FormikTextInput";
+import FormikAdvancedScrapperFields from "../Formik/FormkiAdvancedScrapperFields";
 
 type FileConfigsFormEditorProps = {
   fieldName: string;
@@ -17,8 +17,7 @@ export default function FileConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
-
+      <FormikCommonConfigTopLevelFields name={name} />
       <FormikTextInput name={`${fieldName}.name`} label="Name" />
       <FormikConnectionField
         name={`${fieldName}.connection`}

diff --git a/src/components/Forms/Configs/GithubActionsConfigsFormEditor.tsx b/src/components/Forms/Configs/GithubActionsConfigsFormEditor.tsx
@@ -1,10 +1,9 @@
-import FormikTextInput from "../Formik/FormikTextInput";
+import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
+import FormikEnvVarConfigsFields from "../Formik/FormikConfigEnvVarFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikScheduleField from "../Formik/FormikScheduleField";
-import FormikAdvancedScrapperFields from "../Formik/FormkiAdvancedScrapperFields";
 import FormikConnectionField from "../Formik/FormikConnectionField";
-import FormikEnvVarConfigsFields from "../Formik/FormikConfigEnvVarFields";
-import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
+import FormikTextInput from "../Formik/FormikTextInput";
 
 type GithubActionsConfigsFormEditorProps = {
   fieldName: string;
@@ -19,8 +18,7 @@ export default function GithubActionsConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
-
+      <FormikCommonConfigTopLevelFields name={name} />
       <FormikTextInput name={`${fieldName}.name`} label="Name" />
       <FormikConnectionField
         name={`${fieldName}.connection`}

diff --git a/src/components/Forms/Configs/HttpConfigsFormEditor.tsx b/src/components/Forms/Configs/HttpConfigsFormEditor.tsx
@@ -1,8 +1,8 @@
-import FormikTextInput from "../Formik/FormikTextInput";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikScheduleField from "../Formik/FormikScheduleField";
-import FormikAdvancedScrapperFields from "../Formik/FormkiAdvancedScrapperFields";
 import FormikConnectionField from "../Formik/FormikConnectionField";
+import FormikTextInput from "../Formik/FormikTextInput";
+import FormikAdvancedScrapperFields from "../Formik/FormkiAdvancedScrapperFields";
 
 type HttpConfigsFormEditorProps = {
   fieldName: string;
@@ -17,8 +17,7 @@ export default function HttpConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
-
+      <FormikCommonConfigTopLevelFields name={name} />
       <FormikTextInput name={`${fieldName}.name`} label="Name" />
       <FormikConnectionField
         name={`${fieldName}.connection`}
@@ -54,9 +53,7 @@ export default function HttpConfigsFormEditor({
       />
 
       <div className="flex flex-col space-y-2">
-        <label className="font-semibold text-sm">
-          Advanced Options
-        </label>
+        <label className="font-semibold text-sm">Advanced Options</label>
         <div className="flex flex-col p-4 space-y-2 border border-gray-200 rounded-md">
           <FormikAdvancedScrapperFields fieldName={fieldName} />
         </div>

diff --git a/src/components/Forms/Configs/KubernetesConfigsFormEditor.tsx b/src/components/Forms/Configs/KubernetesConfigsFormEditor.tsx
@@ -1,9 +1,9 @@
-import FormikTextInput from "../Formik/FormikTextInput";
 import FormikCheckbox from "../Formik/FormikCheckbox";
+import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
 import FormikEnvVarConfigsFields from "../Formik/FormikConfigEnvVarFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
-import FormikScheduleField from "../Formik/FormikScheduleField";
+import FormikTextInput from "../Formik/FormikTextInput";
 
 type KubernetesConfigsFormEditorProps = {
   fieldName: string;
@@ -28,10 +28,7 @@ export default function KubernetesConfigsFormEditor({
     <>
       <FormikTextInput name={`${fieldName}.clusterName`} label="Cluster Name" />
       <FormikTextInput name={`${fieldName}.namespace`} label="Namespace" />
-
-      {/* this a top level schema field, not nested under http */}
-      <FormikScheduleField name={`${name}.schedule`} />
-
+      <FormikCommonConfigTopLevelFields name={name} />
       <FormikCheckbox name={`${fieldName}.useCache`} label="Use Cache" />
       <FormikCheckbox
         name={`${fieldName}.allowIncomplete`}

diff --git a/src/components/Forms/Configs/KubernetesFileConfigsFormEditor.tsx b/src/components/Forms/Configs/KubernetesFileConfigsFormEditor.tsx
@@ -1,7 +1,7 @@
-import FormikTextInput from "../Formik/FormikTextInput";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikScheduleField from "../Formik/FormikScheduleField";
 import FormikConfigFormFormsArray from "../Formik/FormikConfigFormFormsArray";
+import FormikTextInput from "../Formik/FormikTextInput";
 import FormikAdvancedScrapperFields from "../Formik/FormkiAdvancedScrapperFields";
 
 type KubernetesConfigsFileFormEditorProps = {
@@ -17,8 +17,7 @@ export default function KubernetesFileConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
-
+      <FormikCommonConfigTopLevelFields name={name} />
       <FormikTextInput name={`${fieldName}.type`} label="Type" required />
       <FormikTextInput name={`${fieldName}.id`} label="ID" required />
       <div className="flex flex-col space-y-2">

diff --git a/src/components/Forms/Configs/SQLConfigsFormEditor.tsx b/src/components/Forms/Configs/SQLConfigsFormEditor.tsx
@@ -1,10 +1,10 @@
-import FormikTextInput from "../Formik/FormikTextInput";
+import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
 import FormikEnvVarConfigsFields from "../Formik/FormikConfigEnvVarFields";
 import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikCheckboxFieldsGroup from "../Formik/FormikCheckboxFieldsGroup";
-import FormikScheduleField from "../Formik/FormikScheduleField";
-import FormikTextArea from "../Formik/FormikTextArea";
 import FormikConnectionField from "../Formik/FormikConnectionField";
+import FormikTextArea from "../Formik/FormikTextArea";
+import FormikTextInput from "../Formik/FormikTextInput";
 
 type SQLConfigsFormEditorProps = {
   fieldName: string;
@@ -19,7 +19,7 @@ export default function SQLConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
+      <FormikCommonConfigTopLevelFields name={name} />
       <div className="flex flex-col space-y-2">
         <FormikTextInput name={`${fieldName}.type`} label="Type" required />
         <FormikTextInput name={`${fieldName}.id`} label="ID" required />

diff --git a/src/components/Forms/Configs/TrivyConfigsFormEditor.tsx b/src/components/Forms/Configs/TrivyConfigsFormEditor.tsx
@@ -1,8 +1,8 @@
-import FormikTextInput from "../Formik/FormikTextInput";
 import FormikCheckbox from "../Formik/FormikCheckbox";
-import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
-import FormikScheduleField from "../Formik/FormikScheduleField";
 import { FormikCodeEditor } from "../Formik/FormikCodeEditor";
+import FormikCommonConfigTopLevelFields from "../Formik/FormikCommonConfigTopLevelFields";
+import FormikConfigFormFieldsArray from "../Formik/FormikConfigFormFieldsArray";
+import FormikTextInput from "../Formik/FormikTextInput";
 
 type TrivyConfigsFormEditorProps = {
   fieldName: string;
@@ -17,7 +17,7 @@ export default function TrivyConfigsFormEditor({
 
   return (
     <>
-      <FormikScheduleField name={`${name}.schedule`} />
+      <FormikCommonConfigTopLevelFields name={name} />
       <div className="flex flex-col space-y-2">
         <FormikConfigFormFieldsArray
           name={`${fieldName}.compliance`}
@@ -42,8 +42,8 @@ export default function TrivyConfigsFormEditor({
               name: "ignoredLicenses"
             }
           ]}
-        />   
-   
+        />
+
         <FormikCheckbox
           name={`${fieldName}.licenseFull`}
           label="License Full"

diff --git a/src/components/Forms/Formik/FormikCommonConfigTopLevelFields.tsx b/src/components/Forms/Formik/FormikCommonConfigTopLevelFields.tsx
@@ -0,0 +1,31 @@
+import FormikIconPicker from "./FormikIconPicker";
+import FormikScheduleField from "./FormikScheduleField";
+
+type FormikCommonConfigTopLevelFieldsProps = {
+  name: string;
+};
+
+/**
+ *
+ * This component is used in the following components:
+ *
+ * - ScheduleField
+ * - IconPicker
+ *
+ * For config Forms
+ *
+ */
+export default function FormikCommonConfigTopLevelFields({
+  name
+}: FormikCommonConfigTopLevelFieldsProps) {
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="flex flex-col flex-1 ">
+        <FormikScheduleField name={`${name}.schedule`} />
+      </div>
+      <div className="flex flex-col flex-1 ">
+        <FormikIconPicker name={`${name}.icon`} label="Icon" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Forms/Formik/FormikIconPicker.tsx b/src/components/Forms/Formik/FormikIconPicker.tsx
@@ -15,7 +15,7 @@ export default function FormikIconPicker({
   name,
   required = false,
   label,
-  className = "flex flex-col",
+  className = "flex flex-col py-2",
   hint,
   type = "text"
 }: FormikIconPickerProps) {