Skip to content

refactor: get rid of templateVariablesXService #9763

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 6 commits into from
Sep 19, 2023
Merged

refactor: get rid of templateVariablesXService #9763

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fa39cc6
refactor: get rid of `templateVariablesXService`
aslilac Sep 18, 2023
f5e7206
change queryKey
aslilac Sep 19, 2023
9e394dd
Merge branch 'main' into template-settings-9541
aslilac Sep 19, 2023
a4032d0
feedback
aslilac Sep 19, 2023
687afa6
fix tests
aslilac Sep 19, 2023
2fc9ffa
lint
aslilac Sep 19, 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
10 changes: 9 additions & 1 deletion site/src/api/errors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,15 @@ export const mapApiErrorToFieldErrors = (
export const getErrorMessage = (
error: unknown,
defaultMessage: string,
): string => (isApiError(error) ? error.response.data.message : defaultMessage);
): string => {
if (isApiError(error)) {
return error.response.data.message;
}
if (typeof error === "string") {
return error;
}
return defaultMessage;
};

/**
*
Expand Down
61 changes: 59 additions & 2 deletions site/src/api/queries/templates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import * as API from "api/api";
import { type Template, type AuthorizationResponse } from "api/typesGenerated";
import { type QueryOptions } from "@tanstack/react-query";
import {
type Template,
type AuthorizationResponse,
type CreateTemplateVersionRequest,
type ProvisionerJobStatus,
type TemplateVersion,
} from "api/typesGenerated";
import { type QueryClient, type QueryOptions } from "@tanstack/react-query";
import { delay } from "utils/delay";

export const templateByNameKey = (orgId: string, name: string) => [
orgId,
Expand Down Expand Up @@ -63,3 +70,53 @@ export const templateVersions = (templateId: string) => {
queryFn: () => API.getTemplateVersions(templateId),
};
};

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

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

let data: TemplateVersion;
let jobStatus: ProvisionerJobStatus;
do {
await delay(1000);
data = await API.getTemplateVersion(newVersion.id);
jobStatus = data.job.status;

if (jobStatus === "succeeded") {
return newVersion.id;
}
} while (jobStatus === "pending" || jobStatus === "running");

// No longer pending/running, but didn't succeed
throw data.job.error;
},
};
};

export const updateActiveTemplateVersion = (
template: Template,
queryClient: QueryClient,
) => {
return {
mutationFn: (versionId: string) =>
API.updateActiveTemplateVersion(template.id, {
id: versionId,
}),
onSuccess: async () => {
// invalidated because of `active_version_id`
await queryClient.invalidateQueries(
templateByNameKey(template.organization_id, template.name),
);
},
};
};
50 changes: 4 additions & 46 deletions site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,14 @@ import {
MockTemplateVersionVariable1,
MockTemplateVersionVariable2,
MockTemplateVersion2,
MockTemplateVersionVariable5,
} from "testHelpers/entities";
import { delay } from "utils/delay";

const validFormValues = {
first_variable: "Hello world",
second_variable: "123",
};

const validationRequiredField = "Variable is required.";

const renderTemplateVariablesPage = async () => {
renderWithTemplateSettingsLayout(<TemplateVariablesPage />, {
route: `/templates/${MockTemplate.name}/variables`,
Expand Down Expand Up @@ -62,7 +60,7 @@ describe("TemplateVariablesPage", () => {
jest.spyOn(API, "getTemplateByName").mockResolvedValueOnce(MockTemplate);
jest
.spyOn(API, "getTemplateVersion")
.mockResolvedValueOnce(MockTemplateVersion);
.mockResolvedValue(MockTemplateVersion);
jest
.spyOn(API, "getTemplateVersionVariables")
.mockResolvedValueOnce([
Expand Down Expand Up @@ -106,49 +104,9 @@ describe("TemplateVariablesPage", () => {
FooterFormLanguage.defaultSubmitLabel,
);
await userEvent.click(submitButton);

// Wait for the success message
await screen.findByText("Template updated successfully");
});
await delay(1500);

it("user forgets to fill the required field", async () => {
jest.spyOn(API, "getTemplateByName").mockResolvedValueOnce(MockTemplate);
jest
.spyOn(API, "getTemplateVersion")
.mockResolvedValueOnce(MockTemplateVersion);
jest
.spyOn(API, "getTemplateVersionVariables")
.mockResolvedValueOnce([
MockTemplateVersionVariable1,
MockTemplateVersionVariable5,
]);
jest
.spyOn(API, "createTemplateVersion")
.mockResolvedValueOnce(MockTemplateVersion2);
jest.spyOn(API, "updateActiveTemplateVersion").mockResolvedValueOnce({
message: "done",
});

await renderTemplateVariablesPage();

const firstVariable = await screen.findByLabelText(
MockTemplateVersionVariable1.name,
);
expect(firstVariable).toBeDefined();

const fifthVariable = await screen.findByLabelText(
MockTemplateVersionVariable5.name,
);
expect(fifthVariable).toBeDefined();

// Submit the form
const submitButton = await screen.findByText(
FooterFormLanguage.defaultSubmitLabel,
);
await userEvent.click(submitButton);

// Check validation error
const validationError = await screen.findByText(validationRequiredField);
expect(validationError).toBeDefined();
await screen.findByText("Template updated successfully");
});
});
105 changes: 72 additions & 33 deletions site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,88 @@
import { useMachine } from "@xstate/react";
import {
CreateTemplateVersionRequest,
TemplateVersionVariable,
VariableValue,
} from "api/typesGenerated";
import { displaySuccess } from "components/GlobalSnackbar/utils";
import { useOrganizationId } from "hooks/useOrganizationId";
import { FC } from "react";
import { useCallback, type FC } from "react";
import { Helmet } from "react-helmet-async";
import { useNavigate, useParams } from "react-router-dom";
import { templateVariablesMachine } from "xServices/template/templateVariablesXService";
import { pageTitle } from "../../../utils/page";
import { pageTitle } from "utils/page";
import { useTemplateSettings } from "../TemplateSettingsLayout";
import { TemplateVariablesPageView } from "./TemplateVariablesPageView";
import {
createAndBuildTemplateVersion,
templateVersion,
templateVersionVariables,
updateActiveTemplateVersion,
} from "api/queries/templates";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { Loader } from "components/Loader/Loader";

export const TemplateVariablesPage: FC = () => {
const { template: templateName } = useParams() as {
organization: string;
template: string;
};
const organizationId = useOrganizationId();
const orgId = useOrganizationId();
const { template } = useTemplateSettings();
const navigate = useNavigate();
const [state, send] = useMachine(templateVariablesMachine, {
context: {
organizationId,
template,
},
actions: {
onUpdateTemplate: () => {
displaySuccess("Template updated successfully");
},
},
const queryClient = useQueryClient();
const versionId = template.active_version_id;

const {
data: version,
error: versionError,
isLoading: isVersionLoading,
} = useQuery({ ...templateVersion(versionId), keepPreviousData: true });
const {
data: variables,
error: variablesError,
isLoading: isVariablesLoading,
} = useQuery({
...templateVersionVariables(versionId),
keepPreviousData: true,
});

const {
mutateAsync: sendCreateAndBuildTemplateVersion,
error: buildError,
isLoading: isBuilding,
} = useMutation(createAndBuildTemplateVersion(orgId));
const {
activeTemplateVersion,
templateVariables,
getTemplateDataError,
updateTemplateError,
jobError,
} = state.context;
mutateAsync: sendUpdateActiveTemplateVersion,
error: publishError,
isLoading: isPublishing,
} = useMutation(updateActiveTemplateVersion(template, queryClient));

const publishVersion = useCallback(
async (versionId: string) => {
await sendUpdateActiveTemplateVersion(versionId);
displaySuccess("Template updated successfully");
},
[sendUpdateActiveTemplateVersion],
);

const buildVersion = useCallback(
async (req: CreateTemplateVersionRequest) => {
const newVersionId = await sendCreateAndBuildTemplateVersion(req);
await publishVersion(newVersionId);
},
[sendCreateAndBuildTemplateVersion, publishVersion],
);

const isSubmitting = Boolean(isBuilding || isPublishing);

const error = versionError ?? variablesError;
if (error) {
return <ErrorAlert error={error} />;
}

if (isVersionLoading || isVariablesLoading) {
return <Loader />;
}

return (
<>
Expand All @@ -48,23 +91,19 @@ export const TemplateVariablesPage: FC = () => {
</Helmet>

<TemplateVariablesPageView
isSubmitting={state.hasTag("submitting")}
templateVersion={activeTemplateVersion}
templateVariables={templateVariables}
isSubmitting={isSubmitting}
templateVersion={version}
templateVariables={variables}
errors={{
getTemplateDataError,
updateTemplateError,
jobError,
buildError,
publishError,
}}
onCancel={() => {
navigate(`/templates/${templateName}`);
}}
onSubmit={(formData) => {
const request = filterEmptySensitiveVariables(
formData,
templateVariables,
);
send({ type: "UPDATE_TEMPLATE_EVENT", request: request });
onSubmit={async (formData) => {
const request = filterEmptySensitiveVariables(formData, variables);
await buildVersion(request);
}}
/>
</>
Expand Down
29 changes: 12 additions & 17 deletions ...rc/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const RequiredVariable: Story = {
},
};

export const WithUpdateTemplateError: Story = {
export const WithErrors: Story = {
args: {
templateVersion: MockTemplateVersion,
templateVariables: [
Expand All @@ -59,25 +59,20 @@ export const WithUpdateTemplateError: Story = {
MockTemplateVersionVariable4,
],
errors: {
updateTemplateError: mockApiError({
message: "Something went wrong.",
buildError: mockApiError({
message: "buildError",
validations: [
{
field: `user_variable_values[0].value`,
detail: "Variable is required.",
},
],
}),
publishError: mockApiError({ message: "publishError" }),
},
},
};

export const WithJobError: Story = {
args: {
templateVersion: MockTemplateVersion,
templateVariables: [
MockTemplateVersionVariable1,
MockTemplateVersionVariable2,
MockTemplateVersionVariable3,
MockTemplateVersionVariable4,
],
errors: {
jobError:
"template import provision for start: recv import provision: plan terraform: terraform plan: exit status 1",
initialTouched: {
user_variable_values: true,
},
},
};
Loading