1294 incident rules form

src/api/services/incident.ts

@@ -28,7 +28,7 @@ export interface NewIncident {
   description: string;
 
   severity: IncidentSeverity | string;
-  type?: string;
+  type?: keyof typeof typeItems;
   status?: IncidentStatus;
 
   created_by: string;

src/api/services/topology.ts

@@ -170,6 +170,15 @@ export const getTopologyComponentsWithLogs = () => {
   );
 };
 
+export const getComponentTypes = async () => {
+  const res = await IncidentCommander.get<
+    {
+      type: string;
+    }[]
+  >(`/component_types?order=type.asc`);
+  return res.data ?? [];
+};
+
 type AgentItem = {
   id: string;
   name: string;

src/components/AvatarGroup/AvatarGroup.stories.tsx

@@ -15,12 +15,10 @@ Variant1.args = {
   size: "md",
   users: [
     {
-      name: "Falcon",
       avatar:
         "https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80"
     },
     {
-      name: "Spider",
       avatar: undefined
     }
   ],

src/components/AvatarGroup/index.tsx

@@ -1,11 +1,9 @@
 import { useMemo } from "react";
-import PropTypes from "prop-types";
 import { Avatar } from "../Avatar";
 
 type Props = {
   users: {
     avatar?: string;
-    name: string;
   }[];
   size: "sm" | "lg" | "md";
   maxCount: number;
@@ -35,19 +33,3 @@ export const AvatarGroup = ({
     </div>
   );
 };
-
-AvatarGroup.propTypes = {
-  users: PropTypes.arrayOf(
-    PropTypes.shape({
-      avatar: PropTypes.string,
-      name: PropTypes.string
-    })
-  ).isRequired,
-  size: PropTypes.string,
-  maxCount: PropTypes.number
-};
-
-AvatarGroup.defaultProps = {
-  size: "md",
-  maxCount: 5
-};

src/components/CollapsiblePanel/index.tsx

@@ -61,7 +61,7 @@ export default function CollapsiblePanel({
           </ClickableSvg>
         </div>
       </div>
-      {/* @ts-expect-error */}
+      {/* @ts-ignore */}
       <Transition
         className={`flex-1 max-h-full flex flex-col ${childrenClassName}`}
         show={isOpen}

src/components/ConfigItem/index.tsx

@@ -195,7 +195,7 @@ export const ConfigItem = ({
   ]);
 
   const getEnhancedChildren = () => {
-    return React.Children.map(children, (Child) => {
+    return React.Children.map(children, (Child: any) => {
       if (Child?.type?.displayName === "ConfigItem") {
         return React.cloneElement(
           Child,

src/components/Dropdown/SubtleDropdown.tsx

@@ -100,8 +100,10 @@ export const DropdownListbox = ({
             {items[value].iconTitle}
           </Listbox.Button>
 
+          {/* @ts-ignore */}
           <Transition
             show={open}
+            // @ts-expect-error
             as={Fragment}
             leave="transition ease-in duration-100"
             leaveFrom="opacity-100"

src/components/Dropdown/index.tsx

@@ -137,7 +137,6 @@ export function DropdownListbox({
   ...rest
 }: DropdownListboxProps) {
   return (
-    // @ts-expect-error
     <Listbox
       value={value}
       onChange={(e) => {
@@ -156,7 +155,6 @@ export function DropdownListbox({
             </Listbox.Label>
           )}
           <div className={`${label && "mt-1"} relative h-full`}>
-            {/* @ts-expect-error */}
             <Listbox.Button
               className={`relative cursor-pointer h-full w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-1 text-left  focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm
               ${items[value]?.id === "_empty" && "text-gray-400"}
@@ -180,15 +178,15 @@ export function DropdownListbox({
               </span>
             </Listbox.Button>
 
-            {/* @ts-expect-error */}
+            {/* @ts-ignore */}
             <Transition
               show={open}
+              // @ts-ignore
               as={Fragment}
               leave="transition ease-in duration-100"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              {/* @ts-expect-error */}
               <Listbox.Options className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
                 {Object.values(items)
                   .sort((a, b) => {
@@ -207,7 +205,6 @@ export function DropdownListbox({
                     return 0;
                   })
                   .map((item) => (
-                    // @ts-expect-error
                     <Listbox.Option
                       key={item.id || item.value}
                       className={({ active }) =>

src/components/Forms/Formik/FormikCheckboxFieldsGroup.tsx

@@ -57,6 +57,7 @@ export default function FormikCheckboxFieldsGroup({
         }
       }}
       labelClassName={labelClassName}
+      className="flex-1 flex flex-col px-2 py-2 transform origin-top duration-1000"
     >
       <div className={className}>{children}</div>
     </CheckboxCollapsibleGroup>

src/components/Forms/Formik/FormikComponentTypesDropdown.tsx

@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import { useField } from "formik";
+import { getComponentTypes } from "../../../api/services/topology";
+import Select from "react-select";
+
+type FormikComponentTypesDropdownProps = {
+  name: string;
+  required?: boolean;
+  label?: string;
+  className?: string;
+};
+
+export default function FormikComponentTypesDropdown({
+  name,
+  required = false,
+  label = "Severity",
+  className = "flex flex-col gap-4 px-2"
+}: FormikComponentTypesDropdownProps) {
+  const { data: items = [], isLoading } = useQuery(
+    ["componentTypes"],
+    getComponentTypes,
+    {
+      select: (data) =>
+        data
+          .filter((item) => item.type !== "")
+          .map((item) => ({ value: item.type, label: item.type }))
+    }
+  );
+
+  const [field] = useField<string>({
+    name,
+    type: "text",
+    required
+  });
+
+  return (
+    <div className={className}>
+      <label className="text-sm font-semibold">{label}</label>
+      <div className="flex flex-col">
+        <Select
+          options={items as any}
+          value={field.value}
+          onChange={(value) => field.onChange({ target: { value, name } })}
+          name={name}
+          isLoading={isLoading}
+        />
+      </div>
+    </div>
+  );
+}

src/components/Forms/Formik/FormikComponentsList.tsx

@@ -0,0 +1,89 @@
+import { useFormikContext, FieldArray } from "formik";
+import { FaPlus, FaTrash } from "react-icons/fa";
+import { Button } from "../../Button";
+import { get } from "lodash";
+import { useMemo } from "react";
+import FormikTextInput from "./FormikTextInput";
+import FormikComponentTypesDropdown from "./FormikComponentTypesDropdown";
+
+type FormikComponentsListProps = {
+  label: string;
+  containerClassName?: string;
+  className?: string;
+  name: string;
+  required?: boolean;
+};
+
+export default function FormikComponentsList({
+  name,
+  label,
+  containerClassName = "flex flex-col px-2 gap-2",
+  className = "flex flex-col w-full gap-4 rounded-md p-2 border border-gray-300"
+}: FormikComponentsListProps) {
+  const { values } = useFormikContext<Record<string, any>>();
+
+  const fieldValue = useMemo(() => get(values, name), [name, values]);
+
+  return (
+    <div className={containerClassName}>
+      <label className="text-sm font-semibold">{label}</label>
+      <FieldArray
+        name={name}
+        render={({ push, remove }) => (
+          <div className={`flex flex-col gap-4`}>
+            {fieldValue &&
+              fieldValue.length > 0 &&
+              fieldValue.map((_: any, index: number) => (
+                <div className={className}>
+                  <div className="flex flex-col gap-2">
+                    <div className="flex flex-row items-center gap-2">
+                      <FormikTextInput
+                        name={`${name}.${index}.name`}
+                        label="Name"
+                        className="flex flex-col w-1/2 p-2"
+                      />
+
+                      <FormikTextInput
+                        name={`${name}.${index}.namespace`}
+                        label="Namespace"
+                        className="flex flex-col w-1/2 p-2"
+                      />
+                    </div>
+                    <div className="flex flex-row items-center gap-2">
+                      <FormikTextInput
+                        name={`${name}.${index}.selector`}
+                        label="Selector"
+                        className="flex flex-col w-1/2 p-2 "
+                      />
+                      <FormikComponentTypesDropdown
+                        label="Types"
+                        className="flex flex-col w-1/2 p-2 gap-2"
+                        name={`${name}.${index}.types`}
+                      />
+                    </div>
+                  </div>
+                  <div className="flex flex-col justify-end">
+                    <Button
+                      disabled={fieldValue.length === 1}
+                      onClick={() => remove(index)}
+                      icon={<FaTrash />}
+                      className="btn-white w-auto"
+                      size="xl"
+                    />
+                  </div>
+                </div>
+              ))}
+            <div className="flex flex-row flex-1">
+              <Button
+                onClick={() => push({})}
+                text={`Add`}
+                icon={<FaPlus />}
+                className="btn-white"
+              />
+            </div>
+          </div>
+        )}
+      />
+    </div>
+  );
+}

src/components/Forms/Formik/FormikConfigFormFieldsArray.tsx

@@ -70,11 +70,14 @@ export default function FormikConfigFormFieldsArray({
                         />
                       )
                     )}
-                  <Button
-                    onClick={() => arrayHelpers.remove(index)}
-                    icon={<FaTrash />}
-                    className="btn-white w-auto"
-                  />
+                  <div className="flex flex-col justify-end">
+                    <Button
+                      onClick={() => arrayHelpers.remove(index)}
+                      icon={<FaTrash />}
+                      className="btn-white w-auto"
+                      size="xl"
+                    />
+                  </div>
                 </div>
               ))}
             <div className="flex flex-row flex-1">

src/components/Forms/Formik/FormikSeverityDropdown.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import Select from "react-select";
+import { severityItems } from "../../Incidents/data";
+import { useField } from "formik";
+
+type FormikSeverityDropdownProps = {
+  name: string;
+  required?: boolean;
+  label?: string;
+  className?: string;
+};
+
+export default function FormikSeverityDropdown({
+  name,
+  required = false,
+  label = "Severity",
+  className = "flex flex-col gap-4 px-2"
+}: FormikSeverityDropdownProps) {
+  const [field] = useField<string>({
+    name,
+    required
+  });
+
+  const options = useMemo(() => {
+    return Object.values(severityItems).map(({ name, icon }) => ({
+      value: name,
+      label: (
+        <div className="flex pl-2 space-x-4 items-center">
+          {icon} <span>{name}</span>
+        </div>
+      )
+    }));
+  }, []);
+
+  const value = useMemo(() => {
+    return options.find((option) => option.value === field.value);
+  }, [field.value, options]);
+
+  return (
+    <div className={className}>
+      <label className="text-sm font-semibold">{label}</label>
+      <div className="flex flex-col">
+        <Select
+          options={options}
+          value={value}
+          onChange={(value) => {
+            return field.onChange({ target: { value: value?.value, name } });
+          }}
+          name={name}
+        />
+      </div>
+    </div>
+  );
+}