Skip to content

feat: implement multi-org template gallery #13784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Jul 19, 2024
Merged

feat: implement multi-org template gallery #13784

Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
0a5c431
feat: initial changes for multi-org templates page
jaaydenh Jul 1, 2024
6f96fee
feat: add TemplateCard component
jaaydenh Jul 2, 2024
51ebb67
feat: add component stories
jaaydenh Jul 3, 2024
a0effc6
chore: update template query naming
jaaydenh Jul 3, 2024
be37085
fix: fix formatting
jaaydenh Jul 3, 2024
5649166
feat: template card interaction and navigation
jaaydenh Jul 8, 2024
3ea3aa2
fix: copy updates
jaaydenh Jul 8, 2024
f17a0c3
chore: update TemplateFilter type to include FilterQuery
jaaydenh Jul 9, 2024
0077db0
chore: update typesGenerated.ts
jaaydenh Jul 9, 2024
461202e
feat: update template filter api logic
jaaydenh Jul 9, 2024
66e02fb
fix: fix format
jaaydenh Jul 11, 2024
369c59f
fix: get activeOrg
jaaydenh Jul 11, 2024
c41cdc4
fix: add format annotation
jaaydenh Jul 11, 2024
7f5d35e
chore: use organization display name
jaaydenh Jul 11, 2024
6e2a6d8
feat: client side org filtering
jaaydenh Jul 15, 2024
978c047
fix: use org display name
jaaydenh Jul 15, 2024
aaed038
fix: add ExactName
jaaydenh Jul 15, 2024
8d84ad9
feat: show orgs filter only if more than 1 org
jaaydenh Jul 15, 2024
a1c6169
chore: updates for PR review
jaaydenh Jul 16, 2024
15542c0
fix: fix format
jaaydenh Jul 16, 2024
8f4c56f
chore: add story for multi org
jaaydenh Jul 16, 2024
a282bac
fix: aggregate templates by organization id
jaaydenh Jul 17, 2024
b092644
fix: fix format
jaaydenh Jul 17, 2024
32376e6
fix: check org count
jaaydenh Jul 17, 2024
801138a
fix: update ExactName type
jaaydenh Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: template card interaction and navigation
  • Loading branch information
@jaaydenh
jaaydenh committed Jul 17, 2024
commit 56491669d11fada920d3fb59549ea479e4480e5a
48 changes: 25 additions & 23 deletions site/src/modules/templates/TemplateCard/TemplateCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
import Button from "@mui/material/Button";
import type { FC, HTMLAttributes } from "react";
import { Link as RouterLink } from "react-router-dom";
import { Link as RouterLink, useNavigate } from "react-router-dom";
import type { Template } from "api/typesGenerated";
import { ExternalAvatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/AvatarData/AvatarData";
Expand All @@ -16,10 +16,25 @@ export const TemplateCard: FC<TemplateCardProps> = ({
template,
...divProps
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super minor nit, I tend to call these sorts of captures attrs, but there's definitely precedent for calling it whateverProps too. maybe this is something we should consolidate on...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was following the pattern in the files I was working on. In other code bases/the React docs, this is often called ...props as well. I think it depends if we want to call them based on what they are, "props" or how they are used, props on divs "divProps" or attributes on divs "attrs"

}) => {
const navigate = useNavigate();
const templatePageLink = `/templates/${template.name}`;
const hasIcon = template.icon && template.icon !== "";

const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter" && e.currentTarget === e.target) {
navigate(templatePageLink);
}
};

return (
<div css={styles.card} {...divProps}>
<div
css={styles.card}
{...divProps}
role="button"
tabIndex={0}
onClick={() => navigate(templatePageLink)}
onKeyDown={handleKeyDown}
>
<div css={styles.header}>
<div>
<AvatarData
Expand Down Expand Up @@ -60,6 +75,9 @@ export const TemplateCard: FC<TemplateCardProps> = ({
startIcon={<ArrowForwardOutlined />}
title={`Create a workspace using the ${template.display_name} template`}
to={`/templates/${template.name}/workspace`}
onClick={(e) => {
e.stopPropagation();
}}
>
Create Workspace
</Button>
Expand All @@ -79,6 +97,11 @@ const styles = {
color: "inherit",
display: "flex",
flexDirection: "column",
cursor: "pointer",
"&:hover": {
color: theme.experimental.l2.hover.text,
borderColor: theme.experimental.l2.hover.text,
},
}),

header: {
Expand All @@ -95,27 +118,6 @@ const styles = {
height: 32,
},

tags: {
display: "flex",
flexWrap: "wrap",
gap: 8,
justifyContent: "end",
},

tag: (theme) => ({
borderColor: theme.palette.divider,
textDecoration: "none",
cursor: "pointer",
"&: hover": {
borderColor: theme.palette.primary.main,
},
}),

activeTag: (theme) => ({
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
}),

description: (theme) => ({
fontSize: 13,
color: theme.palette.text.secondary,
Expand Down