✨ Enhance application inventory

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