Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
jaaydenh merged 25 commits intomainfrommulti-org-template-gallery
Jul 19, 2024
Merged
Show file tree
Hide file tree
Changes from1 commit
Commits
Show all changes
25 commits
Select commitHold shift + click to select a range
0a5c431
feat: initial changes for multi-org templates page
jaaydenhJul 1, 2024
6f96fee
feat: add TemplateCard component
jaaydenhJul 2, 2024
51ebb67
feat: add component stories
jaaydenhJul 3, 2024
a0effc6
chore: update template query naming
jaaydenhJul 3, 2024
be37085
fix: fix formatting
jaaydenhJul 3, 2024
5649166
feat: template card interaction and navigation
jaaydenhJul 8, 2024
3ea3aa2
fix: copy updates
jaaydenhJul 8, 2024
f17a0c3
chore: update TemplateFilter type to include FilterQuery
jaaydenhJul 9, 2024
0077db0
chore: update typesGenerated.ts
jaaydenhJul 9, 2024
461202e
feat: update template filter api logic
jaaydenhJul 9, 2024
66e02fb
fix: fix format
jaaydenhJul 11, 2024
369c59f
fix: get activeOrg
jaaydenhJul 11, 2024
c41cdc4
fix: add format annotation
jaaydenhJul 11, 2024
7f5d35e
chore: use organization display name
jaaydenhJul 11, 2024
6e2a6d8
feat: client side org filtering
jaaydenhJul 15, 2024
978c047
fix: use org display name
jaaydenhJul 15, 2024
aaed038
fix: add ExactName
jaaydenhJul 15, 2024
8d84ad9
feat: show orgs filter only if more than 1 org
jaaydenhJul 15, 2024
a1c6169
chore: updates for PR review
jaaydenhJul 16, 2024
15542c0
fix: fix format
jaaydenhJul 16, 2024
8f4c56f
chore: add story for multi org
jaaydenhJul 16, 2024
a282bac
fix: aggregate templates by organization id
jaaydenhJul 17, 2024
b092644
fix: fix format
jaaydenhJul 17, 2024
32376e6
fix: check org count
jaaydenhJul 17, 2024
801138a
fix: update ExactName type
jaaydenhJul 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
PrevPrevious commit
NextNext commit
fix: fix formatting
  • Loading branch information
@jaaydenh
jaaydenh committedJul 17, 2024
commitbe3708598b58551ae89e4528ff8264465047f3d2
22 changes: 14 additions & 8 deletionssite/src/api/queries/templates.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,16 +30,19 @@ export const templateByName = (
};
};

const getTemplatesByOrganizationIdQueryKey = (organizationId: string, deprecated?: boolean) => [
organizationId,
"templates",
deprecated,
];
const getTemplatesByOrganizationIdQueryKey = (
organizationId: string,
deprecated?: boolean,
) => [organizationId, "templates", deprecated];

