Skip to content

chore(site): remove template version editor xservice #10490

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 24 commits into from
Nov 3, 2023
Merged

chore(site): remove template version editor xservice #10490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
c290855
Refactor initial loading
BrunoQuaresma Oct 31, 2023
93df525
Remove non used events
BrunoQuaresma Oct 31, 2023
b3c712c
Move cancel build to create build service
BrunoQuaresma Oct 31, 2023
10d6b4e
Extract upload
BrunoQuaresma Oct 31, 2023
7eb5c91
Extract create version
BrunoQuaresma Nov 1, 2023
c024a1d
Extract logs
BrunoQuaresma Nov 1, 2023
e7713fe
Refactor version fetching and refetch
BrunoQuaresma Nov 1, 2023
f782c7d
Extract resources
BrunoQuaresma Nov 1, 2023
8bf23af
Extract missing variables
BrunoQuaresma Nov 1, 2023
5502077
Extract publish from the machine and remove it
BrunoQuaresma Nov 1, 2023
20d6100
Remove unused data module
BrunoQuaresma Nov 1, 2023
9d1ca61
Fix loading state and tabs code to make it clear
BrunoQuaresma Nov 1, 2023
c73f976
Fix disable preview state
BrunoQuaresma Nov 1, 2023
86735c9
Optimistic update logs
BrunoQuaresma Nov 1, 2023
86d7a6d
Encapsulate a few logics in hooks
BrunoQuaresma Nov 1, 2023
e748fe8
Extract start/end build logic
BrunoQuaresma Nov 1, 2023
71e8920
Fix tests
BrunoQuaresma Nov 2, 2023
8a7fae6
Remove unused comment
BrunoQuaresma Nov 2, 2023
2769cfe
Show initialize error on snackbar
BrunoQuaresma Nov 2, 2023
4893156
Update tarFile in a single state call
BrunoQuaresma Nov 2, 2023
32934ed
Simplify onDone call
BrunoQuaresma Nov 2, 2023
209e364
Make tar manipulation more clear
BrunoQuaresma Nov 2, 2023
66ea796
Improve publish promise construction
BrunoQuaresma Nov 2, 2023
353f325
Fix storybook
BrunoQuaresma Nov 2, 2023
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
7 changes: 7 additions & 0 deletions site/src/api/queries/files.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,10 @@ export const uploadFile = () => {
mutationFn: API.uploadFile,
};
};

export const file = (fileId: string) => {
return {
queryKey: ["files", fileId],
queryFn: () => API.getFile(fileId),
};
};
16 changes: 16 additions & 0 deletions site/src/api/queries/templates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,15 @@ export const templateVersionVariables = (versionId: string) => {
};
};

export const createTemplateVersion = (orgId: string) => {
return {
mutationFn: async (request: CreateTemplateVersionRequest) => {
const newVersion = await API.createTemplateVersion(orgId, request);
return newVersion;
},
};
};

