Assorted fixes

package.json

@@ -11,7 +11,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@clerk/nextjs": "^4.29.12",
     "@dagrejs/dagre": "^1.1.1",
-    "@flanksource/icons": "^1.0.24",
+    "@flanksource/icons": "^1.0.25",
     "@floating-ui/react": "^0.26.9",
     "@headlessui-float/react": "^0.11.4",
     "@headlessui/react": "^1.7.17",
@@ -84,6 +84,7 @@
     "react-tooltip": "^5.26.3",
     "react-top-loading-bar": "^2.3.1",
     "react-use-intercom": "^5.1.4",
+    "react-use-size": "^3.0.3",
     "reactflow": "^11.11.3",
     "recharts": "2.1.12",
     "tailwindcss": "^3.4.1",

pages/global.css

@@ -263,3 +263,24 @@
     @apply block w-full py-2 px-4  text-sm text-gray-700  hover:bg-gray-50 hover:text-gray-900 divide-gray-300 text-left;
   }
 }
+
+
+.admonition {
+    border-radius: 0.4rem;
+    box-shadow: 0 1px 2px 0 #0000001a;
+    padding: 0.7rem 0.7rem
+}
+
+.admonition.info  {
+  background-color: #eef9fd;
+  border: 0px solid #4cb3d4;
+  border-left-width: 5px;
+}
+
+.admonition.warning {
+  border: 0px solid #e6a700;
+  background-color:  #fff8e6;
+  border-left-width: 5px;
+
+ }
+

src/components/Agents/InstalAgentInstruction/InstallAgentModal.tsx

