Austenem/CAT-1085 Add sample workspace banner

CHANGELOG-add-sample-workspace-banner.md

@@ -0,0 +1 @@
+- Add an info banner to template pages without sample workspaces.

context/app/static/js/pages/Template/Template.tsx

@@ -25,6 +25,29 @@ import { DEFAULT_JOB_TYPE } from 'js/components/workspaces/constants';
 import { useAppContext } from 'js/components/Contexts';
 import { buildSearchLink } from 'js/components/search/store';
 
+const sampleWorkspacesDescription =
+  'Sample workspaces are provided to help you get started with this template and to better understand the types of data that are compatible with it.';
+
+interface SampleWorkspacesInfoBannerProps {
+  hasSampleWorkspaces: boolean;
+}
+function SampleWorkspacesInfoBanner({ hasSampleWorkspaces }: SampleWorkspacesInfoBannerProps) {
+  if (!hasSampleWorkspaces) {
+    return <IconPanel status="info">No sample workspaces are currently available for this template.</IconPanel>;
+  }
+
+  if (isAuthenticated) {
+    return <IconPanel status="info">{sampleWorkspacesDescription}</IconPanel>;
+  }
+
+  return (
+    <LogInPanel trackingInfo={{ category: WorkspacesEventCategories.WorkspaceTemplateDetailPage }}>
+      {sampleWorkspacesDescription} Please <InternalLink href="/login">log in</InternalLink> to explore a sample
+      workspace.
+    </LogInPanel>
+  );
+}
+
 interface ExampleAccordionProps {
   example: TemplateExample;
   templateKey: string;
@@ -170,33 +193,20 @@ function Template({ templateKey }: TemplatePageProps) {
           )}
         </Stack>
       </Stack>
-      {template.examples && (
-        <Stack spacing={1}>
-          <Typography variant="h4">Sample Workspaces</Typography>
-          {isAuthenticated ? (
-            <IconPanel status="info">
-              Sample workspaces are provided to help you get started with this template and to better understand the
-              types of data that are compatible with it.
-            </IconPanel>
-          ) : (
-            <LogInPanel trackingInfo={{ category: WorkspacesEventCategories.WorkspaceTemplateDetailPage }}>
-              Sample workspaces are available to help you get started with this template and better understand the types
-              of compatible data. Please <InternalLink href="/login">log in</InternalLink> to explore a sample
-              workspace.
-            </LogInPanel>
-          )}
-          {template.examples.map((example, idx) => (
-            <ExampleAccordion
-              key={example.title}
-              example={example}
-              templateKey={templateKey}
-              templateName={template.title}
-              jobType={template.job_types?.[0]}
-              defaultExpanded={idx === 0}
-            />
-          ))}
-        </Stack>
-      )}
+      <Stack spacing={1}>
+        <Typography variant="h4">Sample Workspaces</Typography>
+        <SampleWorkspacesInfoBanner hasSampleWorkspaces={template.examples?.length > 0} />
+        {template.examples?.map((example, idx) => (
+          <ExampleAccordion
+            key={example.title}
+            example={example}
+            templateKey={templateKey}
+            templateName={template.title}
+            jobType={template.job_types?.[0]}
+            defaultExpanded={idx === 0}
+          />
+        ))}
+      </Stack>
     </Stack>
   );
 }