Added placeholder for no templates (#2428)

* Added placeholder for no templates * Reduce margin Co-authored-by: jjgriff93 <jamesgr@microsoft.com>
microsoft · Aug 11, 2022 · e23317e · e23317e
1 parent 3ff5a3a
commit e23317e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/ui/app/src/App.tsx b/ui/app/src/App.tsx
@@ -17,7 +17,7 @@ import { Operation } from './models/operation';
 import { ResourceUpdate } from './models/resource';
 import { HttpMethod, ResultType, useAuthApiCall } from './hooks/useAuthApiCall';
 import { ApiEndpoint } from './models/apiEndpoints';
-import { CreateUpdateResource } from './components/shared/CreateUpdateResource/CreateUpdateResource';
+import { CreateUpdateResource } from './components/shared/create-update-resource/CreateUpdateResource';
 import { CreateUpdateResourceContext } from './contexts/CreateUpdateResourceContext';
 import { CreateFormResource, ResourceType } from './models/resourceType';
 

diff --git a/...teUpdateResource/CreateUpdateResource.tsx → ...-update-resource/CreateUpdateResource.tsx b/...teUpdateResource/CreateUpdateResource.tsx → ...-update-resource/CreateUpdateResource.tsx
@@ -147,7 +147,9 @@ export const CreateUpdateResource: React.FunctionComponent<CreateUpdateResourceP
         closeButtonAriaLabel="Close"
         isLightDismiss
       >
-        {currentPage}
+        <div style={{ paddingTop: 30 }}>
+          {currentPage}
+        </div>
       </Panel>
     </>
   );

diff --git a/...red/CreateUpdateResource/ResourceForm.tsx → ...d/create-update-resource/ResourceForm.tsx b/...red/CreateUpdateResource/ResourceForm.tsx → ...d/create-update-resource/ResourceForm.tsx
diff --git a/...d/CreateUpdateResource/SelectTemplate.tsx → ...create-update-resource/SelectTemplate.tsx b/...d/CreateUpdateResource/SelectTemplate.tsx → ...create-update-resource/SelectTemplate.tsx
@@ -34,7 +34,7 @@ export const SelectTemplate: React.FunctionComponent<SelectTemplateProps> = (pro
     switch (loading) {
         case LoadingState.Ok:
             return (
-                templates ? <Stack style={{ marginTop: 20 }}>
+                templates && templates.length > 0 ? <Stack>
                 {
                     templates.map((template: any, i) => {
                         return (
@@ -46,7 +46,13 @@ export const SelectTemplate: React.FunctionComponent<SelectTemplateProps> = (pro
                         )
                     })
                 }
-                </Stack> : null
+                </Stack> : <MessageBar
+                    messageBarType={MessageBarType.info}
+                    isMultiline={true}
+                >
+                    <h3>No templates found</h3>
+                    <p>Looks like there aren't any templates registered for this resource type.</p>
+                </MessageBar>
             )
         case LoadingState.Error:
             return (