Fix errors in the UI due to REST API changes.

Apicurio · Mar 13, 2024 · 5bad384 · 5bad384
1 parent e43f6a1
commit 5bad384
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 80 deletions.
diff --git a/ui/ui-app/src/app/pages/artifactVersion/ArtifactVersionPage.tsx b/ui/ui-app/src/app/pages/artifactVersion/ArtifactVersionPage.tsx
@@ -37,37 +37,22 @@ import { LoggerService, useLoggerService } from "@services/useLoggerService.ts";
 import { CreateVersionData, EditableMetaData, GroupsService, useGroupsService } from "@services/useGroupsService.ts";
 import { DownloadService, useDownloadService } from "@services/useDownloadService.ts";
 import { ArtifactTypes } from "@services/useArtifactTypesService.ts";
+import { VersionMetaData } from "@models/versionMetaData.model.ts";
 
 
 export type ArtifactVersionPageProps = {
     // No properties
 }
 
-const EMPTY_ARTIFACT_META_DATA: ArtifactMetaData = {
-    groupId: null,
-    id: "",
-    name: "",
-    description: "",
-    labels: {},
-    type: "",
-    version: "",
-    owner: "",
-    createdOn: "",
-    modifiedBy: "",
-    modifiedOn: "",
-    globalId: 1,
-    contentId: 1,
-    state: ""
-};
-
 /**
  * The artifact version page.
  */
 export const ArtifactVersionPage: FunctionComponent<ArtifactVersionPageProps> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [activeTabKey, setActiveTabKey] = useState("overview");
