feat(config): manage manual properties

Add config sidebar controls for users to add manual properties with either text or numeric values and delete only their own manually-added properties.\n\nWire the UI to the config item property update/delete RPCs and carry property ownership fields through config property types.

Author: adityathebe

src/api/services/configs.ts

@@ -14,6 +14,7 @@ import {
   ConfigSummary,
   ConfigTypeRelationships
 } from "../types/configs";
+import { Property } from "../types/topology";
 
 export * from "./configAccess";
 
@@ -164,6 +165,47 @@ export const getConfig = (id: string) =>
     ConfigDB.get(`/config_detail?id=eq.${id}&select=*`)
   );
 
+export type UpdateConfigItemPropertiesResponse = {
+  changed: boolean;
+  properties: Property[];
+};
+
+export const updateConfigItemProperties = async (
+  configId: string,
+  creatorType: "person" | "scraper",
+  createdBy: string,
+  properties: Property[]
+) => {
+  const res = await ConfigDB.post<UpdateConfigItemPropertiesResponse[]>(
+    "/rpc/update_config_item_properties",
+    {
+      p_config_id: configId,
+      p_creator_type: creatorType,
+      p_created_by: createdBy,
+      p_properties: properties
+    }
+  );
+  return res.data?.[0];
+};
+
+export const deleteConfigItemProperty = async (
+  configId: string,
+  creatorType: "person" | "scraper",
+  createdBy: string,
+  propertyName: string
+) => {
+  const res = await ConfigDB.post<UpdateConfigItemPropertiesResponse[]>(
+    "/rpc/delete_config_item_property",
+    {
+      p_config_id: configId,
+      p_creator_type: creatorType,
+      p_created_by: createdBy,
+      p_property_name: propertyName
+    }
+  );
+  return res.data?.[0];
+};
+
 export type ConfigsTagList = {
   key: string;
   value: any;

src/api/types/configs.ts

@@ -83,14 +83,7 @@ export interface ConfigItem extends Timestamped, Avatar, Agent, Costs {
     playbook_runs?: number;
     checks?: number;
   };
-  properties?: {
-    icon: string;
-    name: string;
-    links: {
-      label: string;
-      url: string;
-    }[];
-  }[];
+  properties?: Property[] | null;
   last_scraped_time?: string;
 }
 

src/api/types/topology.ts

@@ -22,6 +22,8 @@ export type Property = {
     label: string;
     url: string;
   }[];