export const createAndBuildTemplateVersion = (orgId: string) => {
return {
mutationFn: async (request: CreateTemplateVersionRequest) => {
Expand Down Expand Up @@ -216,6 +225,13 @@ export const richParameters = (versionId: string) => {
};
};

export const resources = (versionId: string) => {
return {
queryKey: ["templateVersion", versionId, "resources"],
queryFn: () => API.getTemplateVersionResources(versionId),
};
};

const waitBuildToBeFinished = async (version: TemplateVersion) => {
let data: TemplateVersion;
let jobStatus: ProvisionerJobStatus;
Expand Down
10 changes: 5 additions & 5 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ type Story = StoryObj<typeof TemplateVersionEditor>;

export const Example: Story = {};

export const Logs = {
export const Logs: Story = {
args: {
isBuildingNewVersion: true,
defaultTab: "logs",
buildLogs: MockWorkspaceBuildLogs,
templateVersion: {
...MockTemplateVersion,
Expand All @@ -47,7 +47,7 @@ export const Logs = {

export const Resources: Story = {
args: {
isBuildingNewVersion: true,
defaultTab: "resources",
buildLogs: MockWorkspaceBuildLogs,
resources: [
MockWorkspaceResource,
Expand All @@ -60,9 +60,9 @@ export const Resources: Story = {
},
};

export const ManyLogs = {
export const WithError = {
args: {
isBuildingNewVersion: true,
defaultTab: "logs",
templateVersion: {
...MockTemplateVersion,
job: {
Expand Down
29 changes: 14 additions & 15 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ import AlertTitle from "@mui/material/AlertTitle";
import { DashboardFullPage } from "components/Dashboard/DashboardLayout";
import { type Interpolation, type Theme, useTheme } from "@emotion/react";

type Tab = "logs" | "resources" | undefined; // Undefined is to hide the tab
export interface TemplateVersionEditorProps {
template: Template;
templateVersion: TemplateVersion;
isBuildingNewVersion: boolean;
defaultFileTree: FileTree;
buildLogs?: ProvisionerJobLog[];
resources?: WorkspaceResource[];
Expand All @@ -71,6 +71,7 @@ export interface TemplateVersionEditorProps {
missingVariables?: TemplateVersionVariable[];
onSubmitMissingVariableValues: (values: VariableValue[]) => void;
onCancelSubmitMissingVariableValues: () => void;
defaultTab?: Tab;
}

const topbarHeight = 80;
Expand All @@ -92,7 +93,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
disableUpdate,
template,
templateVersion,
isBuildingNewVersion,
defaultFileTree,
onPreview,
onPublish,
Expand All @@ -109,11 +109,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
missingVariables,
onSubmitMissingVariableValues,
onCancelSubmitMissingVariableValues,
defaultTab,
}) => {
const theme = useTheme();
// If resources are provided, show them by default!
// This is for Storybook!
const [selectedTab, setSelectedTab] = useState(() => (resources ? 1 : 0));
const [selectedTab, setSelectedTab] = useState<Tab>(defaultTab);
const [fileTree, setFileTree] = useState(defaultFileTree);
const [createFileOpen, setCreateFileOpen] = useState(false);
const [deleteFileOpen, setDeleteFileOpen] = useState<string>();
Expand All @@ -125,8 +124,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({

const triggerPreview = useCallback(() => {
onPreview(fileTree);
// Switch to the build log!
setSelectedTab(0);
setSelectedTab("logs");
}, [fileTree, onPreview]);

// Stop ctrl+s from saving files and make ctrl+enter trigger a preview.
Expand Down Expand Up @@ -159,11 +157,12 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
previousVersion.current = templateVersion;
return;
}

if (
["running", "pending"].includes(previousVersion.current.job.status) &&
templateVersion.job.status === "succeeded"
) {
setSelectedTab(1);
setSelectedTab("resources");
setDirty(false);
}
previousVersion.current = templateVersion;
Expand Down Expand Up @@ -218,7 +217,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}

<div css={styles.topbarSides}>
{isBuildingNewVersion && (
{buildLogs && (
<TemplateVersionStatusBadge version={templateVersion} />
)}

Expand Down Expand Up @@ -358,9 +357,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
<div css={styles.tabs}>
<button
css={styles.tab}
className={selectedTab === 0 ? "active" : ""}
className={selectedTab === "logs" ? "active" : ""}
onClick={() => {
setSelectedTab(0);
setSelectedTab("logs");
}}
>
{templateVersion.job.status !== "succeeded" ? (
Expand All @@ -374,9 +373,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
{!disableUpdate && (
<button
css={styles.tab}
className={selectedTab === 1 ? "active" : ""}
className={selectedTab === "resources" ? "active" : ""}
onClick={() => {
setSelectedTab(1);
setSelectedTab("resources");
}}
>
<PreviewIcon />
Expand All @@ -389,7 +388,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
css={[
styles.panel,
{
display: selectedTab !== 0 ? "none" : "flex",
display: selectedTab !== "logs" ? "none" : "flex",
flexDirection: "column",
},
]}
Expand Down Expand Up @@ -427,7 +426,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
styles.panel,
{
paddingBottom: theme.spacing(2),
display: selectedTab !== 1 ? "none" : undefined,
display: selectedTab !== "resources" ? "none" : undefined,
},
]}
>
Expand Down
71 changes: 39 additions & 32 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditorPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { screen, waitFor, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import * as api from "api/api";
import {
MockTemplate,
MockTemplateVersion,
MockWorkspaceBuildLogs,
} from "testHelpers/entities";
Expand All @@ -17,26 +18,37 @@ jest.mock("components/TemplateResourcesTable/TemplateResourcesTable", () => {
};
});

test("Use custom name, message and set it as active when publishing", async () => {
const user = userEvent.setup();
const renderTemplateEditorPage = () => {
renderWithAuth(<TemplateVersionEditorPage />, {
route: `/templates/${MockTemplate.name}/versions/${MockTemplateVersion.name}/edit`,
path: "/templates/:template/versions/:version/edit",
extraRoutes: [
{
path: "/templates/:templateId",
element: <div />,
},
],
});
};

test("Use custom name, message and set it as active when publishing", async () => {
const user = userEvent.setup();
renderTemplateEditorPage();
const topbar = await screen.findByTestId("topbar");

// Build Template
jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
const newTemplateVersion = {
...MockTemplateVersion,
id: "new-version-id",
name: "new-version",
};
jest
.spyOn(api, "createTemplateVersion")
.mockResolvedValueOnce(MockTemplateVersion);
.mockResolvedValue(newTemplateVersion);
Copy link
Member

Choose a reason for hiding this comment

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

Just double-checking for my own understanding: is there any real difference between the mock function returning the base MockTemplateVersion value, versus it returning the updated version?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes, because we are going to use this version to optimistically update the UI.

jest
.spyOn(api, "getTemplateVersion")
.mockResolvedValue({ ...MockTemplateVersion, id: "new-version-id" });
.spyOn(api, "getTemplateVersionByName")
.mockResolvedValue(newTemplateVersion);
jest
.spyOn(api, "watchBuildLogsByTemplateVersionId")
.mockImplementation((_, options) => {
Expand All @@ -52,7 +64,7 @@ test("Use custom name, message and set it as active when publishing", async () =
// Publish
const patchTemplateVersion = jest
.spyOn(api, "patchTemplateVersion")
.mockResolvedValue(MockTemplateVersion);
.mockResolvedValue(newTemplateVersion);
const updateActiveTemplateVersion = jest
.spyOn(api, "updateActiveTemplateVersion")
.mockResolvedValue({ message: "" });
Expand Down Expand Up @@ -84,24 +96,22 @@ test("Use custom name, message and set it as active when publishing", async () =

test("Do not mark as active if promote is not checked", async () => {
const user = userEvent.setup();
renderWithAuth(<TemplateVersionEditorPage />, {
extraRoutes: [
{
path: "/templates/:templateId",
element: <div />,
},
],
});
renderTemplateEditorPage();
const topbar = await screen.findByTestId("topbar");

// Build Template
jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
const newTemplateVersion = {
...MockTemplateVersion,
id: "new-version-id",
name: "new-version",
};
jest
.spyOn(api, "createTemplateVersion")
.mockResolvedValueOnce(MockTemplateVersion);
.mockResolvedValue(newTemplateVersion);
jest
.spyOn(api, "getTemplateVersion")
.mockResolvedValue({ ...MockTemplateVersion, id: "new-version-id" });
.spyOn(api, "getTemplateVersionByName")
.mockResolvedValue(newTemplateVersion);
jest
.spyOn(api, "watchBuildLogsByTemplateVersionId")
.mockImplementation((_, options) => {
Expand All @@ -117,7 +127,7 @@ test("Do not mark as active if promote is not checked", async () => {
// Publish
const patchTemplateVersion = jest
.spyOn(api, "patchTemplateVersion")
.mockResolvedValue(MockTemplateVersion);
.mockResolvedValue(newTemplateVersion);
const updateActiveTemplateVersion = jest
.spyOn(api, "updateActiveTemplateVersion")
.mockResolvedValue({ message: "" });
Expand Down Expand Up @@ -146,30 +156,27 @@ test("Do not mark as active if promote is not checked", async () => {
});

test("Patch request is not send when there are no changes", async () => {
const MockTemplateVersionWithEmptyMessage = {
const newTemplateVersion = {
...MockTemplateVersion,
id: "new-version-id",
name: "new-version",
};
const MockTemplateVersionWithEmptyMessage = {
...newTemplateVersion,
message: "",
};
const user = userEvent.setup();
renderWithAuth(<TemplateVersionEditorPage />, {
extraRoutes: [
{
path: "/templates/:templateId",
element: <div />,
},
],
});
renderTemplateEditorPage();
const topbar = await screen.findByTestId("topbar");

// Build Template
jest.spyOn(api, "uploadFile").mockResolvedValueOnce({ hash: "hash" });
jest
.spyOn(api, "createTemplateVersion")
.mockResolvedValueOnce(MockTemplateVersionWithEmptyMessage);
jest.spyOn(api, "getTemplateVersion").mockResolvedValue({
...MockTemplateVersionWithEmptyMessage,
id: "new-version-id",
});
.mockResolvedValue(MockTemplateVersionWithEmptyMessage);
jest
.spyOn(api, "getTemplateVersionByName")
.mockResolvedValue(MockTemplateVersionWithEmptyMessage);
jest
.spyOn(api, "watchBuildLogsByTemplateVersionId")
.mockImplementation((_, options) => {
Expand Down
Loading