Fix UI to properly handle YAML and fix regressions

Author: EricWittmann

ui/ui-app/src/app/components/common/ArtifactTypeIcon.tsx

@@ -6,7 +6,7 @@ import { ArtifactTypes } from "@services/useArtifactTypesService.ts";
  * Properties
  */
 export type ArtifactTypeIconProps = {
-    type: string;
+    artifactType: string;
 };
 
 /**
@@ -15,7 +15,7 @@ export type ArtifactTypeIconProps = {
 export const ArtifactTypeIcon: FunctionComponent<ArtifactTypeIconProps> = (props: ArtifactTypeIconProps) => {
 
     return (
-        <div className={ArtifactTypes.getClassNames(props.type)} title={ArtifactTypes.getTitle(props.type)} />
+        <div className={ArtifactTypes.getClassNames(props.artifactType)} title={ArtifactTypes.getTitle(props.artifactType)} />
     );
 
 };

ui/ui-app/src/app/pages/artifact/components/tabs/ArtifactInfoTabContent.tsx

@@ -56,7 +56,7 @@ export const ArtifactInfoTabContent: FunctionComponent<ArtifactInfoTabContentPro
                     <CardTitle>
                         <div className="title-and-type">
                             <Flex>
-                                <FlexItem className="type"><ArtifactTypeIcon type={props.artifact.type} /></FlexItem>
+                                <FlexItem className="type"><ArtifactTypeIcon artifactType={props.artifact.artifactType} /></FlexItem>
                                 <FlexItem className="title">Artifact metadata</FlexItem>
                                 <FlexItem className="actions" align={{ default: "alignRight" }}>
                                     <IfAuth isDeveloper={true}>

ui/ui-app/src/app/pages/explore/components/artifactList/ArtifactList.tsx

@@ -37,7 +37,7 @@ export const ArtifactList: FunctionComponent<ArtifactListProps> = (props: Artifa
         if (artifact.description) {
             return artifact.description;
         }
-        return `An artifact of type ${artifact.type} with no description.`;
+        return `An artifact of type ${artifact.artifactType} with no description.`;
     };
 
     return (
@@ -48,7 +48,7 @@ export const ArtifactList: FunctionComponent<ArtifactListProps> = (props: Artifa
                         <DataListItemCells
                             dataListCells={[
                                 <DataListCell key="type icon" className="type-icon-cell">
-                                    <ArtifactTypeIcon type={artifact.type}/>
+                                    <ArtifactTypeIcon artifactType={artifact.artifactType}/>
                                 </DataListCell>,
                                 <DataListCell key="main content" className="content-cell">
                                     <div className="artifact-title">

ui/ui-app/src/app/pages/group/components/tabs/ArtifactsTable.tsx

@@ -64,7 +64,7 @@ export const ArtifactsTable: FunctionComponent<ArtifactsTableProps> = (props: Ar
         // Type.
         if (colIndex === 1) {
             return (
-                <ArtifactTypeIcon type={column.type} />
+                <ArtifactTypeIcon artifactType={column.artifactType} />
             );
         }
         // Created on.

ui/ui-app/src/app/pages/version/components/tabs/ContentTabContent.tsx

@@ -19,18 +19,18 @@ const getEditorMode = (artifactType: string, content: string): string => {
     const ct: string = detectContentType(artifactType, content);
     return TYPE_MAP[ct];
 };
-//
-// const formatContent = (artifactContent: string): string => {
-//     try {
-//         const pval: any = JSON.parse(artifactContent);
-//         if (pval) {
-//             return JSON.stringify(pval, null, 2);
-//         }
-//     } catch (e) {
-//         // Do nothing
-//     }
-//     return artifactContent;
-// };
+
+const formatJsonContent = (artifactContent: string): string => {
+    try {
+        const pval: any = JSON.parse(artifactContent);
+        if (pval) {
+            return JSON.stringify(pval, null, 2);
+        }
+    } catch (e) {
+        // Do nothing
+    }
+    return artifactContent;
+};
 
 
 /**
@@ -46,8 +46,11 @@ export type ContentTabContentProps = {
  * Models the content of the Artifact Content tab.
  */
 export const ContentTabContent: FunctionComponent<ContentTabContentProps> = (props: ContentTabContentProps) => {
-    const [content, setContent] = useState(props.versionContent);
-    const [editorMode, setEditorMode] = useState(getEditorMode(props.artifactType, props.versionContent));
+    const em: string = getEditorMode(props.artifactType, props.versionContent);
+    const fc: string = em === "json" ? formatJsonContent(props.versionContent) : props.versionContent;
+
+    const [content, setContent] = useState(fc);
+    const [editorMode, setEditorMode] = useState(em);
     const [compactButtons, setCompactButtons] = useState(false);
 
     const { ref, width = 0, height = 0 } = useResizeObserver<HTMLDivElement>();
@@ -61,18 +64,20 @@ export const ContentTabContent: FunctionComponent<ContentTabContentProps> = (pro
         if (mode === editorMode) {
             return;
         } else {
-            let content: string = `Error formatting code to: ${mode}`;
+            let newContent: string = `Error formatting code to: ${mode}`;
             try {
                 if (mode === "yaml") {
-                    content = YAML.stringify(JSON.parse(content), null, 4);
+                    newContent = YAML.stringify(JSON.parse(content), null, 4);
+                    console.info("NEW CONTENT (yaml): ", newContent);
                 } else {
-                    content = JSON.stringify(YAML.parse(content), null, 2);
+                    newContent = JSON.stringify(YAML.parse(content), null, 2);
+                    console.info("NEW CONTENT (json): ", newContent);
                 }
             } catch (e) {
                 handleInvalidContentError(e);
             }
             setEditorMode(mode);
-            setContent(content);
+            setContent(newContent);
         }
     };
 

ui/ui-app/src/app/pages/version/components/tabs/InfoTabContent.tsx

@@ -51,7 +51,7 @@ export const InfoTabContent: FunctionComponent<InfoTabContentProps> = (props: In
                     <CardTitle>
                         <div className="title-and-type">
                             <Flex>
-                                <FlexItem className="type"><ArtifactTypeIcon type={props.artifact.type} /></FlexItem>
+                                <FlexItem className="type"><ArtifactTypeIcon artifactType={props.artifact.artifactType} /></FlexItem>
                                 <FlexItem className="title">Version metadata</FlexItem>
                                 <FlexItem className="actions" align={{ default: "alignRight" }}>
                                     <IfAuth isDeveloper={true}>

ui/ui-app/src/models/artifactMetaData.model.ts

@@ -6,7 +6,7 @@ export interface ArtifactMetaData {
     name: string|null;
     description: string|null;
     labels: { [key: string]: string | undefined };
-    type: string;
+    artifactType: string;
     version: string;
     owner: string;
     createdOn: string;

ui/ui-app/src/models/searchedArtifact.model.ts

@@ -2,7 +2,7 @@ export interface SearchedArtifact {
 
     groupId: string|null;
     artifactId: string;
-    type: string;
+    artifactType: string;
     state: string;
     name: string;
     description: string;

ui/ui-app/src/models/searchedVersion.model.ts

@@ -3,7 +3,7 @@ export interface SearchedVersion {
     globalId: number;
     contentId: number|null;
     version: string;
-    type: string;
+    artifactType: string;
     state: string;
     name: string;
     description: string;

ui/ui-app/src/models/versionMetaData.model.ts

@@ -11,6 +11,6 @@ export interface VersionMetaData {
     contentId: number;
     globalId: number;
     state: string;
-    type: string;
+    artifactType: string;
 
 }

ui/ui-app/src/utils/content.utils.ts

@@ -1,5 +1,6 @@
 import YAML from "yaml";
 import { ContentTypes } from "@models/contentTypes.model.ts";
+import { isStringEmptyOrUndefined } from "@utils/string.utils.ts";
 
 /**
  * Returns true if the given content is JSON formatted.
@@ -99,8 +100,8 @@ export function contentToString(content: any): string {
 }
 
 
-export function detectContentType(type: string, content: string): string {
-    switch (type) {
+export function detectContentType(artifactType: string, content: string): string {
+    switch (artifactType) {
         case "PROTOBUF":
             return ContentTypes.APPLICATION_PROTOBUF;
         case "WSDL":
@@ -116,6 +117,8 @@ export function detectContentType(type: string, content: string): string {
         return ContentTypes.APPLICATION_XML;
     } else if (isYaml(content)) {
         return ContentTypes.APPLICATION_YAML;
+    } else if (!isStringEmptyOrUndefined(content) && (content.indexOf("proto2") != -1 || content.indexOf("proto3") != -1)) {
+        return ContentTypes.APPLICATION_PROTOBUF;
     } else {
         return ContentTypes.APPLICATION_OCTET_STREAM;
     }