+  created_by?: string;
+  creator_type?: "scraper" | "person" | string;
 };
 
 export interface Component extends Timestamped, Namespaced {

src/components/Configs/Sidebar/AddConfigPropertyModal.tsx

@@ -0,0 +1,151 @@
+import { updateConfigItemProperties } from "@flanksource-ui/api/services/configs";
+import { Property } from "@flanksource-ui/api/types/topology";
+import FormikTextInput from "@flanksource-ui/components/Forms/Formik/FormikTextInput";
+import {
+  toastError,
+  toastSuccess
+} from "@flanksource-ui/components/Toast/toast";
+import { useUser } from "@flanksource-ui/context";
+import { Button } from "@flanksource-ui/ui/Buttons/Button";
+import { Modal } from "@flanksource-ui/ui/Modal";
+import { Field, Form, Formik } from "formik";
+
+type Props = {
+  configId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onAdded?: (properties?: Property[]) => void;
+  existingProperties?: Property[] | null;
+};
+
+type AddPropertyForm = {
+  name: string;
+  valueType: "text" | "value";
+  text: string;
+  value: string;
+};
+
+export default function AddConfigPropertyModal({
+  configId,
+  isOpen,
+  onClose,
+  onAdded,
+  existingProperties
+}: Props) {
+  const { user } = useUser();
+
+  const userProperties =
+    existingProperties?.filter(
+      (property) =>
+        property.creator_type === "person" && property.created_by === user?.id
+    ) ?? [];
+
+  return (
+    <Modal
+      title="Add Property"
+      size="very-small"
+      open={isOpen}
+      onClose={onClose}
+    >
+      <Formik<AddPropertyForm>
+        initialValues={{ name: "", valueType: "text", text: "", value: "" }}
+        onSubmit={async (values, formik) => {
+          if (!user?.id) {
+            toastError("Could not determine current user");
+            return;
+          }
+
+          if (!values.name) {
+            toastError("Please provide property name");
+            formik.setSubmitting(false);
+            return;
+          }
+
+          if (values.valueType === "text" && !values.text) {
+            toastError("Please provide property text");
+            formik.setSubmitting(false);
+            return;
+          }
+
+          if (values.valueType === "value" && values.value === "") {
+            toastError("Please provide property value");
+            formik.setSubmitting(false);
+            return;
+          }
+
+          try {
+            const newProperty: Property =
+              values.valueType === "value"
+                ? { name: values.name, value: Number(values.value) }
+                : { name: values.name, text: values.text };
+
+            const incoming = [
+              ...userProperties.filter(
+                (property) => property.name !== values.name
+              ),
+              newProperty
+            ];
+
+            const result = await updateConfigItemProperties(
+              configId,
+              "person",
+              user.id,
+              incoming
+            );
+            toastSuccess("Property added");
+            onAdded?.(result?.properties);
+            onClose();
+          } catch (e) {
+            toastError((e as Error).message);
+          } finally {
+            formik.setSubmitting(false);
+          }
+        }}
+      >
+        {({ isSubmitting, values }) => (
+          <Form>
+            <div className="flex flex-col gap-4 p-2">
+              <FormikTextInput name="name" label="Name" required />
+              <label className="flex flex-col text-sm font-medium text-gray-700">
+                Value type
+                <Field
+                  as="select"
+                  name="valueType"
+                  className="form-select mt-1 rounded border-gray-300 text-sm"
+                >
+                  <option value="text">Text</option>
+                  <option value="value">Number</option>
+                </Field>
+              </label>
+              {values.valueType === "value" ? (
+                <FormikTextInput
+                  name="value"
+                  label="Value"
+                  type="number"
+                  required
+                />
+              ) : (
+                <FormikTextInput name="text" label="Text" required />
+              )}
+            </div>
+            <div className="flex items-center justify-end rounded-lg bg-gray-100 px-5 py-4">
+              <button
+                className="btn-secondary-base btn-secondary mr-4"
+                type="button"
+                onClick={onClose}
+              >
+                Cancel
+              </button>
+              <Button
+                type="submit"
+                text="Save"
+                className="btn-primary"
+                disabled={isSubmitting}
+              />
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </Modal>
+  );
+}

src/components/Configs/Sidebar/ConfigDetails.tsx

@@ -9,15 +9,19 @@ import TextSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/TextSkeletonLo
 import { refreshButtonClickedTrigger } from "@flanksource-ui/ui/SlidingSideBar/SlidingSideBar";
 import dayjs from "dayjs";
 import { useAtom } from "jotai";
-import { useMemo, useEffect } from "react";
-import { FaExclamationTriangle, FaTrash } from "react-icons/fa";
+import { useEffect, useMemo, useState } from "react";
+import { FaEdit, FaExclamationTriangle, FaPlus, FaTrash } from "react-icons/fa";
 import { Link } from "react-router-dom";
+import { Tooltip } from "react-tooltip";
 import { InfoMessage } from "../../InfoMessage";
 import { Status } from "../../Status";
 import DisplayDetailsRow from "../../Utils/DisplayDetailsRow";
 import { DisplayGroupedProperties } from "../../Utils/DisplayGroupedProperties";
 import ConfigCostValue from "../ConfigCosts/ConfigCostValue";
 import ConfigsTypeIcon from "../ConfigsTypeIcon";
+import { IconButton } from "../../../ui/Buttons/IconButton";
+import AddConfigPropertyModal from "./AddConfigPropertyModal";
+import ManageConfigPropertiesModal from "./ManageConfigPropertiesModal";
 import { formatConfigLabels } from "./Utils/formatConfigLabels";
 import { MdOutlineSupportAgent } from "react-icons/md";
 
@@ -26,6 +30,9 @@ type Props = {
 };
 
 export function ConfigDetails({ configId }: Props) {
+  const [isAddPropertyOpen, setIsAddPropertyOpen] = useState(false);
+  const [isManagePropertiesOpen, setIsManagePropertiesOpen] = useState(false);
+
   const {
     data: configDetails,
     isLoading,
@@ -252,8 +259,45 @@ export function ConfigDetails({ configId }: Props) {
 
           <DisplayDetailsRow items={types} />
 
+          <div className="flex items-center justify-between py-1 text-sm text-gray-700">
+            <span className="border-b border-dashed border-gray-500">
+              Properties
+            </span>
+            <div className="flex items-center gap-2">
+              <IconButton
+                data-tooltip-id="edit-properties-tooltip"
+                data-tooltip-content="Edit properties"
+                icon={<FaEdit className="text-gray-600" size={14} />}
+                onClick={() => setIsManagePropertiesOpen(true)}
+              />
+              <IconButton
+                data-tooltip-id="add-property-tooltip"
+                data-tooltip-content="Add property"
+                icon={<FaPlus className="text-gray-600" size={14} />}
+                onClick={() => setIsAddPropertyOpen(true)}
+              />
+            </div>
+            <Tooltip id="edit-properties-tooltip" />
+            <Tooltip id="add-property-tooltip" />
+          </div>
           <DisplayGroupedProperties items={properties} />
 
+          <AddConfigPropertyModal
+            configId={configId}
+            isOpen={isAddPropertyOpen}
+            onClose={() => setIsAddPropertyOpen(false)}
+            existingProperties={configDetails.properties}
+            onAdded={() => refetchConfig()}
+          />
+
+          <ManageConfigPropertiesModal
+            configId={configId}
+            isOpen={isManagePropertiesOpen}
+            onClose={() => setIsManagePropertiesOpen(false)}
+            existingProperties={configDetails.properties}
+            onChanged={() => refetchConfig()}
+          />
+
           {!isCostsEmpty(configDetails) && (
             <DisplayDetailsRow
               items={[