@@ -99,12 +99,7 @@ export default function InstallAgentModal({
   const [activeTab, setActiveTab] = useState<"cli" | "flux">("cli");
 
   return (
-    <Modal
-      title={"Installation Instructions"}
-      onClose={onClose}
-      open={isOpen}
-      bodyClass="flex flex-col w-full flex-1 h-full overflow-y-auto"
-    >
+    <Modal title={"Agent Installation"} onClose={onClose} open={isOpen}>
       <div className="flex flex-col gap-4 flex-1 p-4 overflow-y-auto">
         <h3 className="font-bold text-lg">
           Install the Mission Control agent using instructions below

src/components/Configs/Changes/ConfigDetailsChanges/ConfigDetailsChanges.tsx

@@ -198,9 +198,6 @@ export function ConfigDetailChangeModal({
         e?.stopPropagation();
         setOpen(false);
       }}
-      size="full"
-      bodyClass="flex h-full w-full flex-col flex-1 overflow-y-auto"
-      containerClassName="min-h-[15rem] h-auto max-h-full overflow-y-auto"
     >
       <div className="flex flex-col flex-1 overflow-y-auto">
         {(isLoading || !changeDetails) && (

src/components/Configs/ConfigsListFilters/ConfigGraphTableToggle.tsx

@@ -2,9 +2,8 @@ import { Switch } from "@flanksource-ui/ui/FormControls/Switch";
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 
-export const configRelationshipGraphTableToggle = atomWithStorage<
-  "Table" | "Graph"
->("relationshipGraphTableToggle", "Table", undefined, {
+export type GraphType = "Table" | "Graph"
+export const configRelationshipGraphTableToggle = atomWithStorage<GraphType>("relationshipGraphTableToggle", "Table", undefined, {
   getOnInit: true
 });
 
@@ -23,7 +22,7 @@ export default function ConfigGraphTableToggle() {
       <Switch
         options={["Table", "Graph"]}
         onChange={(v) => {
-          setToggleValue(v);
+          setToggleValue(v as GraphType);
         }}
         value={toggleValue}
       />

src/components/Connections/ConnectionListView.tsx

@@ -19,7 +19,7 @@ export default function ConnectionListView({ setConnectionType }: Props) {
               }}
             >
               {typeof item.icon === "string" ? (
-                <Icon name={item.icon} />
+                <Icon name={item.icon} className="w-6 h-auto" />
               ) : (
                 item.icon
               )}

src/components/Connections/ConnectionsList.tsx

@@ -3,10 +3,8 @@ import { DataTable } from "@flanksource-ui/ui/DataTable";
 import { DateCell } from "@flanksource-ui/ui/DataTable/Cells/DateCells";
 import { CellContext, ColumnDef } from "@tanstack/table-core";
 import clsx from "clsx";
-import { useMemo } from "react";
 import { Icon } from "../../ui/Icons/Icon";
 import { Connection } from "./ConnectionFormModal";
-import { ConnectionValueType } from "./connectionTypes";
 
 type ConnectionListProps = {
   data: Connection[];
@@ -15,19 +13,9 @@ type ConnectionListProps = {
 } & Omit<React.HTMLProps<HTMLDivElement>, "data">;
 
 const NameCell = ({ row, getValue }: CellContext<Connection, any>) => {
-  const icon = useMemo(() => {
-    if (row.original.type === ConnectionValueType.AWS_S3) {
-      return "aws-s3";
-    }
-    if (row.original.type === ConnectionValueType.GCP) {
-      return "gcp";
-    }
-    return row.original.type;
-  }, [row.original.type]);
-
   return (
     <div className="flex flex-row space-x-2 items-center">
-      <Icon name={icon} className="w-6 h-auto" />
+      <Icon name={row.original.type} className="w-6 h-auto" />
       <div>{getValue()}</div>
     </div>
   );
@@ -41,32 +29,41 @@ const columns: ColumnDef<Connection>[] = [
   {
     header: "Name",
     accessorKey: "name",
-    cell: NameCell
+    cell: NameCell,
+    minSize: 150,
+    enableResizing: true
   },
   {
     header: "Namespace",
-    accessorKey: "namespace"
+    accessorKey: "namespace",
+    maxSize: 75,
+    enableResizing: true
   },
+
   {
     header: "Type",
-    accessorKey: "type"
+    accessorKey: "type",
+    maxSize: 75
   },
   {
     header: "Created By",
     accessorKey: "created_by",
-    cell: AvatarCell
+    cell: AvatarCell,
+    maxSize: 50
   },
   {
-    header: "Created At",
+    header: "Created",
     accessorKey: "created_at",
     cell: DateCell,
-    sortingFn: "datetime"
+    sortingFn: "datetime",
+    maxSize: 50
   },
   {
-    header: "Updated At",
+    header: "Updated",
     accessorKey: "updated_at",
     cell: DateCell,
-    sortingFn: "datetime"
+    sortingFn: "datetime",
+    maxSize: 50
   }
 ];
 

src/components/EventQueueStatus/EventQueueStatusList.tsx

@@ -70,10 +70,8 @@ export default function EventQueueStatusList({
           open={!!selectedItem && !!selectedItem?.most_common_error}
           onClose={() => setSelectedItem(undefined)}
           title={`Most Common Error for ${selectedItem?.name}`}
-          bodyClass="flex flex-col flex-1 overflow-y-auto"
-          size="full"
         >
-          <div className="flex flex-col flex-1">
+          <div className="flex flex-col flex-1 p-4">
             <p> {selectedItem?.most_common_error}</p>
           </div>
         </Modal>

src/components/FeatureFlags/FeatureFlagForm.tsx

@@ -29,6 +29,7 @@ export default function FeatureFlagForm({
   return (
     <Modal
       title="Add Feature Flag"
+      size="small"
       onClose={() => {
         setIsOpen(false);
       }}

src/components/Forms/Configs/AWSConfigsFormEditor.tsx

@@ -71,14 +71,6 @@ export default function AWSConfigsFormEditor({
         />
       </div>
 
-      <FormikCheckbox name={`${fieldName}.patch_states`} label="Patch States" />
-      <FormikCheckbox
-        name={`${fieldName}.patch_details`}
-        label="Patch Details"
-      />
-      <FormikCheckbox name={`${fieldName}.inventory`} label="Inventory" />
-      <FormikCheckbox name={`${fieldName}.compliance`} label="Compliance" />
-
       <div className="flex flex-col space-y-2">
         <label className="font-semibold text-sm">Cloudtrail</label>
         <div className="flex flex-col p-4 space-y-2 border border-gray-200 rounded-md">
@@ -125,27 +117,29 @@ export default function AWSConfigsFormEditor({
         ]}
       />
 
-      <div className="flex flex-col space-y-2">
-        <label className="font-semibold text-sm">Cost Reporting</label>
-        <div className="flex flex-col p-4 space-y-2 border border-gray-200 rounded-md">
-          <FormikTextInput
-            name={`${fieldName}.cost_reporting.s3_bucket_path`}
-            label="S3 Bucket Path"
-          />
-          <FormikTextInput
-            name={`${fieldName}.cost_reporting.table`}
-            label="Table"
-          />
-          <FormikTextInput
-            name={`${fieldName}.cost_reporting.database`}
-            label="Database"
-          />
-          <FormikTextInput
-            name={`${fieldName}.cost_reporting.region`}
-            label="Region"
-          />
+      <FormikCheckboxFieldsGroup name="costReporting" label="Cost Report">
+        <div className="flex flex-col space-y-2">
+          <label className="font-semibold text-sm">Cost Reporting</label>
+          <div className="flex flex-col p-4 space-y-2 border border-gray-200 rounded-md">
+            <FormikTextInput
+              name={`${fieldName}.cost_reporting.s3_bucket_path`}
+              label="S3 Bucket Path"
+            />
+            <FormikTextInput
+              name={`${fieldName}.cost_reporting.table`}
+              label="Table"
+            />
+            <FormikTextInput
+              name={`${fieldName}.cost_reporting.database`}
+              label="Database"
+            />
+            <FormikTextInput
+              name={`${fieldName}.cost_reporting.region`}
+              label="Region"
+            />
+          </div>
         </div>
-      </div>
+      </FormikCheckboxFieldsGroup>
 
       <ConfigRetentionSpec fieldName={`${name}.retention`} />
     </>

src/components/Forms/Configs/ConfigRentionSpec.tsx

@@ -34,7 +34,7 @@ export default function ConfigRetentionSpec({
     <FormikCheckboxFieldsGroup
       name={fieldName}
       label="Retention"
-      className="flex flex-col p-2 gap-4 border border-gray-200 rounded-md"
+      className="flex flex-col gap-4"
     >
       <div className="flex flex-col gap-2">
         <FieldArray