Skip to content

Commit 59a80d7

Browse files
aslilacaslilac
authored
feat: show organization information on templates page (coder#14224)
1 parent 9715ae5 commit 59a80d7

File tree

7 files changed

+63
-17
lines changed

7 files changed

+63
-17
lines changed

‎site/src/modules/dashboard/DashboardProvider.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@ import type {
1313
import { ErrorAlert } from "components/Alert/ErrorAlert";
1414
import { Loader } from "components/Loader/Loader";
1515
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
16+
import { selectFeatureVisibility } from "./entitlements";
1617

1718
export interface DashboardValue {
1819
entitlements: Entitlements;
1920
experiments: Experiments;
2021
appearance: AppearanceConfig;
2122
organizations: Organization[];
23+
showOrganizations: boolean;
2224
}
2325

2426
export const DashboardContext = createContext<DashboardValue | undefined>(
@@ -52,13 +54,19 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
5254
return <Loader fullscreen />;
5355
}
5456

57+
const hasMultipleOrganizations = organizationsQuery.data.length > 1;
58+
const organizationsEnabled =
59+
experimentsQuery.data.includes("multi-organization") &&
60+
selectFeatureVisibility(entitlementsQuery.data).multiple_organizations;
61+
5562
return (
5663
<DashboardContext.Provider
5764
value={{
5865
entitlements: entitlementsQuery.data,
5966
experiments: experimentsQuery.data,
6067
appearance: appearanceQuery.data,
6168
organizations: organizationsQuery.data,
69+
showOrganizations: hasMultipleOrganizations || organizationsEnabled,
6270
}}
6371
>
6472
{children}

‎site/src/modules/navigation.ts

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
import { useEffectEvent } from "hooks/hookPolyfills";
66
import type { DashboardValue } from "./dashboard/DashboardProvider";
7-
import { selectFeatureVisibility } from "./dashboard/entitlements";
87
import { useDashboard } from "./dashboard/useDashboard";
98

109
type LinkThunk = (state: DashboardValue) => string;
@@ -27,13 +26,7 @@ export const linkToUsers = withFilter("/users", "status:active");
2726

2827
export const linkToTemplate =
2928
(organizationName: string, templateName: string): LinkThunk =>
30-
(dashboard) => {
31-
const hasMultipleOrganizations = dashboard.organizations.length > 1;
32-
const organizationsEnabled =
33-
dashboard.experiments.includes("multi-organization") &&
34-
selectFeatureVisibility(dashboard.entitlements).multiple_organizations;
35-
36-
return hasMultipleOrganizations || organizationsEnabled
29+
(dashboard) =>
30+
dashboard.showOrganizations
3731
? `/templates/${organizationName}/${templateName}`
3832
: `/templates/${templateName}`;
39-
};

‎site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { DeploySettingsContext } from "../DeploySettingsPage/DeploySettingsLayou
1313
import { Sidebar } from "./Sidebar";
1414

1515
type OrganizationSettingsValue = {
16-
organizations: Organization[] | undefined;
16+
organizations: Organization[];
1717
};
1818

1919
export const useOrganizationSettings = (): OrganizationSettingsValue => {

‎site/src/pages/TemplatesPage/TemplatesPage.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { Helmet } from "react-helmet-async";
33
import { useQuery } from "react-query";
44
import { templateExamples, templates } from "api/queries/templates";
55
import { useAuthenticated } from "contexts/auth/RequireAuth";
6+
import { useDashboard } from "modules/dashboard/useDashboard";
67
import { pageTitle } from "utils/page";
78
import { TemplatesPageView } from "./TemplatesPageView";
89

910
export const TemplatesPage: FC = () => {
1011
const { permissions } = useAuthenticated();
12+
const { showOrganizations } = useDashboard();
1113

1214
const templatesQuery = useQuery(templates());
1315
const examplesQuery = useQuery({
@@ -23,6 +25,7 @@ export const TemplatesPage: FC = () => {
2325
</Helmet>
2426
<TemplatesPageView
2527
error={error}
28+
showOrganizations={showOrganizations}
2629
canCreateTemplates={permissions.createTemplates}
2730
examples={examplesQuery.data}
2831
templates={templatesQuery.data}

‎site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,13 @@ export const WithTemplates: Story = {
6969
},
7070
};
7171

72+
export const MultipleOrganizations: Story = {
73+
args: {
74+
...WithTemplates.args,
75+
showOrganizations: true,
76+
},
77+
};
78+
7279
export const EmptyCanCreate: Story = {
7380
args: {
7481
canCreateTemplates: true,

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,11 @@ const TemplateHelpTooltip: FC = () => {
8181
};
8282

8383
interface TemplateRowProps {
84+
showOrganizations: boolean;
8485
template: Template;
8586
}
8687

87-
const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
88+
const TemplateRow: FC<TemplateRowProps> = ({ showOrganizations, template }) => {
8889
const getLink = useLinks();
8990
const templatePageLink = getLink(
9091
linkToTemplate(template.organization_name, template.name),
@@ -120,7 +121,23 @@ const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
120121
</TableCell>
121122

122123
<TableCell css={styles.secondary}>
123-
{Language.developerCount(template.active_user_count)}
124+
{showOrganizations ? (
125+
<Stack
126+
spacing={0}
127+
css={{
128+
width: "100%",
129+
}}
130+
>
131+
<span css={styles.cellPrimaryLine}>
132+
{template.organization_display_name}
133+
</span>
134+
<span css={styles.cellSecondaryLine}>
135+
Used by {Language.developerCount(template.active_user_count)}
136+
</span>
137+
</Stack>
138+
) : (
139+
Language.developerCount(template.active_user_count)
140+
)}
124141
</TableCell>
125142

126143
<TableCell css={styles.secondary}>
@@ -156,16 +173,18 @@ const TemplateRow: FC<TemplateRowProps> = ({ template }) => {
156173

157174
export interface TemplatesPageViewProps {
158175
error?: unknown;
176+
showOrganizations: boolean;
177+
canCreateTemplates: boolean;
159178
examples: TemplateExample[] | undefined;
160179
templates: Template[] | undefined;
161-
canCreateTemplates: boolean;
162180
}
163181

164182
export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
165-
templates,
166183
error,
167-
examples,
184+
showOrganizations,
168185
canCreateTemplates,
186+
examples,
187+
templates,
169188
}) => {
170189
const isLoading = !templates;
171190
const isEmpty = templates && templates.length === 0;
@@ -209,7 +228,9 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
209228
<TableHead>
210229
<TableRow>
211230
<TableCell width="35%">{Language.nameLabel}</TableCell>
212-
<TableCell width="15%">{Language.usedByLabel}</TableCell>
231+
<TableCell width="15%">
232+
{showOrganizations ? "Organization" : Language.usedByLabel}
233+
</TableCell>
213234
<TableCell width="10%">{Language.buildTimeLabel}</TableCell>
214235
<TableCell width="15%">{Language.lastUpdatedLabel}</TableCell>
215236
<TableCell width="1%"></TableCell>
@@ -225,7 +246,11 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
225246
/>
226247
) : (
227248
templates?.map((template) => (
228-
<TemplateRow key={template.id} template={template} />
249+
<TemplateRow
250+
key={template.id}
251+
showOrganizations={showOrganizations}
252+
template={template}
253+
/>
229254
))
230255
)}
231256
</TableBody>
@@ -276,6 +301,15 @@ const styles = {
276301
actionCell: {
277302
whiteSpace: "nowrap",
278303
},
304+
cellPrimaryLine: (theme) => ({
305+
color: theme.palette.text.primary,
306+
fontWeight: 600,
307+
}),
308+
cellSecondaryLine: (theme) => ({
309+
fontSize: 13,
310+
color: theme.palette.text.secondary,
311+
lineHeight: "150%",
312+
}),
279313
secondary: (theme) => ({
280314
color: theme.palette.text.secondary,
281315
}),

‎site/src/testHelpers/storybook.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const withDashboardProvider = (
4141
experiments,
4242
appearance: MockAppearanceConfig,
4343
organizations: [MockDefaultOrganization],
44+
showOrganizations: false,
4445
}}
4546
>
4647
<Story />

0 commit comments

Comments
 (0)