-    const [artifact, setArtifact] = useState<ArtifactMetaData>(EMPTY_ARTIFACT_META_DATA);
+    const [artifact, setArtifact] = useState<ArtifactMetaData>();
+    const [artifactVersion, setArtifactVersion] = useState<VersionMetaData>();
     const [artifactContent, setArtifactContent] = useState("");
     const [invalidContentError, setInvalidContentError] = useState<ApiError>();
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -109,12 +94,17 @@ export const ArtifactVersionPage: FunctionComponent<ArtifactVersionPageProps> =
         }
         logger.info("Loading data for artifact: ", artifactId);
         return [
-            groups.getArtifactMetaData(gid, artifactId as string, version as string)
+            groups.getArtifactMetaData(gid, artifactId as string)
                 .then(setArtifact)
                 .catch(error => {
                     setPageError(toPageError(error, "Error loading page data."));
                 }),
-            groups.getArtifactContent(gid, artifactId as string, version as string)
+            groups.getArtifactVersionMetaData(gid, artifactId as string, version as string)
+                .then(setArtifactVersion)
+                .catch(error => {
+                    setPageError(toPageError(error, "Error loading page data."));
+                }),
+            groups.getArtifactVersionContent(gid, artifactId as string, version as string)
                 .then(setArtifactContent)
                 .catch(e => {
                     logger.warn("Failed to get artifact content: ", e);
@@ -153,12 +143,7 @@ export const ArtifactVersionPage: FunctionComponent<ArtifactVersionPageProps> =
     };
 
     const showDocumentationTab = (): boolean => {
-        if (artifact) {
-            // return (artifact.type === "OPENAPI" || artifact.type === "ASYNCAPI") && artifact.state !== "DISABLED";
-            return artifact.type === "OPENAPI" && artifact.state !== "DISABLED";
-        } else {
-            return false;
-        }
+        return artifact?.type === "OPENAPI" && artifactVersion?.state !== "DISABLED";
     };
 
     const doEnableRule = (ruleType: string): void => {
@@ -228,7 +213,7 @@ export const ArtifactVersionPage: FunctionComponent<ArtifactVersionPageProps> =
     };
 
     const nameOrId = (): string => {
-        return artifact?.name || artifact?.id || "";
+        return artifact?.name || artifact?.artifactId || "";
     };
 
     const artifactType = (): string => {
@@ -273,7 +258,7 @@ export const ArtifactVersionPage: FunctionComponent<ArtifactVersionPageProps> =
             };
             groups.createArtifactVersion(groupId as string, artifactId as string, data).then(versionMetaData => {
                 const groupId: string = versionMetaData.groupId ? versionMetaData.groupId : "default";
-                const artifactVersionLocation: string = `/artifacts/${ encodeURIComponent(groupId) }/${ encodeURIComponent(versionMetaData.id) }/versions/${versionMetaData.version}`;
+                const artifactVersionLocation: string = `/artifacts/${ encodeURIComponent(groupId) }/${ encodeURIComponent(versionMetaData.artifactId) }/versions/${versionMetaData.version}`;
                 logger.info("[ArtifactVersionPage] Artifact version successfully uploaded.  Redirecting to details: ", artifactVersionLocation);
                 pleaseWait(false, "");
                 appNavigation.navigateTo(artifactVersionLocation);
@@ -364,7 +349,9 @@ export const ArtifactVersionPage: FunctionComponent<ArtifactVersionPageProps> =
 
     const tabs: any[] = [
         <Tab eventKey="overview" title="Overview" key="overview" tabContentId="tab-info">
-            <InfoTabContent artifact={artifact}
+            <InfoTabContent
+                artifact={artifact as ArtifactMetaData}
+                version={artifactVersion as VersionMetaData}
                 isLatest={version === "latest"}
                 rules={rules}
                 onEnableRule={doEnableRule}
@@ -376,13 +363,13 @@ export const ArtifactVersionPage: FunctionComponent<ArtifactVersionPageProps> =
             />
         </Tab>,
         <Tab eventKey="documentation" title="Documentation" key="documentation" className="documentation-tab">
-            <DocumentationTabContent artifactContent={artifactContent} artifactType={artifact.type} />
+            <DocumentationTabContent artifactContent={artifactContent} artifactType={artifact?.type as string} />
         </Tab>,
         <Tab eventKey="content" title="Content" key="content">
-            <ContentTabContent artifactContent={artifactContent} artifactType={artifact.type} />
+            <ContentTabContent artifactContent={artifactContent} artifactType={artifact?.type as string} />
         </Tab>,
         <Tab eventKey="references" title="References" key="references">
-            <ReferencesTabContent artifact={artifact} />
+            <ReferencesTabContent version={artifactVersion as VersionMetaData} />
         </Tab>,
     ];
     if (!showDocumentationTab()) {

diff --git a/ui/ui-app/src/app/pages/artifactVersion/components/tabs/InfoTabContent.tsx b/ui/ui-app/src/app/pages/artifactVersion/components/tabs/InfoTabContent.tsx
@@ -18,15 +18,17 @@ import {
     Truncate
 } from "@patternfly/react-core";
 import { DownloadIcon, PencilAltIcon } from "@patternfly/react-icons";
-import { ArtifactMetaData } from "@models/artifactMetaData.model.ts";
 import { Rule } from "@models/rule.model.ts";
 import { FromNow, If } from "@apicurio/common-ui-components";
+import { VersionMetaData } from "@models/versionMetaData.model.ts";
+import { ArtifactMetaData } from "@models/artifactMetaData.model.ts";
 
 /**
  * Properties
  */
 export type InfoTabContentProps = {
     artifact: ArtifactMetaData;
+    version: VersionMetaData;
     isLatest: boolean;
     rules: Rule[];
     onEnableRule: (ruleType: string) => void;
@@ -43,11 +45,11 @@ export type InfoTabContentProps = {
 export const InfoTabContent: FunctionComponent<InfoTabContentProps> = (props: InfoTabContentProps) => {
 
     const description = (): string => {
-        return props.artifact.description || "No description";
+        return props.version.description || "No description";
     };
 
     const artifactName = (): string => {
-        return props.artifact.name || "No name";
+        return props.version.name || "No name";
     };
 
     return (
@@ -79,41 +81,41 @@ export const InfoTabContent: FunctionComponent<InfoTabContentProps> = (props: In
                                 <DescriptionListTerm>Name</DescriptionListTerm>
                                 <DescriptionListDescription
                                     data-testid="artifact-details-name"
-                                    className={!props.artifact.name ? "empty-state-text" : ""}
+                                    className={!props.version.name ? "empty-state-text" : ""}
                                 >
                                     { artifactName() }
                                 </DescriptionListDescription>
                             </DescriptionListGroup>
                             <DescriptionListGroup>
                                 <DescriptionListTerm>ID</DescriptionListTerm>
-                                <DescriptionListDescription data-testid="artifact-details-id">{props.artifact.id}</DescriptionListDescription>
+                                <DescriptionListDescription data-testid="artifact-details-id">{props.version.artifactId}</DescriptionListDescription>
                             </DescriptionListGroup>
                             <DescriptionListGroup>
                                 <DescriptionListTerm>Description</DescriptionListTerm>
                                 <DescriptionListDescription
                                     data-testid="artifact-details-description"
-                                    className={!props.artifact.description ? "empty-state-text" : ""}
+                                    className={!props.version.description ? "empty-state-text" : ""}
                                 >
                                     { description() }
                                 </DescriptionListDescription>
                             </DescriptionListGroup>
                             <DescriptionListGroup>
                                 <DescriptionListTerm>Status</DescriptionListTerm>
-                                <DescriptionListDescription data-testid="artifact-details-state">{props.artifact.state}</DescriptionListDescription>
+                                <DescriptionListDescription data-testid="artifact-details-state">{props.version.state}</DescriptionListDescription>
                             </DescriptionListGroup>
                             <DescriptionListGroup>
                                 <DescriptionListTerm>Created</DescriptionListTerm>
                                 <DescriptionListDescription data-testid="artifact-details-created-on">
-                                    <FromNow date={props.artifact.createdOn} />
+                                    <FromNow date={props.version.createdOn} />
                                 </DescriptionListDescription>
                             </DescriptionListGroup>
-                            <If condition={props.artifact.owner !== undefined && props.artifact.owner !== ""}>
+                            <If condition={props.version.owner !== undefined && props.version.owner !== ""}>
                                 <DescriptionListGroup>
                                     <DescriptionListTerm>Owner</DescriptionListTerm>
                                     <DescriptionListDescription data-testid="artifact-details-created-by">
-                                        <span>{props.artifact.owner}</span>
+                                        <span>{props.version.owner}</span>
                                         <span>
-                                            <IfAuth isAdminOrOwner={true} owner={props.artifact.owner}>
+                                            <IfAuth isAdminOrOwner={true} owner={props.version.owner}>
                                                 <IfFeature feature="readOnly" isNot={true}>
                                                     <Button id="edit-action"
                                                         data-testid="artifact-btn-change-owner"
@@ -133,17 +135,17 @@ export const InfoTabContent: FunctionComponent<InfoTabContentProps> = (props: In
                             </DescriptionListGroup>
                             <DescriptionListGroup>
                                 <DescriptionListTerm>Global ID</DescriptionListTerm>
-                                <DescriptionListDescription data-testid="artifact-details-global-id">{props.artifact.globalId}</DescriptionListDescription>
+                                <DescriptionListDescription data-testid="artifact-details-global-id">{props.version.globalId}</DescriptionListDescription>
                             </DescriptionListGroup>
                             <DescriptionListGroup>
                                 <DescriptionListTerm>Content ID</DescriptionListTerm>
-                                <DescriptionListDescription data-testid="artifact-details-content-id">{props.artifact.contentId}</DescriptionListDescription>
+                                <DescriptionListDescription data-testid="artifact-details-content-id">{props.version.contentId}</DescriptionListDescription>
                             </DescriptionListGroup>
                             <DescriptionListGroup>
                                 <DescriptionListTerm>Labels</DescriptionListTerm>
-                                {!props.artifact.labels || !Object.keys(props.artifact.labels).length ?
+                                {!props.version.labels || !Object.keys(props.version.labels).length ?
                                     <DescriptionListDescription data-testid="artifact-details-labels" className="empty-state-text">No labels</DescriptionListDescription> :
-                                    <DescriptionListDescription data-testid="artifact-details-labels">{Object.entries(props.artifact.labels).map(([key, value]) =>
+                                    <DescriptionListDescription data-testid="artifact-details-labels">{Object.entries(props.version.labels).map(([key, value]) =>
                                         <Label key={`label-${key}`} color="purple" style={{ marginBottom: "2px", marginRight: "5px" }}>
                                             <Truncate className="label-truncate" content={`${key}=${value}`} />
                                         </Label>

diff --git a/ui/ui-app/src/app/pages/artifactVersion/components/tabs/ReferencesTabContent.tsx b/ui/ui-app/src/app/pages/artifactVersion/components/tabs/ReferencesTabContent.tsx
@@ -2,7 +2,6 @@ import { FunctionComponent, useEffect, useState } from "react";
 import "./ReferencesTabContent.css";
 import { EmptyState, EmptyStateBody, EmptyStateVariant, Title } from "@patternfly/react-core";
 import { ReferenceList, ReferencesSort } from "./ReferenceList.tsx";
-import { ArtifactMetaData } from "@models/artifactMetaData.model.ts";
 import { ArtifactReference } from "@models/artifactReference.model.ts";
 import {
     ReferencesToolbar,
@@ -12,18 +11,19 @@ import { ReferenceType } from "@models/referenceType.ts";
 import { ListWithToolbar } from "@apicurio/common-ui-components";
 import { GroupsService, Paging, useGroupsService } from "@services/useGroupsService.ts";
 import { LoggerService, useLoggerService } from "@services/useLoggerService.ts";
+import { VersionMetaData } from "@models/versionMetaData.model.ts";
 
 /**
  * Properties
  */
 export type ReferencesTabContentProps = {
-    artifact: ArtifactMetaData | null;
+    version: VersionMetaData | null;
 };
 
 /**
  * The UI of the "References" tab in the artifact version details page.
  */
-export const ReferencesTabContent: FunctionComponent<ReferencesTabContentProps> = ({ artifact }: ReferencesTabContentProps) => {
+export const ReferencesTabContent: FunctionComponent<ReferencesTabContentProps> = ({ version }: ReferencesTabContentProps) => {
     const [ isLoading, setLoading ] = useState<boolean>(true);
     const [ isError, setError ] = useState<boolean>(false);
     const [ allReferences, setAllReferences ] = useState<ArtifactReference[]>([]);
@@ -50,14 +50,14 @@ export const ReferencesTabContent: FunctionComponent<ReferencesTabContentProps>
     useEffect(() => {
         setLoading(true);
 
-        groups.getArtifactReferences(artifact?.globalId as number, referenceType).then(references => {
+        groups.getArtifactReferences(version?.globalId as number, referenceType).then(references => {
             setAllReferences(references);
         }).catch(error => {
             logger.error(error);
             setLoading(false);
             setError(true);
         });
-    }, [artifact, referenceType]);
+    }, [version, referenceType]);
 
     // Whenever we get new references, or the paging or sorting changes, perform filtering/paging on the references
     useEffect(() => {

diff --git a/ui/ui-app/src/app/pages/artifacts/ArtifactsPage.tsx b/ui/ui-app/src/app/pages/artifacts/ArtifactsPage.tsx
@@ -189,7 +189,7 @@ export const ArtifactsPage: FunctionComponent<ArtifactsPageProps> = () => {
             }
             groups.createArtifact(data).then(metaData => {
                 const groupId: string = metaData.groupId ? metaData.groupId : "default";
-                const artifactLocation: string = `/artifacts/${ encodeURIComponent(groupId) }/${ encodeURIComponent(metaData.id) }`;
+                const artifactLocation: string = `/artifacts/${ encodeURIComponent(groupId) }/${ encodeURIComponent(metaData.artifactId) }`;
                 logger.info("[ArtifactsPage] Artifact successfully uploaded.  Redirecting to details: ", artifactLocation);
                 appNavigation.navigateTo(artifactLocation);
             }).catch( error => {

diff --git a/ui/ui-app/src/app/pages/artifacts/components/artifactList/ArtifactList.tsx b/ui/ui-app/src/app/pages/artifacts/components/artifactList/ArtifactList.tsx
@@ -45,7 +45,7 @@ export const ArtifactList: FunctionComponent<ArtifactListProps> = (props: Artifa
         <DataList aria-label="List of artifacts" className="artifact-list">
             {
                 props.artifacts.map( (artifact, /* idx */) =>
-                    <DataListItemRow className="artifact-list-item" key={artifact.id}>
+                    <DataListItemRow className="artifact-list-item" key={artifact.artifactId}>
                         <DataListItemCells
                             dataListCells={[
                                 <DataListCell key="type icon" className="type-icon-cell">
@@ -54,7 +54,7 @@ export const ArtifactList: FunctionComponent<ArtifactListProps> = (props: Artifa
                                 <DataListCell key="main content" className="content-cell">
                                     <div className="artifact-title">
                                         <ArtifactGroup groupId={artifact.groupId} onClick={props.onGroupClick} />
-                                        <ArtifactName groupId={artifact.groupId} id={artifact.id} name={artifact.name} />
+                                        <ArtifactName groupId={artifact.groupId} id={artifact.artifactId} name={artifact.name} />
                                         {
                                             statuses(artifact).map( status =>
                                                 <Badge className="status-badge" key={status} isRead={true}>{status}</Badge>

diff --git a/ui/ui-app/src/models/artifactMetaData.model.ts b/ui/ui-app/src/models/artifactMetaData.model.ts
@@ -2,7 +2,7 @@
 export interface ArtifactMetaData {
 
     groupId: string|null;
-    id: string;
+    artifactId: string;
     name: string|null;
     description: string|null;
     labels: { [key: string]: string };

diff --git a/ui/ui-app/src/models/searchedArtifact.model.ts b/ui/ui-app/src/models/searchedArtifact.model.ts
@@ -1,7 +1,7 @@
 export interface SearchedArtifact {
 
     groupId: string|null;
-    id: string;
+    artifactId: string;
     type: string;
     state: string;
     name: string;

diff --git a/ui/ui-app/src/models/versionMetaData.model.ts b/ui/ui-app/src/models/versionMetaData.model.ts
@@ -1,15 +1,14 @@
 export interface VersionMetaData {
 
     groupId: string|null;
-    id: string;
+    artifactId: string;
     name: string|null;
     description: string|null;
-    labels: string[]|null;
-    type: string;
-    version: number;
+    labels: { [key: string]: string };
+    version: string;
     owner: string;
     createdOn: Date;
-    contentId: number|null;
+    contentId: number;
     globalId: number;
     state: string;