Austenem/CAT-846 update workspace pages #3537

austenem · 2024-09-11T15:31:25Z

Summary

This update adds a workspaces templates landing page, which is linked in the workspaces landing page, as well as template detail pages. These detail pages include information about the templates as well as example workspaces, which can be cloned from these pages via a new "Try Sample Workspace" dialog.

Design Documentation/Original Tickets

CAT-846 Jira ticket

CAT-819 Jira ticket (design)

Figma mockups

Testing

Template examples were tested on DEV using the one template that currently has examples (squidpy), and other examples were pulled from the most recent user-templates-api PR and hardcoded into the component for testing.

Note: attempting to clone the squidpy example workspace on DEV was unsuccessful due to the attached dataset only being available on PROD. Cloning on PROD with a hardcoded version of the example workspace was successful.

Screenshots/Video

Updated workspaces landing page:

New templates landing page:

New template detail page:

Logged in (with example):

Logged out (with example):

Logged in (no example):

New "Try Sample Workspace" dialog:

Checklist

Code follows the project's coding standards
- Lint checks pass locally
- New CHANGELOG-your-feature-name-here.md is present in the root directory, describing the change(s) in full sentences.
Unit tests covering the new feature have been added
All existing tests pass
Any relevant documentation in JIRA/Confluence has been updated to reflect the new feature
Any new functionalities have appropriate analytics functionalities added -> (future ticket)

john-conroy · 2024-09-11T15:37:37Z

Looks great! I'm working through the changes, but should we set the initial sample workspace name to the title of the example?

austenem · 2024-09-11T15:38:58Z

I think that's a good idea!

john-conroy

A few questions for now. I still have to check it out locally.

...ext/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialogFromExample.tsx

context/app/static/js/components/workspaces/TemplateGrid/TemplateGrid.tsx

john-conroy · 2024-09-11T15:51:09Z

...ext/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialogFromExample.tsx

+  const { isOpen: isLaunchWorkspaceDialogOpen } = useLaunchWorkspaceStore();
+
+  const { data } = useJobTypes();
+  const jobTypeKey = example.job_type ?? DEFAULT_JOB_TYPE;


Is this a placeholder? We don't have job_type in the examples yet. We should set this to DEFAULT_JOB_TYPE and leave a TODO comment.

Personally, I'm okay with this as long as we know the field will be called job_type - it might save us an extra deploy in the long run

I added optional job_type and resource_options values to the TemplateExample type, although neither have been added to the examples yet - both default to the default values if they are not included.

@austenem this will be a job_types array.

...ext/app/static/js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialogFromExample.tsx

john-conroy · 2024-09-11T15:55:34Z

context/app/static/js/components/workspaces/TemplateSelectStep/TemplateSelectStep.tsx

-      <Typography sx={{ mt: 2 }} variant="subtitle1">
-        Filter workspace templates by tags
-      </Typography>
-      <Stack spacing={1}>


The TemplateSelectStep is used across a number of forms. The designs no longer include this for any of them?

This is a stylistic change to update the tag search to match designs:

Current version:

Updated:

Ah, it does actually look like the current designs for the launch workspace dialogs still include this title - good catch!

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

john-conroy · 2024-09-11T16:10:37Z

context/app/static/js/shared-styles/pages/IconPageTitle/style.ts

-const FlexContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  marginBottom: theme.spacing(2),


Don't we need the marginBottom for all of the other instances of IconPageTitle?

I couldn't find any references to IconPageTitle outside of workspaces, so this might be a duplicate case:

In the other cases, the SummaryData component appears to be handling the display of this title and icon:

portal-ui/context/app/static/js/components/detailPage/summary/SummaryData/SummaryData.tsx

Lines 40 to 44 in dcc2a36

<SummaryTitle data-testid="entity-type">

<SummaryDataHeader>

<StyledSvgIcon as={entityIconMap[entity_type]} color="primary" />

{entityTypeDisplay ?? entity_type}

</SummaryDataHeader>

context/app/static/js/shared-styles/surfaces/Step/Step.tsx

john-conroy · 2024-09-11T16:12:33Z

context/app/static/js/shared-styles/surfaces/Step/Step.tsx

@@ -34,7 +35,7 @@ function StepDescription({ blocks }: { blocks: (string | ReactElement)[] }) {
    </Stack>
  );
 }
