Skip to content

Commit 4c60dcc

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add create from scratch flow
1 parent 811872f commit 4c60dcc

File tree

5 files changed

+80
-23
lines changed

5 files changed

+80
-23
lines changed

‎site/src/pages/CreateTemplatePage/CreateTemplatePage.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,16 @@ import { FullPageHorizontalForm } from "components/FullPageForm/FullPageHorizont
66
import { DuplicateTemplateView } from "./DuplicateTemplateView";
77
import { ImportStarterTemplateView } from "./ImportStarterTemplateView";
88
import { UploadTemplateView } from "./UploadTemplateView";
9+
import { Template } from "api/typesGenerated";
910

1011
const CreateTemplatePage: FC = () => {
1112
const navigate = useNavigate();
1213
const [searchParams] = useSearchParams();
1314

15+
const onSuccess = (template: Template) => {
16+
navigate(`/templates/${template.name}/files`);
17+
};
18+
1419
const onCancel = () => {
1520
navigate(-1);
1621
};
@@ -23,11 +28,11 @@ const CreateTemplatePage: FC = () => {
2328

2429
<FullPageHorizontalForm title="Create Template" onCancel={onCancel}>
2530
{searchParams.has("fromTemplate") ? (
26-
<DuplicateTemplateView />
31+
<DuplicateTemplateView onSuccess={onSuccess} />
2732
) : searchParams.has("exampleId") ? (
28-
<ImportStarterTemplateView />
33+
<ImportStarterTemplateView onSuccess={onSuccess} />
2934
) : (
30-
<UploadTemplateView />
35+
<UploadTemplateView onSuccess={onSuccess} />
3136
)}
3237
</FullPageHorizontalForm>
3338
</>

‎site/src/pages/CreateTemplatePage/DuplicateTemplateView.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,15 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
1515
import { Loader } from "components/Loader/Loader";
1616
import { CreateTemplateForm } from "./CreateTemplateForm";
1717
import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
18+
import { Template } from "api/typesGenerated";
1819

19-
export const DuplicateTemplateView: FC = () => {
20+
type DuplicateTemplateViewProps = {
21+
onSuccess: (template: Template) => void;
22+
};
23+
24+
export const DuplicateTemplateView: FC<DuplicateTemplateViewProps> = ({
25+
onSuccess,
26+
}) => {
2027
const navigate = useNavigate();
2128
const organizationId = useOrganizationId();
2229
const [searchParams] = useSearchParams();
@@ -79,7 +86,7 @@ export const DuplicateTemplateView: FC = () => {
7986
),
8087
template: newTemplate(formData),
8188
});
82-
navigate(`/templates/${template.name}`);
89+
onSuccess(template);
8390
}}
8491
/>
8592
);

‎site/src/pages/CreateTemplatePage/ImportStarterTemplateView.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,15 @@ import {
1818
getFormPermissions,
1919
newTemplate,
2020
} from "./utils";
21+
import { Template } from "api/typesGenerated";
2122

22-
export const ImportStarterTemplateView: FC = () => {
23+
type ImportStarterTemplateViewProps = {
24+
onSuccess: (template: Template) => void;
25+
};
26+
27+
export const ImportStarterTemplateView: FC<ImportStarterTemplateViewProps> = ({
28+
onSuccess,
29+
}) => {
2330
const navigate = useNavigate();
2431
const organizationId = useOrganizationId();
2532
const [searchParams] = useSearchParams();
@@ -76,7 +83,7 @@ export const ImportStarterTemplateView: FC = () => {
7683
),
7784
template: newTemplate(formData),
7885
});
79-
navigate(`/templates/${template.name}`);
86+
onSuccess(template);
8087
}}
8188
/>
8289
);

‎site/src/pages/CreateTemplatePage/UploadTemplateView.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,16 @@ import { useOrganizationId } from "contexts/auth/useOrganizationId";
1111
import { useDashboard } from "modules/dashboard/useDashboard";
1212
import { CreateTemplateForm } from "./CreateTemplateForm";
1313
import { firstVersionFromFile, getFormPermissions, newTemplate } from "./utils";
14+
import { Template } from "api/typesGenerated";
15+
import { FC } from "react";
1416

15-
export const UploadTemplateView = () => {
17+
type UploadTemplateViewProps = {
18+
onSuccess: (template: Template) => void;
19+
};
20+
21+
export const UploadTemplateView: FC<UploadTemplateViewProps> = ({
22+
onSuccess,
23+
}) => {
1624
const navigate = useNavigate();
1725
const organizationId = useOrganizationId();
1826

@@ -61,7 +69,7 @@ export const UploadTemplateView = () => {
6169
),
6270
template: newTemplate(formData),
6371
});
64-
navigate(`/templates/${template.name}`);
72+
onSuccess(template);
6573
}}
6674
/>
6775
);

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

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TableHead from "@mui/material/TableHead";
88
import TableRow from "@mui/material/TableRow";
99
import AddIcon from "@mui/icons-material/AddOutlined";
1010
import { type FC } from "react";
11-
import { useNavigate, Link as RouterLink } from "react-router-dom";
11+
import { useNavigate } from "react-router-dom";
1212
import { createDayString } from "utils/createDayString";
1313
import {
1414
formatTemplateBuildTime,
@@ -45,6 +45,15 @@ import { docs } from "utils/docs";
4545
import Skeleton from "@mui/material/Skeleton";
4646
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
4747
import { DeprecatedBadge } from "components/Badges/Badges";
48+
import {
49+
MoreMenu,
50+
MoreMenuContent,
51+
MoreMenuItem,
52+
MoreMenuTrigger,
53+
} from "components/MoreMenu/MoreMenu";
54+
import NoteAddOutlined from "@mui/icons-material/NoteAddOutlined";
55+
import UploadOutlined from "@mui/icons-material/UploadOutlined";
56+
import Inventory2 from "@mui/icons-material/Inventory2";
4857

4958
export const Language = {
5059
developerCount: (activeCount: number): string => {
@@ -165,25 +174,46 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
165174
}) => {
166175
const isLoading = !templates;
167176
const isEmpty = templates && templates.length === 0;
177+
const navigate = useNavigate();
168178

169179
return (
170180
<Margins>
171181
<PageHeader
172182
actions={
173183
canCreateTemplates && (
174-
<>
175-
<Button component={RouterLink} to="/starter-templates">
176-
Starter Templates
177-
</Button>
178-
<Button
179-
startIcon={<AddIcon />}
180-
component={RouterLink}
181-
to="new"
182-
variant="contained"
183-
>
184-
Create Template
185-
</Button>
186-
</>
184+
<MoreMenu>
185+
<MoreMenuTrigger>
186+
<Button startIcon={<AddIcon />} variant="contained">
187+
Create Template
188+
</Button>
189+
</MoreMenuTrigger>
190+
<MoreMenuContent>
191+
<MoreMenuItem
192+
onClick={() => {
193+
navigate(`/templates/new?exampleId=scratch`);
194+
}}
195+
>
196+
<NoteAddOutlined />
197+
From scratch
198+
</MoreMenuItem>
199+
<MoreMenuItem
200+
onClick={() => {
201+
navigate("/templates/new");
202+
}}
203+
>
204+
<UploadOutlined />
205+
Upload template
206+
</MoreMenuItem>
207+
<MoreMenuItem
208+
onClick={() => {
209+
navigate("/starter-templates");
210+
}}
211+
>
212+
<Inventory2 />
213+
Choose a starter template
214+
</MoreMenuItem>
215+
</MoreMenuContent>
216+
</MoreMenu>
187217
)
188218
}
189219
>

0 commit comments

Comments
 (0)