Action Center: Create new system from results in modal

clients/admin-ui/cypress/e2e/action-center.cy.ts

@@ -1,4 +1,9 @@
-import { stubActionCenter, stubPlus } from "cypress/support/stubs";
+import {
+  stubActionCenter,
+  stubPlus,
+  stubSystemVendors,
+  stubVendorList,
+} from "cypress/support/stubs";
 
 import {
   ACTION_CENTER_ROUTE,
@@ -140,9 +145,12 @@ describe("Action center", () => {
       cy.getByTestId("column-domains").should("exist");
       cy.getByTestId("column-actions").should("exist");
       cy.getByTestId("row-0-col-system_name").within(() => {
-        cy.getByTestId("change-icon").should("exist"); // new result
+        cy.getByTestId("change-icon").should("exist");
         cy.contains("Uncategorized assets").should("exist");
       });
+      cy.getByTestId("row-3-col-system_name").within(() => {
+        cy.getByTestId("change-icon").should("exist"); // new system
+      });
       // TODO: [HJ-356] uncomment when data use column is implemented
       /* // data use column should be empty for uncategorized assets
       cy.getByTestId("row-0-col-data_use").children().should("have.length", 0);
@@ -333,6 +341,26 @@ describe("Action center", () => {
         'Browser Request "collect" has been assigned to Demo Marketing System.',
       );
     });
+    it("should allow creating a new system and assigning an asset to it", () => {
+      stubVendorList();
+      stubSystemVendors();
+      cy.getByTestId("row-4-col-system").within(() => {
+        cy.getByTestId("system-badge").click();
+      });
+      cy.wait("@getSystemsPaginated");
+      cy.getByTestId("add-new-system").click();
+      cy.getByTestId("add-modal-content").should("exist");
+      cy.getByTestId("vendor-name-select").antSelect("Aniview LTD");
+      cy.getByTestId("save-btn").click();
+      // adds new system
+      cy.wait("@postSystemVendors");
+      // assigns asset to new system
+      cy.wait("@setAssetSystem");
+      cy.getByTestId("success-alert").should(
+        "contain",
+        'Test System has been added to your system inventory and the Browser Request "gtm.js" has been assigned to that system.',
+      );
+    });
     it("should add individual assets", () => {
       cy.getByTestId("row-0-col-actions").within(() => {
         cy.getByTestId("add-btn").click({ force: true });

clients/admin-ui/cypress/support/stubs.ts

@@ -365,6 +365,17 @@ export const stubSystemVendors = () => {
   cy.intercept("GET", "/api/v1/plus/dictionary/system-vendors", {
     fixture: "systems/system-vendors.json",
   }).as("getSystemVendors");
+  cy.intercept("POST", "/api/v1/plus/dictionary/system-vendors", {
+    body: {
+      systems: [
+        {
+          id: "123",
+          name: "Test System",
+          fides_key: "test-system",
+        },
+      ],
+    },
+  }).as("postSystemVendors");
 };
 
 export const stubTranslationConfig = (enabled: boolean) => {

clients/admin-ui/src/features/common/dropdown/SystemSelect.tsx

@@ -1,19 +1,46 @@
 import { AntSelect as Select, AntSelectProps as SelectProps } from "fidesui";
-import { useCallback, useMemo, useState } from "react";
+import {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 import { useGetSystemsQuery } from "~/features/system/system.slice";
 
+import { CustomSelectOption } from "../form/CustomSelectOption";
 import { debounce } from "../utils";
 
 const OPTIONS_LIMIT = 25;
 
+const dropdownRender = (
+  menu: ReactNode,
+  onAddSystem: MouseEventHandler<HTMLElement>,
+) => {
+  return (
+    <>
+      <CustomSelectOption
+        onClick={onAddSystem}
+        data-testid="add-new-system"
+        id="add-new-system"
+      >
+        Add new system +
+      </CustomSelectOption>
+      {menu}
+    </>
+  );
+};
+
 interface SystemSelectProps
   extends Omit<
     SelectProps,
     "options" | "showSearch" | "filterOption" | "onSearch"
-  > {}
+  > {
+  onAddSystem?: MouseEventHandler<HTMLButtonElement>;
+}
 
-export const SystemSelect = ({ ...props }: SystemSelectProps) => {
+export const SystemSelect = ({ onAddSystem, ...props }: SystemSelectProps) => {
   const [searchValue, setSearchValue] = useState<string>();
   const { data, isFetching } = useGetSystemsQuery({
     page: 1,
@@ -45,6 +72,9 @@ export const SystemSelect = ({ ...props }: SystemSelectProps) => {
       placeholder="Search..."
       aria-label="Search for a system to select"
       dropdownStyle={{ minWidth: "500px" }}
+      dropdownRender={
+        onAddSystem ? (menu) => dropdownRender(menu, onAddSystem) : undefined
+      }
       data-testid="system-select"
       {...props}
       showSearch

clients/admin-ui/src/features/common/form/CustomSelectOption.tsx

@@ -0,0 +1,31 @@
+import { AntButton as Button, AntButtonProps } from "fidesui";
+
+interface CustomSelectOptionProps extends Omit<AntButtonProps, "type"> {}
+
+/**
+ * A button that looks like an Ant Select Option for use in custom dropdowns.
+ * NOTE: Use with caution, as this option will not be keyboard accessible. Ideally use the Ant Select component's native menu or have a fallback for keyboard users.
+ * @params extend AntButton
+ */
+export const CustomSelectOption = ({
+  children,
+  className,
+  style,
+  ...props
+}: CustomSelectOptionProps) => {
+  return (
+    <Button
+      {...props}
+      type="text"
+      className={`w-full justify-start ${className}`}
+      style={{
+        fontWeight: 600,
+        padding: "var(--ant-select-option-padding)",
+        backgroundColor: "var(--ant-select-option-selected-bg)",
+        ...style,
+      }}
+    >
+      {children}
+    </Button>
+  );
+};

clients/admin-ui/src/features/common/modals/FormModal.tsx

@@ -28,6 +28,7 @@ const FormModal = ({
     isCentered
     scrollBehavior="inside"
     size="xl"
+    id="add-modal"
     {...props}
   >
     <ModalOverlay />

clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/DiscoveredAssetActionsCell.tsx

@@ -36,7 +36,7 @@ export const DiscoveredAssetActionsCell = ({
       urnList: [urn],
     });
     if (isErrorResult(result)) {
-      errorAlert("There was adding the asset to the system inventory");
+      errorAlert(getErrorMessage(result.error));
     } else {
       successAlert(
         `${type} "${name}" has been added to the system inventory.`,

clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/cells/SystemCell.tsx

@@ -1,12 +1,13 @@
 import { AntButton, EditIcon, Icons } from "fidesui";
-import { useState } from "react";
+import { MouseEventHandler, useCallback, useState } from "react";
 
 import { SystemSelect } from "~/features/common/dropdown/SystemSelect";
 import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
 import { useAlert } from "~/features/common/hooks";
 import { getTableTHandTDStyles } from "~/features/common/table/v2/util";
 import ClassificationCategoryBadge from "~/features/data-discovery-and-detection/ClassificationCategoryBadge";
 import { useUpdateResourceCategoryMutation } from "~/features/data-discovery-and-detection/discovery-detection.slice";
+import { AddNewSystemModal } from "~/features/system/AddNewSystemModal";
 import { StagedResourceAPIResponse } from "~/types/api";
 
 interface SystemCellProps {
@@ -25,11 +26,20 @@ export const SystemCell = ({
     system: systemName,
   } = aggregateSystem;
   const [isEditing, setIsEditing] = useState(false);
+  const [isNewSystemModalOpen, setIsNewSystemModalOpen] = useState(false);
   const [updateResourceCategoryMutation, { isLoading }] =
     useUpdateResourceCategoryMutation();
-
   const { successAlert, errorAlert } = useAlert();
 
+  const onAddSystem: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
+    e.preventDefault();
+    setIsNewSystemModalOpen(true);
+  }, []);
+
+  const handleCloseNewSystemModal = () => {
+    setIsNewSystemModalOpen(false);
+  };
+
   const handleSelectSystem = async (
     fidesKey: string,
     newSystemName: string,
@@ -85,13 +95,28 @@ export const SystemCell = ({
           className="w-full"
           autoFocus
           defaultOpen
-          onBlur={() => setIsEditing(false)}
+          onBlur={(e) => {
+            // Close the dropdown unless the user is clicking the "Add new system" button, otherwise it won't open the modal
+            if (e.relatedTarget?.getAttribute("id") !== "add-new-system") {
+              setIsEditing(false);
+            }
+          }}
+          onAddSystem={onAddSystem}
           onSelect={(fidesKey: string, option) =>
             handleSelectSystem(fidesKey, option.label as string)
           }
           loading={isLoading}
         />
       )}
+      {isNewSystemModalOpen && (
+        <AddNewSystemModal
+          isOpen
+          onClose={handleCloseNewSystemModal}
+          onSuccessfulSubmit={(fidesKey, name) =>
+            handleSelectSystem(fidesKey, name, true)
+          }
+        />
+      )}
     </>
   );
 };