-function Step({ index, title, isRequired = false, children }: PropsWithChildren<StepProps>) {
+function Step({ index, title, isRequired = false, hideRequiredText, children }: PropsWithChildren<StepProps>) {


Do we need to set a default for hideRequiredText to false for the other, existing uses of Step or does this reflect the designs?

If there's no default value set, it's falsy by default due to being undefined, so it should fall back to the existing behavior.

NickAkhmetov

Just a few places I noticed some potential duplications between our components, no major concerns 🙂

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

NickAkhmetov · 2024-09-11T16:45:35Z

context/app/static/js/pages/Template/style.ts

+import AccordionSummary from '@mui/material/AccordionSummary';
+import { styled } from '@mui/material/styles';
+
+const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => {


These styles seem pretty similar to the ones for the Processed Dataset accordion: https://github.com/hubmapconsortium/portal-ui/blob/25b9fea3fca9f6bc8d789b6c8851f7e44779e213/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/styles.ts

Maybe there's some deduplication we could do? It doesn't have to be in this PR, but we should file a ticket otherwise.

Oh nice! Good call.

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

NickAkhmetov · 2024-09-11T16:49:52Z

context/app/static/js/shared-styles/pages/IconPageTitle/style.ts

-const FlexContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  marginBottom: theme.spacing(2),


I couldn't find any references to IconPageTitle outside of workspaces, so this might be a duplicate case:

In the other cases, the SummaryData component appears to be handling the display of this title and icon:

portal-ui/context/app/static/js/components/detailPage/summary/SummaryData/SummaryData.tsx

Lines 40 to 44 in dcc2a36

<SummaryTitle data-testid="entity-type">

<SummaryDataHeader>

<StyledSvgIcon as={entityIconMap[entity_type]} color="primary" />

{entityTypeDisplay ?? entity_type}

</SummaryDataHeader>

NickAkhmetov · 2024-09-11T16:51:25Z

context/app/static/js/shared-styles/surfaces/Step/Step.tsx

@@ -34,7 +35,7 @@ function StepDescription({ blocks }: { blocks: (string | ReactElement)[] }) {
    </Stack>
  );
 }
-function Step({ index, title, isRequired = false, children }: PropsWithChildren<StepProps>) {
+function Step({ index, title, isRequired = false, hideRequiredText, children }: PropsWithChildren<StepProps>) {


If there's no default value set, it's falsy by default due to being undefined, so it should fall back to the existing behavior.

john-conroy

Looks good to me. Let's hold off on merging this until we have the examples on PROD.

john-conroy · 2024-09-12T19:35:57Z

Sorry to comment after already approving. Can we make sure the sort order for the templates grid is consistent across pages/forms?

austenem · 2024-09-12T19:49:28Z

Sorry to comment after already approving. Can we make sure the sort order for the templates grid is consistent across pages/forms?

Ah good catch! All template grids should be sorted now, not just the selectable ones.

john-conroy · 2024-09-13T16:25:36Z

Good to merge!

austenem added 24 commits August 23, 2024 16:42

add page links

f14a592

switch to children prop

38d1fc6

update workspace landing page

e07ef3a

update routes

09e3b63

add alert and convert title to ts

9b411ae

update messaging

e0ace90

add template routes

e4dc689

connect template detail pages to grid

91245b8

update imports

8507a3a

add to template detail

ada0d05

add login panel and begin detail page

a7b9756

add components to template detail

8af1d33

merge main

e63c956

add accordion styles

df2aa8b

remove copy button

db57210

add sample dialog

9e57963

connect to template data

3b138a8

add default template

600a1fe

update table and dialog

ea798d1

edit link and job type

2cf9797

consolidate table alerts

35c862f

cleanup

f801afe

cleanup and add to example type

74873ab

add changelog

d1c57b0

austenem requested review from NickAkhmetov, john-conroy and tsliaw September 11, 2024 15:31

add blank lines

b7d7513

set default name

d5f9690

austenem changed the title ~~Austenem/cat 846 update workspace pages~~ Austenem/CAT-846 update workspace pages Sep 11, 2024

john-conroy requested changes Sep 11, 2024

View reviewed changes

NickAkhmetov reviewed Sep 11, 2024

View reviewed changes

first round of review changes

9096e1b

austenem requested review from NickAkhmetov and john-conroy September 12, 2024 15:43

update to job_types array

2529abc

john-conroy previously approved these changes Sep 12, 2024

View reviewed changes

sort all template grids

02b0670

austenem dismissed john-conroy’s stale review via 02b0670 September 12, 2024 19:48

john-conroy approved these changes Sep 12, 2024

View reviewed changes

austenem merged commit 47a6036 into main Sep 13, 2024
8 checks passed

austenem deleted the austenem/cat-846-update-workspace-pages branch September 13, 2024 16:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Austenem/CAT-846 update workspace pages #3537

Austenem/CAT-846 update workspace pages #3537

austenem commented Sep 11, 2024

john-conroy commented Sep 11, 2024

austenem commented Sep 11, 2024

john-conroy left a comment

john-conroy Sep 11, 2024

NickAkhmetov Sep 11, 2024

austenem Sep 11, 2024

john-conroy Sep 12, 2024

john-conroy Sep 11, 2024

austenem Sep 11, 2024

austenem Sep 11, 2024

john-conroy Sep 11, 2024

NickAkhmetov Sep 11, 2024

john-conroy Sep 11, 2024

NickAkhmetov Sep 11, 2024

NickAkhmetov left a comment

NickAkhmetov Sep 11, 2024

austenem Sep 11, 2024

NickAkhmetov Sep 11, 2024

NickAkhmetov Sep 11, 2024

john-conroy left a comment

john-conroy commented Sep 12, 2024

austenem commented Sep 12, 2024

john-conroy commented Sep 13, 2024

	<SummaryTitle data-testid="entity-type">
	<SummaryDataHeader>
	<StyledSvgIcon as={entityIconMap[entity_type]} color="primary" />
	{entityTypeDisplay ?? entity_type}
	</SummaryDataHeader>

Austenem/CAT-846 update workspace pages #3537

Austenem/CAT-846 update workspace pages #3537

Conversation

austenem commented Sep 11, 2024

Summary

Design Documentation/Original Tickets

Testing

Screenshots/Video

Checklist

john-conroy commented Sep 11, 2024

austenem commented Sep 11, 2024

john-conroy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickAkhmetov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

john-conroy left a comment

Choose a reason for hiding this comment

john-conroy commented Sep 12, 2024

austenem commented Sep 12, 2024

john-conroy commented Sep 13, 2024