Skip to content

Commit 2dce2e6

Browse files
GuptaSiddhantGuptaSiddhant
committed
docs(changeset): Update UI to be more composable. Update EasyAuth to have better default authorise.
1 parent 09433a9 commit 2dce2e6

File tree

20 files changed

+851
-380
lines changed

20 files changed

+851
-380
lines changed

‎.changeset/rotten-places-tie.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@storybooker/adapter-azure": minor
3+
"@storybooker/core": minor
4+
"@storybooker/adapter-fs": minor
5+
"@storybooker/azure-functions": minor
6+
"storybooker": minor
7+
---
8+
9+
Update UI to be more composable. Update EasyAuth to have better default authorise.

‎.oxlintrc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
{ "max": 50, "skipBlankLines": true, "skipComments": true }
2323
],
2424
"sort-imports": "allow",
25+
"new-cap": "allow",
2526
"no-async-await": "allow",
2627
"no-continue": "allow",
2728
"no-magic-numbers": "allow",

‎packages/adapter-azure/src/easy-auth.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,27 @@ export interface EasyAuthUser extends StoryBookerUser {
1616

1717
export type EasyAuthRoleMap = Map<string, Permission[]>;
1818

19+
const DEFAULT_AUTHORISE: AuthServiceAuthorise<EasyAuthUser> = (
20+
{ action },
21+
{ user },
22+
) => {
23+
if (!user) {
24+
return false;
25+
}
26+
27+
if (action === "read") {
28+
return true;
29+
}
30+
31+
return Boolean(user.roles && user.roles.length > 0);
32+
};
33+
1934
export class AzureEasyAuthService implements AuthService<EasyAuthUser> {
2035
authorise: AuthServiceAuthorise<EasyAuthUser>;
2136

22-
constructor(authorise: AuthServiceAuthorise<EasyAuthUser>) {
37+
constructor(
38+
authorise: AuthServiceAuthorise<EasyAuthUser> = DEFAULT_AUTHORISE,
39+
) {
2340
this.authorise = authorise;
2441
}
2542

‎packages/core/src/builds/ui/render.tsx‎

Lines changed: 170 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
import type { BuildType, BuildUploadVariant } from "#builds/schema";
44
import { DestructiveButton, LinkButton } from "#components/button";
5-
import { DocumentLayout } from "#components/document";
5+
import {
6+
DocumentHeader,
7+
DocumentLayout,
8+
DocumentMain,
9+
DocumentSidebar,
10+
DocumentUserSection,
11+
} from "#components/document";
612
import { RawDataPreview } from "#components/raw-data";
713
import type { ProjectType } from "#projects/schema";
814
import { getStore } from "#store";
@@ -18,18 +24,29 @@ export function renderBuildsPage({
1824
builds: BuildType[];
1925
project: ProjectType;
2026
}): JSX.Element {
27+
const title = "All builds";
2128
return (
22-
<DocumentLayout
23-
title="All Builds"
24-
breadcrumbs={[project.name]}
25-
toolbar={
26-
<LinkButton href={urlBuilder.buildCreate(project.id)}>
27-
+ Create
28-
</LinkButton>
29-
}
30-
style={{ padding: 0 }}
31-
>
32-
<BuildsTable caption={""} project={project} builds={builds} labels={[]} />
29+
<DocumentLayout title={title}>
30+
<DocumentHeader
31+
breadcrumbs={[project.name]}
32+
toolbar={
33+
<LinkButton href={urlBuilder.buildCreate(project.id)}>
34+
+ Create
35+
</LinkButton>
36+
}
37+
>
38+
{title}
39+
</DocumentHeader>
40+
<DocumentMain>
41+
<BuildsTable
42+
caption={""}
43+
project={project}
44+
builds={builds}
45+
labels={[]}
46+
/>
47+
</DocumentMain>
48+
<DocumentSidebar></DocumentSidebar>
49+
<DocumentUserSection />
3350
</DocumentLayout>
3451
);
3552
}
@@ -44,114 +61,111 @@ export function renderBuildDetailsPage({
4461
const { url } = getStore();
4562

4663
return (
47-
<DocumentLayout
48-
title={
49-
build.message
64+
<DocumentLayout title={build.sha.slice(0, 7)}>
65+
<DocumentHeader
66+
breadcrumbs={[projectId, "Builds"]}
67+
toolbar={
68+
<div style={{ alignItems: "center", display: "flex", gap: "1rem" }}>
69+
<LinkButton href={urlBuilder.buildUpload(projectId, build.id)}>
70+
Upload
71+
</LinkButton>
72+
<form
73+
hx-delete={url}
74+
hx-confirm="Are you sure about deleting the build?"
75+
>
76+
<DestructiveButton>Delete</DestructiveButton>
77+
</form>
78+
</div>
79+
}
80+
>
81+
{build.message
5082
? `[${build.sha.slice(0, 7)}] ${build.message}`
51-
: build.sha.slice(0, 7)
52-
}
53-
breadcrumbs={[projectId, "Builds"]}
54-
toolbar={
55-
<div style={{ alignItems: "center", display: "flex", gap: "1rem" }}>
56-
<LinkButton href={urlBuilder.buildUpload(projectId, build.id)}>
57-
Upload
58-
</LinkButton>
59-
<form
60-
hx-delete={url}
61-
hx-confirm="Are you sure about deleting the build?"
83+
: build.sha.slice(0, 7)}
84+
</DocumentHeader>
85+
<DocumentMain>
86+
<RawDataPreview data={build} />
87+
</DocumentMain>
88+
<DocumentSidebar
89+
style={{
90+
display: "flex",
91+
flexDirection: "column",
92+
gap: "1rem",
93+
padding: "1rem",
94+
}}
95+
>
96+
{build.hasStorybook ? (
97+
<a
98+
href={urlBuilder.storybookIndexHtml(projectId, build.sha)}
99+
target="_blank"
62100
>
63-
<DestructiveButton>Delete</DestructiveButton>
64-
</form>
65-
</div>
66-
}
67-
style={{ padding: 0 }}
68-
sidebar={
69-
<div
70-
style={{
71-
display: "flex",
72-
flexDirection: "column",
73-
gap: "1rem",
74-
marginTop: "1rem",
75-
}}
76-
>
77-
{build.hasStorybook ? (
78-
<a
79-
href={urlBuilder.storybookIndexHtml(projectId, build.sha)}
80-
target="_blank"
81-
>
82-
View Storybook
83-
</a>
84-
) : (
85-
<a
86-
href={urlBuilder.buildUpload(projectId, build.sha, "storybook")}
87-
class="description"
88-
>
89-
Upload Storybook
90-
</a>
91-
)}
92-
{build.hasTestReport ? (
93-
<a
94-
href={urlBuilder.storybookTestReport(projectId, build.sha)}
95-
target="_blank"
96-
>
97-
View Test Report
98-
</a>
99-
) : (
100-
<a
101-
href={urlBuilder.buildUpload(projectId, build.sha, "testReport")}
102-
class="description"
103-
>
104-
Upload Test report
105-
</a>
106-
)}
107-
{build.hasCoverage ? (
108-
<a
109-
href={urlBuilder.storybookCoverage(projectId, build.sha)}
110-
target="_blank"
111-
>
112-
View Coverage
113-
</a>
114-
) : (
115-
<a
116-
href={urlBuilder.buildUpload(projectId, build.sha, "coverage")}
117-
class="description"
118-
>
119-
Upload Coverage report
120-
</a>
121-
)}
101+
View Storybook
102+
</a>
103+
) : (
104+
<a
105+
href={urlBuilder.buildUpload(projectId, build.sha, "storybook")}
106+
class="description"
107+
>
108+
Upload Storybook
109+
</a>
110+
)}
111+
{build.hasTestReport ? (
112+
<a
113+
href={urlBuilder.storybookTestReport(projectId, build.sha)}
114+
target="_blank"
115+
>
116+
View Test Report
117+
</a>
118+
) : (
119+
<a
120+
href={urlBuilder.buildUpload(projectId, build.sha, "testReport")}
121+
class="description"
122+
>
123+
Upload Test report
124+
</a>
125+
)}
126+
{build.hasCoverage ? (
127+
<a
128+
href={urlBuilder.storybookCoverage(projectId, build.sha)}
129+
target="_blank"
130+
>
131+
View Coverage
132+
</a>
133+
) : (
134+
<a
135+
href={urlBuilder.buildUpload(projectId, build.sha, "coverage")}
136+
class="description"
137+
>
138+
Upload Coverage report
139+
</a>
140+
)}
122141

123-
{build.hasScreenshots ? (
124-
<a
125-
href={urlBuilder.storybookScreenshotsDownload(
126-
projectId,
127-
build.sha,
128-
)}
129-
target="_blank"
130-
>
131-
Download screenshots
132-
</a>
133-
) : (
134-
<a
135-
href={urlBuilder.buildUpload(projectId, build.sha, "screenshots")}
136-
class="description"
137-
>
138-
Upload Screenshots
139-
</a>
140-
)}
142+
{build.hasScreenshots ? (
143+
<a
144+
href={urlBuilder.storybookScreenshotsDownload(projectId, build.sha)}
145+
target="_blank"
146+
>
147+
Download screenshots
148+
</a>
149+
) : (
150+
<a
151+
href={urlBuilder.buildUpload(projectId, build.sha, "screenshots")}
152+
class="description"
153+
>
154+
Upload Screenshots
155+
</a>
156+
)}
141157

142-
{build.hasStorybook ? (
143-
<a
144-
href={urlBuilder.storybookDownload(projectId, build.sha)}
145-
download={`storybook-${projectId}-${build.sha}.zip`}
146-
target="_blank"
147-
>
148-
Download Storybook
149-
</a>
150-
) : null}
151-
</div>
152-
}
153-
>
154-
<RawDataPreview data={build} />
158+
{build.hasStorybook ? (
159+
<a
160+
href={urlBuilder.storybookDownload(projectId, build.sha)}
161+
download={`storybook-${projectId}-${build.sha}.zip`}
162+
target="_blank"
163+
>
164+
Download Storybook
165+
</a>
166+
) : null}
167+
</DocumentSidebar>
168+
<DocumentUserSection />
155169
</DocumentLayout>
156170
);
157171
}
@@ -163,15 +177,23 @@ export function renderBuildCreatePage({
163177
project: ProjectType;
164178
labelSlug?: string;
165179
}): JSX.Element {
180+
const title = "Create Build";
181+
166182
return (
167-
<DocumentLayout
168-
title="Create Build"
169-
breadcrumbs={[
170-
{ href: urlBuilder.projectId(project.id), label: project.name },
171-
{ href: urlBuilder.allBuilds(project.id), label: "Builds" },
172-
]}
173-
>
174-
<BuildCreateForm projectId={project.id} labelSlug={labelSlug} />
183+
<DocumentLayout title={title}>
184+
<DocumentHeader
185+
breadcrumbs={[
186+
{ href: urlBuilder.projectId(project.id), label: project.name },
187+
{ href: urlBuilder.allBuilds(project.id), label: "Builds" },
188+
]}
189+
>
190+
{title}
191+
</DocumentHeader>
192+
<DocumentMain style={{ padding: "1rem" }}>
193+
<BuildCreateForm projectId={project.id} labelSlug={labelSlug} />
194+
</DocumentMain>
195+
<DocumentSidebar></DocumentSidebar>
196+
<DocumentUserSection />
175197
</DocumentLayout>
176198
);
177199
}
@@ -185,23 +207,31 @@ export function renderBuildUploadPage({
185207
projectId: string;
186208
uploadVariant?: BuildUploadVariant;
187209
}): JSX.Element {
210+
const title = "Upload Build files";
211+
188212
return (
189-
<DocumentLayout
190-
title="Upload Build files"
191-
breadcrumbs={[
192-
{ href: urlBuilder.projectId(projectId), label: projectId },
193-
{ href: urlBuilder.allBuilds(projectId), label: "Builds" },
194-
{
195-
href: urlBuilder.buildSHA(projectId, build.id),
196-
label: build.id.slice(0, 7),
197-
},
198-
]}
199-
>
200-
<BuildUploadForm
201-
build={build}
202-
projectId={projectId}
203-
uploadVariant={uploadVariant}
204-
/>
213+
<DocumentLayout title={title}>
214+
<DocumentHeader
215+
breadcrumbs={[
216+
{ href: urlBuilder.projectId(projectId), label: projectId },
217+
{ href: urlBuilder.allBuilds(projectId), label: "Builds" },
218+
{
219+
href: urlBuilder.buildSHA(projectId, build.id),
220+
label: build.id.slice(0, 7),
221+
},
222+
]}
223+
>
224+
{title}
225+
</DocumentHeader>
226+
<DocumentMain style={{ padding: "1rem" }}>
227+
<BuildUploadForm
228+
build={build}
229+
projectId={projectId}
230+
uploadVariant={uploadVariant}
231+
/>
232+
</DocumentMain>
233+
<DocumentSidebar></DocumentSidebar>
234+
<DocumentUserSection />
205235
</DocumentLayout>
206236
);
207237
}

0 commit comments

Comments
 (0)