export const templatesByOrganizationId = (organizationId: string, deprecated?: boolean) => {
export const templatesByOrganizationId = (
organizationId: string,
deprecated?: boolean,
) => {
return {
queryKey: getTemplatesByOrganizationIdQueryKey(organizationId, deprecated),
queryFn: () => API.getTemplatesByOrganizationId(organizationId, { deprecated }),
queryFn: () =>
API.getTemplatesByOrganizationId(organizationId, { deprecated }),
};
};

Expand DownExpand Up@@ -104,7 +107,10 @@ export const setGroupRole = (

export const templateExamples = (organizationId: string) => {
return {
queryKey: [...getTemplatesByOrganizationIdQueryKey(organizationId), "examples"],
queryKey: [
...getTemplatesByOrganizationIdQueryKey(organizationId),
"examples",
],
queryFn: () => API.getTemplateExamples(organizationId),
};
};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
import { chromatic } from "testHelpers/chromatic";
import {
MockTemplate,
} from "testHelpers/entities";
import { MockTemplate } from "testHelpers/entities";
import { TemplateCard } from "./TemplateCard";

const meta: Meta<typeof TemplateCard> = {
Expand All@@ -19,21 +17,24 @@ type Story = StoryObj<typeof TemplateCard>;

export const Template: Story = {};

export const DeprecatedTemplate: Story = { args: {
template: {
...MockTemplate,
deprecated: true
}
},};
export const DeprecatedTemplate: Story = {
args: {
template: {
...MockTemplate,
deprecated: true,
},
},
};

export const LongContentTemplate: Story = {
args: {
template: {
...MockTemplate,
display_name: 'Very Long Template Name',
organization_name: 'Very Long Organization Name',
description: 'This is a very long test description. This is a very long test description. This is a very long test description. This is a very long test description',
active_user_count: 999
}
display_name: "Very Long Template Name",
organization_name: "Very Long Organization Name",
description:
"This is a very long test description. This is a very long test description. This is a very long test description. This is a very long test description",
active_user_count: 999,
},
},
};
25 changes: 13 additions & 12 deletionssite/src/modules/templates/TemplateCard/TemplateCard.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ export const TemplateCard: FC<TemplateCardProps> = ({
return (
<div css={styles.card} {...divProps}>
<div css={styles.header}>
<div>
<div>
<AvatarData
title={
template.display_name.length > 0
Expand All@@ -37,7 +37,8 @@ export const TemplateCard: FC<TemplateCardProps> = ({
/>
</div>
<div>
{template.active_user_count} {template.active_user_count === 1 ? "user" : "users" }
{template.active_user_count}{" "}
{template.active_user_count === 1 ? "user" : "users"}
</div>
</div>

Expand All@@ -52,16 +53,16 @@ export const TemplateCard: FC<TemplateCardProps> = ({
<DeprecatedBadge />
) : (
<Button
component={RouterLink}
css={styles.actionButton}
className="actionButton"
fullWidth
startIcon={<ArrowForwardOutlined />}
title={`Create a workspace using the ${template.display_name} template`}
to={`/templates/${template.name}/workspace`}
>
Create Workspace
</Button>
component={RouterLink}
css={styles.actionButton}
className="actionButton"
fullWidth
startIcon={<ArrowForwardOutlined />}
title={`Create a workspace using the ${template.display_name} template`}
to={`/templates/${template.name}/workspace`}
>
Create Workspace
</Button>
)}
</div>
</div>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -59,21 +59,21 @@ export type TemplatesByOrg = Record<string, number>;

const getTemplatesByOrg = (templates: Template[]): TemplatesByOrg => {
const orgs: TemplatesByOrg = {
all: 0
}
all: 0,
};

templates.forEach((template) => {
if (orgs[template.organization_name]) {
orgs[template.organization_name] += 1
orgs[template.organization_name] += 1;
} else {
orgs[template.organization_name] = 1;
}

orgs.all += 1;
})
});

return orgs;
}
};

export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
templates,
Expand DownExpand Up@@ -112,24 +112,19 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
{Boolean(error) && <ErrorAlert error={error} />}

<Stack direction="row" spacing={4} alignItems="flex-start">
<Stack
css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}
>
<span css={styles.filterCaption}>ORGANIZATION</span>
{Object.keys(templatesByOrg).map((org) => (
<Link
key={org}
to={`?org=${org}`}
css={[
styles.tagLink,
org === activeOrg && styles.tagLinkActive,
]}
>
{org === 'all' ? 'All Organizations' : org} ({templatesByOrg[org] ?? 0})
</Link>
))}
</Stack>

<Stack css={{ width: 208, flexShrink: 0, position: "sticky", top: 48 }}>
<span css={styles.filterCaption}>ORGANIZATION</span>
{Object.keys(templatesByOrg).map((org) => (
<Link
key={org}
to={`?org=${org}`}
css={[styles.tagLink, org === activeOrg && styles.tagLinkActive]}
>
{org === "all" ? "All Organizations" : org} (
{templatesByOrg[org] ?? 0})
</Link>
))}
</Stack>

<div
css={{
Expand All@@ -140,20 +135,22 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
}}
>
{isEmpty ? (
<EmptyTemplates
canCreateTemplates={canCreateTemplates}
examples={examples ?? []}
/>
) : (templates &&
templates.map((template) => (
<TemplateCard
css={(theme) => ({
backgroundColor: theme.palette.background.paper,
})}
template={template}
key={template.id}
/>
)))}
<EmptyTemplates
canCreateTemplates={canCreateTemplates}
examples={examples ?? []}
/>
) : (
templates &&
templates.map((template) => (
<TemplateCard
css={(theme) => ({
backgroundColor: theme.palette.background.paper,
})}
template={template}
key={template.id}
/>
))
)}
</div>
</Stack>
</Margins>
Expand Down
19 changes: 14 additions & 5 deletionssite/src/pages/TemplatesPage/TemplatesPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
import type { FC } from "react";
import { Helmet } from "react-helmet-async";
import { useQuery } from "react-query";
import { templateExamples, templatesByOrganizationId, templates, } from "api/queries/templates";
import {
templateExamples,
templatesByOrganizationId,
templates,
} from "api/queries/templates";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { useDashboard } from "modules/dashboard/useDashboard";
import { pageTitle } from "utils/page";
Expand All@@ -12,13 +16,18 @@ export const TemplatesPage: FC = () => {
const { permissions } = useAuthenticated();
const { organizationId, experiments } = useDashboard();

const templatesByOrganizationIdQuery = useQuery(templatesByOrganizationId(organizationId));
const templatesByOrganizationIdQuery = useQuery(
templatesByOrganizationId(organizationId),
);
const templatesQuery = useQuery(templates());
const examplesQuery = useQuery({
...templateExamples(organizationId),
enabled: permissions.createTemplates,
});
const error = templatesByOrganizationIdQuery.error || examplesQuery.error || templatesQuery.error;
const error =
templatesByOrganizationIdQuery.error ||
examplesQuery.error ||
templatesQuery.error;
const multiOrgExperimentEnabled = experiments.includes("multi-organization");

return (
Expand All@@ -33,14 +42,14 @@ export const TemplatesPage: FC = () => {
examples={examplesQuery.data}
templates={templatesQuery.data}
/>
) : (
) : (
<TemplatesPageView
error={error}
canCreateTemplates={permissions.createTemplates}
examples={examplesQuery.data}
templates={templatesByOrganizationIdQuery.data}
/>
)}
)}
</>
);
};
Expand Down
4 changes: 3 additions & 1 deletionsite/src/pages/WorkspacesPage/WorkspacesPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,9 @@ const WorkspacesPage: FC = () => {
const { permissions } = useAuthenticated();
const { entitlements, organizationId } = useDashboard();

const templatesQuery = useQuery(templatesByOrganizationId(organizationId, false));
const templatesQuery = useQuery(
templatesByOrganizationId(organizationId, false),
);

const filterProps = useWorkspacesFilter({
searchParamsResult,
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp