UI: MVP Readiness

api_app/schemas/shared_service.json

@@ -5,21 +5,27 @@
   "title": "Shared Service Default Parameters",
   "description": "These parameters are required for all shared services",
   "required": [
-      "display_name",
-      "description"
+    "display_name",
+    "description"
   ],
   "properties": {
-      "display_name": {
-          "type": "string",
-          "title": "Name for the shared service",
-          "description": "The name of the shared service to be displayed to users",
-          "updateable": true
-      },
-      "description": {
-          "type": "string",
-          "title": "Description of the shared service",
-          "description": "Description of the shared service",
-          "updateable": true
-      }
+    "display_name": {
+      "type": "string",
+      "title": "Name for the shared service",
+      "description": "The name of the shared service to be displayed to users",
+      "updateable": true
+    },
+    "description": {
+      "type": "string",
+      "title": "Description of the shared service",
+      "description": "Description of the shared service",
+      "updateable": true
+    },
+    "overview": {
+      "type": "string",
+      "title": "Shared Service Overview",
+      "description": "Long form description of the shared service, in markdown syntax",
+      "updateable": true
+    }
   }
 }

api_app/schemas/user_resource.json

@@ -5,21 +5,27 @@
   "title": "User Resource Default Parameters",
   "description": "These parameters are required for all user resources",
   "required": [
-      "display_name",
-      "description"
+    "display_name",
+    "description"
   ],
   "properties": {
-      "display_name": {
-          "type": "string",
-          "title": "Name for the user resource",
-          "description": "The name of the user resource to be displayed to users",
-          "updateable": true
-      },
-      "description": {
-          "type": "string",
-          "title": "Description of the user resource",
-          "description": "Description of the user resource",
-          "updateable": true
-      }
+    "display_name": {
+      "type": "string",
+      "title": "Name for the user resource",
+      "description": "The name of the user resource to be displayed to users",
+      "updateable": true
+    },
+    "description": {
+      "type": "string",
+      "title": "Description of the user resource",
+      "description": "Description of the user resource",
+      "updateable": true
+    },
+    "overview": {
+      "type": "string",
+      "title": "User Resource Overview",
+      "description": "Long form description of the user resource, in markdown syntax",
+      "updateable": true
+    }
   }
 }

api_app/schemas/workspace.json

@@ -5,38 +5,44 @@
   "title": "Workspace Default Parameters",
   "description": "These parameters are required for all workspaces",
   "required": [
-      "display_name",
-      "description",
-      "address_space_size"
+    "display_name",
+    "description",
+    "address_space_size"
   ],
   "properties": {
-      "display_name": {
-          "type": "string",
-          "title": "Name for the workspace",
-          "description": "The name of the workspace to be displayed to users",
-          "updateable": true
-      },
-      "description": {
-          "type": "string",
-          "title": "Description of the workspace",
-          "description": "Description of the workspace",
-          "updateable": true
-      },
-      "address_space_size": {
-        "type": "string",
-        "title": "Address space size",
-        "description": "Network address size (small, medium, large or custom) to be used by the workspace",
-        "enum": [
-          "small",
-          "medium",
-          "large",
-          "custom"
-        ]
-      },
-      "address_space": {
-          "type": "string",
-          "title": "Address space",
-          "description": "Network address space to be used by the workspace if address_space_size is custom"
-      }
+    "display_name": {
+      "type": "string",
+      "title": "Name for the workspace",
+      "description": "The name of the workspace to be displayed to users",
+      "updateable": true
+    },
+    "description": {
+      "type": "string",
+      "title": "Description of the workspace",
+      "description": "Description of the workspace",
+      "updateable": true
+    },
+    "overview": {
+      "type": "string",
+      "title": "Workspace Overview",
+      "description": "Long form description of the workspace, in markdown syntax",
+      "updateable": true
+    },
+    "address_space_size": {
+      "type": "string",
+      "title": "Address space size",
+      "description": "Network address size (small, medium, large or custom) to be used by the workspace",
+      "enum": [
+        "small",
+        "medium",
+        "large",
+        "custom"
+      ]
+    },
+    "address_space": {
+      "type": "string",
+      "title": "Address space",
+      "description": "Network address space to be used by the workspace if address_space_size is custom"
+    }
   }
 }

api_app/schemas/workspace_service.json

@@ -5,21 +5,27 @@
   "title": "Workspace Service Default Parameters",
   "description": "These parameters are required for all workspaces services",
   "required": [
-      "display_name",
-      "description"
+    "display_name",
+    "description"
   ],
   "properties": {
-      "display_name": {
-          "type": "string",
-          "title": "Name for the workspace service",
-          "description": "The name of the workspace service to be displayed to users",
-          "updateable": true
-      },
-      "description": {
-          "type": "string",
-          "title": "Description of the workspace service",
-          "description": "Description of the workspace service",
-          "updateable": true
-      }
+    "display_name": {
+      "type": "string",
+      "title": "Name for the workspace service",
+      "description": "The name of the workspace service to be displayed to users",
+      "updateable": true
+    },
+    "description": {
+      "type": "string",
+      "title": "Description of the workspace service",
+      "description": "Description of the workspace service",
+      "updateable": true
+    },
+    "overview": {
+      "type": "string",
+      "title": "Workspace Service Overview",
+      "description": "Long form description of the workspace service, in markdown syntax",
+      "updateable": true
+    }
   }
 }

ui/app/package.json

@@ -19,8 +19,10 @@
     "node-sass": "^7.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-markdown": "^8.0.3",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
+    "remark-gfm": "^3.0.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },

ui/app/src/App.tsx

@@ -50,7 +50,7 @@ export const App: React.FunctionComponent = () => {
           <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
             <CreateUpdateResourceContext.Provider value={{
               openCreateForm: (createFormResource: CreateFormResource) => {
-                setCreateFormResource(createFormResource);
+                setCreateFormResource(JSON.parse(JSON.stringify(createFormResource)));
                 setCreateFormOpen(true);
               }
             }} >

ui/app/src/components/shared/CreateUpdateResource/CreateUpdateResource.tsx

@@ -52,14 +52,11 @@ export const CreateUpdateResource: React.FunctionComponent<CreateUpdateResourceP
       setTemplate('');
     }
 
-    // Clear state on panel close
-    if (!props.isOpen) {
-      clearState();
-    }
+    !props.isOpen && clearState();
   }, [props.isOpen]);
 
   useEffect(() => {
-    props.updateResource && selectTemplate(props.updateResource.templateName);
+    props.updateResource && props.updateResource.templateName && selectTemplate(props.updateResource.templateName);
   }, [props.updateResource])
 
   // Render a panel title depending on sub-page

ui/app/src/components/shared/CreateUpdateResource/ResourceForm.tsx

@@ -79,6 +79,13 @@ export const ResourceForm: React.FunctionComponent<ResourceFormProps> = (props:
     }
   }
 
+  // TODO - proper UI schema json to be fed from API
+  const uiSchema = {
+    overview: {
+      "ui:widget": "textarea"
+    }
+  }
+
   switch (loading) {
     case LoadingState.Ok:
       return (
@@ -88,7 +95,7 @@ export const ResourceForm: React.FunctionComponent<ResourceFormProps> = (props:
             sendingData ?
               <Spinner label="Sending request" ariaLive="assertive" labelPosition="bottom" size={SpinnerSize.large} />
               :
-              <Form schema={template} formData={formData} onSubmit={(e: any) => createUpdateResource(e.formData)} />
+              <Form schema={template} formData={formData} uiSchema={uiSchema} onSubmit={(e: any) => createUpdateResource(e.formData)} />
           }
           {
             deployError &&

ui/app/src/components/shared/ResourceBody.tsx

@@ -0,0 +1,42 @@
+import React, { } from 'react';
+import { ResourceDebug } from '../shared/ResourceDebug';
+import { Pivot, PivotItem } from '@fluentui/react';
+import { ResourcePropertyPanel } from '../shared/ResourcePropertyPanel';
+import { Resource } from '../../models/resource';
+import { ResourceHistory } from '../shared/ResourceHistory';
+import { ResourceOperationsList } from '../shared/ResourceOperationsList';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm'
+
+interface ResourceBodyProps {
+  resource: Resource
+}
+
+export const ResourceBody: React.FunctionComponent<ResourceBodyProps> = (props: ResourceBodyProps) => {
+
+  return (
+    <Pivot aria-label="Resource Menu" className='tre-panel'>
+      <PivotItem
+        headerText="Overview"
+        headerButtonProps={{
+          'data-order': 1,
+          'data-title': 'Overview',
+        }}
+      >
+        <div style={{ padding: 5 }}>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{props.resource.properties?.overview || props.resource.properties?.description}</ReactMarkdown>
+        </div>
+      </PivotItem>
+      <PivotItem headerText="Details">
+        <ResourcePropertyPanel resource={props.resource} />
+        <ResourceDebug resource={props.resource} />
+      </PivotItem>
+      <PivotItem headerText="History">
+        <ResourceHistory history={props.resource.history} />
+      </PivotItem>
+      <PivotItem headerText="Operations">
+        <ResourceOperationsList resource={props.resource} />
+      </PivotItem>
+    </Pivot>
+  );
+};