✨ Enhance application inventory (konveyor#2468)

https://issues.redhat.com/browse/MTA-5245
Resolves: konveyor#2287

Update the inventory table, detail drawer, and create/edit modal to
support new data and actions needed to implement

## Summary by CodeRabbit

* **New Features**
  * Introduced a detailed application drawer with tabbed views for
    Details, Tags, Reports, Reviews, Tasks, and Platform information.
  * Added support for managing source platform and asset repository data
    in the application form.
  * Enhanced bulk and per-application actions in the applications table,
    including new actions for changing source platform, retrieving
    configurations, and generating assets.
  * Added schema-driven platform coordinates support and related UI
    components.
  * Introduced new hooks for fetching schemas and platform-specific schema
    data.
  * Added a multi-section application form with dynamic validation and
    platform-specific coordinates support.
  * Added new translation keys for actions and terms related to
    configurations, source platform, and assets.

* **Improvements**
  * Expanded application metadata and UI to display and edit additional
    platform, repository, and business service details.
  * Refined component structure and naming for clarity and
    maintainability.
  * Improved handling of empty states and localization throughout the UI.
  * Disabled automatic refetch and retries for application manifest
    fetching by default to improve performance.
  * Enhanced form validation and submission logic with improved data
    mapping and error handling.
  * Improved bulk action dropdown styling and conditional enabling based
    on selection.
  * Updated notification handling for application create and update
    actions.

* **Bug Fixes**
  * Ensured platform lists are always returned as arrays to prevent
    undefined errors.

* **Refactor**
  * Reorganized and consolidated UI components, removing deprecated or
    redundant files and updating import paths.
  * Converted schema-defined field components to controlled components
    with improved accessibility IDs.
  * Replaced local repository details component with a shared version for
    consistency.
  * Split application actions column into primary and secondary actions
    for better UX.
  * Renamed several status components for consistency.
  * Replaced single form hook with separate hooks for form data and form
    logic.
  * Centralized exports for detail drawer components.

* **Tests**
  * Updated application form tests to account for new platform data and
    improved validation synchronization.

* **Style**
  * Added new styles for the drawer tab container and its content.

---------

Signed-off-by: Elay Aharoni <[email protected]>
Signed-off-by: Scott J Dickerson <[email protected]>
Co-authored-by: Scott J Dickerson <[email protected]>

Author: 2 people

client/public/locales/en/translation.json

@@ -68,7 +68,10 @@
     "unlink": "Unlink",
     "view": "View",
     "viewErrorReport": "View error report",
-    "viewArchetypes": "View archetypes"
+    "viewArchetypes": "View archetypes",
+    "retrieveConfigurations": "Retrieve configurations",
+    "changeSourcePlatform": "Change source platform",
+    "generateAssets": "Generate assets"
   },
   "colors": {
     "black": "Black",
@@ -316,6 +319,7 @@
     "applicationImports": "Application imports",
     "applicationName": "Application name",
     "archetypeName": "Archetype name",
+    "applicationDiscoveryManifest": "Application discovery manifest",
     "applicationInformation": "Application information",
     "applicationFile": "Application file",
     "archetype": "Archetype",
@@ -328,6 +332,7 @@
     "assessmentQuestionnaires": "Assessment questionnaires",
     "assessmentNotes": "Assessment notes",
     "assessmentSummary": "Assessment summary",
+    "assetRepository": "Asset repository",
     "attachments": "Attachments",
     "autoTagging": "Automated Tagging",
     "binary": "Binary (Java)",
@@ -422,7 +427,6 @@
     "label": "Label",
     "loading": "Loading",
     "lowRisk": "Low risk",
-    "manifest": "Manifest",
     "manualTags": "Manual Tags",
     "maintainers": "Maintainers",
     "mavenConfig": "Maven configuration",
@@ -482,6 +486,8 @@
     "sourceBranch": "Branch",
     "sourceCode": "Source code",
     "sourcePlatforms": "Source platforms",
+    "sourcePlatform": "Source platform",
+    "sourcePlatformCoordinates": "Source platform coordinates",
     "sourceRepo": "Source Repository",
     "sourceRootPath": "Root path",
     "southboundDependencies": "Southbound dependencies",

client/src/app/api/models.ts

@@ -125,27 +125,36 @@ export interface Repository {
   path?: string;
 }
 
+/** A JSON document with its schema */
+export interface Document {
+  content: JsonDocument;
+  /** name of the schema */ schema: string;
+}
+
 export interface Application {
   id: number;
   name: string;
   description?: string;
+  bucket?: Ref;
+  repository?: Repository;
+  assets?: Repository;
+  binary?: string;
+  coordinates?: Document;
+  review?: Ref;
   comments?: string;
-  businessService?: Ref;
+  identities?: Ref[];
   tags?: TagRef[];
+  businessService?: Ref;
   owner?: Ref;
   contributors?: Ref[];
-  review?: Ref;
-  identities?: Ref[];
-  repository?: Repository;
-  binary?: string;
   migrationWave: Ref | null;
+  platform?: Ref;
+  archetypes?: Ref[];
   assessments?: Ref[];
   assessed?: boolean;
-  archetypes?: Ref[];
   risk?: Risk;
   confidence?: number;
   effort?: number;
-  platform?: Ref;
 }
 
 export interface Review {
@@ -958,6 +967,7 @@ export interface Manifest {
 
 // Could use https://www.npmjs.com/package/@types/json-schema in future if needed
 export interface JsonSchemaObject {
+  $schema?: string;
   type: "string" | "integer" | "number" | "boolean" | "object" | "array";
   title?: string;
   description?: string;
@@ -992,3 +1002,19 @@ export interface JsonSchemaObject {
   /** For type object, whether additional properties are allowed */
   additionalProperties?: boolean;
 }
+
+export interface Schema {
+  name: string;
+  domain: string;
+  variant: string;
+  subject: string;
+  versions: Array<{
+    id: number;
+    definition: JsonSchemaObject;
+  }>;
+}
+
+export interface TargetedSchema {
+  name: string;
+  definition: JsonSchemaObject;
+}

client/src/app/api/rest.ts

@@ -122,6 +122,8 @@ export const HEADERS: Record<string, RawAxiosRequestHeaders> = {
 
 export * from "./rest/analysis";
 export * from "./rest/files";
+export * from "./rest/schemas";
+export * from "./rest/generators";
 
 /**
  * Provide consistent fetch and processing for server side filtering and sorting with

client/src/app/api/rest/schemas.ts

@@ -0,0 +1,35 @@
+import axios from "axios";
+
+import { Schema, TargetedSchema } from "../models";
+import { hub, template } from "../rest";
+
+const SCHEMAS = hub`/schemas`;
+const TARGETED_SCHEMA = hub`/schema/jsd/{{domain}}/{{variant}}/{{subject}}`;
+
+export const getSchemas = () =>
+  axios.get<Schema[]>(SCHEMAS).then(({ data }) => data);
+
+export const getSchemaByName = (name: string) =>
+  axios.get<Schema>(`${SCHEMAS}/${name}`).then(({ data }) => data);
+
+export const getPlatformCoordinatesSchema = (platformKind: string) =>
+  axios
+    .get<TargetedSchema>(
+      template(TARGETED_SCHEMA, {
+        domain: "platform",
+        variant: platformKind,
+        subject: "coordinates",
+      })
+    )
+    .then(({ data }) => data);
+
+export const getPlatformDiscoveryFiltersSchema = (platformKind: string) =>
+  axios
+    .get<TargetedSchema>(
+      template(TARGETED_SCHEMA, {
+        domain: "platform",
+        variant: platformKind,
+        subject: "filters",
+      })
+    )
+    .then(({ data }) => data);

client/src/app/components/EmptyTextMessage.tsx

@@ -1,16 +1,19 @@
 import React from "react";
 import { Text } from "@patternfly/react-core";
+import { useTranslation } from "react-i18next";
 
 export interface EmptyTextMessageProps {
-  message: string;
+  message?: string;
 }
 
 export const EmptyTextMessage: React.FC<EmptyTextMessageProps> = ({
   message,
 }) => {
+  const { t } = useTranslation();
+
   return (
     <Text className="pf-v5-u-color-200 pf-v5-u-font-weight-light">
-      <i>{message}</i>
+      <i>{message || t("terms.notAvailable")}</i>
     </Text>
   );
 };

client/src/app/components/detail-drawer/drawer-tabs-container.css

@@ -0,0 +1,34 @@
+.drawer-tabs-container {
+  flex-grow: 1;
+  position: relative;
+  min-height: 0;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.drawer-tabs-container .pf-v5-c-tabs {
+  --pf-v5-c-tabs__scroll-button--Width: 2.5rem;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.drawer-tabs-container > :not(.pf-v5-c-tabs) {
+  flex-grow: 1;
+  position: relative;
+  min-height: 0; /* keep the content from growing beyond the .drawer-tabs-container */
+}
+
+.drawer-tab-content {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.drawer-tab-content__section-label {
+  padding-block-start: var(--pf-v5-global--spacer--md);
+  margin-block-end: var(--pf-v5-global--spacer--xs);
+}
+
+.drawer-tab-content__section-content {
+  padding-left: var(--pf-v5-global--spacer--xs);
+}

client/src/app/components/detail-drawer/drawer-tabs-container.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Panel, Title, PanelMain } from "@patternfly/react-core";
+import "./drawer-tabs-container.css";
+
+export const DrawerTabsContainer: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return <div className="drawer-tabs-container">{children}</div>;
+};
+
+export const DrawerTabContent: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <Panel className={`drawer-tab-content`}>
+      <PanelMain>{children}</PanelMain>
+    </Panel>
+  );
+};
+
+export const DrawerTabContentSection: React.FC<{
+  label?: string;
+  children: React.ReactNode;
+}> = ({ label, children }) => {
+  return (
+    <div className="drawer-tab-content__section">
+      {label && (
+        <Title
+          headingLevel="h4"
+          size="md"
+          className="drawer-tab-content__section-label"
+        >
+          {label}
+        </Title>
+      )}
+      <div className="drawer-tab-content__section-content">{children}</div>
+    </div>
+  );
+};

client/src/app/components/detail-drawer/index.tsx

@@ -0,0 +1,4 @@
+export * from "./drawer-tabs-container";
+export * from "./repository-details";
+export * from "./review-fields";
+export * from "./review-label";

client/src/app/components/detail-drawer/repository-details.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+} from "@patternfly/react-core";
+
+import { Repository } from "@app/api/models";
+
+export const RepositoryDetails: React.FC<{ repository: Repository }> = ({
+  repository,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <DescriptionList isHorizontal isCompact>
+      {repository.kind && (
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.repositoryType")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {repository.kind || ""}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      )}
+      {repository.url && (
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.url")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {repository.url || ""}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      )}
+      {repository.branch && (
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.branch")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {repository.branch || ""}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      )}
+      {repository.path && (
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.path")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {repository.path || ""}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      )}
+      {/* TODO: Add credentials, show the Identity name, the default, or "Not available" */}
+    </DescriptionList>
+  );
+};

client/src/app/components/schema-defined-fields/SchemaAsCodeEditor.tsx

@@ -22,6 +22,7 @@ type ControlledEditor = {
 };
 
 export interface ISchemaAsCodeEditorProps {
+  id: string;
   jsonDocument: object;
   jsonSchema?: JsonSchemaObject;
   onDocumentSaved?: (newSchemaContent: object) => void;
@@ -30,6 +31,7 @@ export interface ISchemaAsCodeEditorProps {
 }
 
 export const SchemaAsCodeEditor = ({
+  id,
   jsonDocument,
   jsonSchema,
   onDocumentSaved,
@@ -38,10 +40,11 @@ export const SchemaAsCodeEditor = ({
 }: ISchemaAsCodeEditorProps) => {
   const editorRef = React.useRef<ControlledEditor>();
 
-  const initialCode = JSON.stringify(jsonDocument, null, 2);
-
-  const [currentCode, setCurrentCode] = React.useState(initialCode);
+  const [currentCode, setCurrentCode] = React.useState(
+    JSON.stringify(jsonDocument, null, 2)
+  );
   const [okToSave, setOkToSave] = React.useState(true);
+
   const focusMovedOnSelectedDocumentChange = React.useRef<boolean>(false);
   React.useEffect(() => {
     if (currentCode && !focusMovedOnSelectedDocumentChange.current) {
@@ -84,13 +87,14 @@ export const SchemaAsCodeEditor = ({
         }
       } catch (error) {
         console.error("Invalid JSON:", error);
-        // TODO: Use useNotify() to toast the error to the user
+        // TODO: Use useNotify() to toast the save error to the user
       }
     }
   };
 
   return (
     <CodeEditor
+      id={id}
       className="schema-defined-field-viewer-code-editor"
       isCopyEnabled
       isDarkTheme