Skip to content

Commit b883857

Browse files
abuyukyi101198abuyukyi101198
authored
feat(images): Implement design for image download form MAASENG-4362 (#5616)
1 parent de35b30 commit b883857

File tree

24 files changed

+197
-135
lines changed

24 files changed

+197
-135
lines changed

src/app/images/components/ImagesTable/DeleteImageConfirm/DeleteImageConfirm.test.tsx renamed to src/app/images/components/ImagesForms/DeleteImageForm/DeleteImageForm.test.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Formik } from "formik";
22
import configureStore from "redux-mock-store";
33

4-
import DeleteImageConfirm from "./DeleteImageConfirm";
4+
import DeleteImageForm from "./DeleteImageForm";
55

66
import { Labels as TableDeleteConfirmLabels } from "@/app/base/components/TableDeleteConfirm/TableDeleteConfirm";
77
import { bootResourceActions } from "@/app/store/bootresource";
@@ -11,7 +11,7 @@ import { userEvent, screen, renderWithBrowserRouter } from "@/testing/utils";
1111

1212
const mockStore = configureStore<RootState, {}>();
1313

14-
describe("DeleteImageConfirm", () => {
14+
describe("DeleteImageForm", () => {
1515
it("calls closeForm on cancel click", async () => {
1616
const closeForm = vi.fn();
1717
const resource = factory.bootResource();
@@ -22,7 +22,7 @@ describe("DeleteImageConfirm", () => {
2222
});
2323
renderWithBrowserRouter(
2424
<Formik initialValues={{ images: [] }} onSubmit={vi.fn()}>
25-
<DeleteImageConfirm closeForm={closeForm} resource={resource} />
25+
<DeleteImageForm closeForm={closeForm} resource={resource} />
2626
</Formik>,
2727
{ state }
2828
);
@@ -41,7 +41,7 @@ describe("DeleteImageConfirm", () => {
4141
const store = mockStore(state);
4242
const { unmount } = renderWithBrowserRouter(
4343
<Formik initialValues={{ images: [] }} onSubmit={vi.fn()}>
44-
<DeleteImageConfirm closeForm={vi.fn()} resource={resource} />
44+
<DeleteImageForm closeForm={vi.fn()} resource={resource} />
4545
</Formik>,
4646
{ store }
4747
);
@@ -64,7 +64,7 @@ describe("DeleteImageConfirm", () => {
6464
const store = mockStore(state);
6565
renderWithBrowserRouter(
6666
<Formik initialValues={{ images: [] }} onSubmit={vi.fn()}>
67-
<DeleteImageConfirm closeForm={vi.fn()} resource={resource} />
67+
<DeleteImageForm closeForm={vi.fn()} resource={resource} />
6868
</Formik>,
6969
{ store }
7070
);

src/app/images/components/ImagesTable/DeleteImageConfirm/DeleteImageConfirm.tsx renamed to src/app/images/components/ImagesForms/DeleteImageForm/DeleteImageForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export enum Labels {
1818
AreYouSure = "Are you sure you want to delete this image?",
1919
}
2020

21-
const DeleteImageConfirm = ({
21+
const DeleteImageForm = ({
2222
closeForm,
2323
resource,
2424
}: Props): JSX.Element | null => {
@@ -59,4 +59,4 @@ const DeleteImageConfirm = ({
5959
);
6060
};
6161

62-
export default DeleteImageConfirm;
62+
export default DeleteImageForm;

‎src/app/images/components/ImagesForms/DeleteImageForm/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./DeleteImageForm";

src/app/images/components/ImagesTable/DeleteImages/DeleteImages.test.tsx renamed to src/app/images/components/ImagesForms/DeleteMultipleImagesForm/DeleteMultipleImagesForm.test.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Formik } from "formik";
22
import configureStore from "redux-mock-store";
33

4-
import DeleteImages from "./DeleteImages";
4+
import DeleteMultipleImagesForm from "./DeleteMultipleImagesForm";
55

66
import { Labels as TableDeleteConfirmLabels } from "@/app/base/components/TableDeleteConfirm/TableDeleteConfirm";
77
import { bootResourceActions } from "@/app/store/bootresource";
@@ -11,12 +11,12 @@ import { userEvent, screen, renderWithBrowserRouter } from "@/testing/utils";
1111

1212
const mockStore = configureStore<RootState, {}>();
1313

14-
describe("DeleteImages", () => {
14+
describe("DeleteMultipleImagesForm", () => {
1515
it("calls closeForm on cancel click", async () => {
1616
const closeForm = vi.fn();
1717
renderWithBrowserRouter(
1818
<Formik initialValues={{ images: [] }} onSubmit={vi.fn()}>
19-
<DeleteImages
19+
<DeleteMultipleImagesForm
2020
closeForm={closeForm}
2121
rowSelection={{}}
2222
setRowSelection={vi.fn}
@@ -38,7 +38,7 @@ describe("DeleteImages", () => {
3838
const store = mockStore(state);
3939
const { unmount } = renderWithBrowserRouter(
4040
<Formik initialValues={{ images: [] }} onSubmit={vi.fn()}>
41-
<DeleteImages
41+
<DeleteMultipleImagesForm
4242
closeForm={vi.fn}
4343
rowSelection={{}}
4444
setRowSelection={vi.fn}
@@ -65,7 +65,7 @@ describe("DeleteImages", () => {
6565
const store = mockStore(state);
6666
renderWithBrowserRouter(
6767
<Formik initialValues={{ images: [] }} onSubmit={vi.fn()}>
68-
<DeleteImages
68+
<DeleteMultipleImagesForm
6969
closeForm={vi.fn}
7070
rowSelection={{ 1: true }}
7171
setRowSelection={vi.fn}

src/app/images/components/ImagesTable/DeleteImages/DeleteImages.tsx renamed to src/app/images/components/ImagesForms/DeleteMultipleImagesForm/DeleteMultipleImagesForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ type DeleteImagesProps = {
1919
closeForm: () => void;
2020
};
2121

22-
const DeleteImages = ({
22+
const DeleteMultipleImagesForm = ({
2323
rowSelection,
2424
setRowSelection,
2525
closeForm,
@@ -78,4 +78,4 @@ const DeleteImages = ({
7878
);
7979
};
8080

81-
export default DeleteImages;
81+
export default DeleteMultipleImagesForm;

‎src/app/images/components/ImagesForms/DeleteMultipleImagesForm/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./DeleteMultipleImagesForm";

‎src/app/images/components/ImagesForms/ImagesForms.test.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,7 @@ import ImagesForms from "./ImagesForms";
33
import { ImageSidePanelViews } from "@/app/images/constants";
44
import type { ImageSidePanelContent } from "@/app/images/types";
55
import * as factory from "@/testing/factories";
6-
import {
7-
getByTextContent,
8-
renderWithBrowserRouter,
9-
screen,
10-
} from "@/testing/utils";
6+
import { renderWithBrowserRouter, screen } from "@/testing/utils";
117

128
describe("ImagesForms", () => {
139
it("renders DeleteImage form", () => {
@@ -59,8 +55,8 @@ describe("ImagesForms", () => {
5955
);
6056

6157
expect(
62-
getByTextContent(
63-
"Select images to be imported and kept in sync daily. Images will be available for deploying to machines managed by MAAS."
58+
screen.getByText(
59+
"Select images to be imported and kept in sync daily. Images will be available for deployment on MAAS managed machines."
6460
)
6561
).toBeInTheDocument();
6662
});

‎src/app/images/components/ImagesForms/ImagesForms.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useCallback } from "react";
22

3-
import DeleteImageConfirm from "../ImagesTable/DeleteImageConfirm";
3+
import DeleteImageForm from "./DeleteImageForm";
44

55
import type { SidePanelContentTypes } from "@/app/base/side-panel-context";
6-
import DeleteImages from "@/app/images/components/ImagesTable/DeleteImages";
7-
import DownloadImages from "@/app/images/components/ImagesTable/DownloadImages";
6+
import DeleteMultipleImagesForm from "@/app/images/components/ImagesForms/DeleteMultipleImagesForm";
7+
import SelectUpstreamImagesForm from "@/app/images/components/ImagesForms/SelectUpstreamImagesForm";
88
import { ImageSidePanelViews } from "@/app/images/constants";
99

1010
type Props = SidePanelContentTypes & {};
@@ -27,7 +27,7 @@ const ImagesForms = ({ sidePanelContent, setSidePanelContent }: Props) => {
2727
: null;
2828
if (!bootResource) return null;
2929
return (
30-
<DeleteImageConfirm
30+
<DeleteImageForm
3131
closeForm={clearSidePanelContent}
3232
resource={bootResource}
3333
/>
@@ -44,15 +44,15 @@ const ImagesForms = ({ sidePanelContent, setSidePanelContent }: Props) => {
4444
: null;
4545
if (!rowSelection) return null;
4646
return (
47-
<DeleteImages
47+
<DeleteMultipleImagesForm
4848
closeForm={clearSidePanelContent}
4949
rowSelection={rowSelection}
5050
setRowSelection={setRowSelection}
5151
/>
5252
);
5353
}
5454
case ImageSidePanelViews.DOWNLOAD_IMAGE: {
55-
return <DownloadImages />;
55+
return <SelectUpstreamImagesForm />;
5656
}
5757
default:
5858
return null;

src/app/images/components/ImagesTable/DownloadImages/DownloadImages.test.tsx renamed to src/app/images/components/ImagesForms/SelectUpstreamImagesForm/SelectUpstreamImagesForm.test.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Provider } from "react-redux";
22
import { MemoryRouter } from "react-router-dom";
33
import configureStore from "redux-mock-store";
44

5-
import DownloadImages from "@/app/images/components/ImagesTable/DownloadImages/DownloadImages";
5+
import SelectUpstreamImagesForm from "@/app/images/components/ImagesForms/SelectUpstreamImagesForm/SelectUpstreamImagesForm";
66
import { bootResourceActions } from "@/app/store/bootresource";
77
import { BootResourceSourceType } from "@/app/store/bootresource/types";
88
import type { RootState } from "@/app/store/root/types";
@@ -17,8 +17,8 @@ import {
1717

1818
const mockStore = configureStore<RootState, {}>();
1919

20-
describe("DownloadImages", () => {
21-
it("correctly sets initial values", () => {
20+
describe("SelectUpstreamImagesForm", () => {
21+
it("correctly sets initial values", async () => {
2222
const ubuntu = factory.bootResourceUbuntu({
2323
arches: [
2424
{
@@ -75,10 +75,13 @@ describe("DownloadImages", () => {
7575
}),
7676
});
7777

78-
renderWithBrowserRouter(<DownloadImages />, {
78+
renderWithBrowserRouter(<SelectUpstreamImagesForm />, {
7979
state,
8080
});
8181

82+
await userEvent.click(screen.getByText("Ubuntu"));
83+
await userEvent.click(screen.getByText("Centos"));
84+
8285
const rowUbuntu = within(
8386
screen.getByRole("row", { name: "16.04 LTS" })
8487
).getAllByRole("combobox");
@@ -154,12 +157,14 @@ describe("DownloadImages", () => {
154157
render(
155158
<Provider store={store}>
156159
<MemoryRouter>
157-
<DownloadImages />
160+
<SelectUpstreamImagesForm />
158161
</MemoryRouter>
159162
</Provider>
160163
);
161164

162-
await userEvent.click(screen.getByRole("button", { name: "Download" }));
165+
await userEvent.click(
166+
screen.getByRole("button", { name: "Save and sync" })
167+
);
163168

164169
const expectedUbuntuAction = bootResourceActions.saveUbuntu({
165170
osystems: [
@@ -201,7 +206,7 @@ describe("DownloadImages", () => {
201206
},
202207
}),
203208
});
204-
renderWithBrowserRouter(<DownloadImages />, {
209+
renderWithBrowserRouter(<SelectUpstreamImagesForm />, {
205210
state,
206211
});
207212

src/app/images/components/ImagesTable/DownloadImages/DownloadImages.tsx renamed to src/app/images/components/ImagesForms/SelectUpstreamImagesForm/SelectUpstreamImagesForm.tsx

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useCallback, useEffect, useState } from "react";
1+
import { useCallback, useEffect, useState } from "react";
22

33
import type { MultiSelectItem } from "@canonical/react-components";
44
import { Notification, Strip } from "@canonical/react-components";
55
import { useDispatch, useSelector } from "react-redux";
66

7-
import DownloadImagesSelect from "./DownloadImagesSelect";
7+
import SelectUpstreamImagesSelect from "./SelectUpstreamImagesSelect";
88

99
import FormikForm from "@/app/base/components/FormikForm";
1010
import { useSidePanel } from "@/app/base/side-panel-context";
@@ -154,7 +154,7 @@ export const groupArchesByRelease = (images: ImagesByOS) => {
154154
return groupedImages;
155155
};
156156

157-
const DownloadImages: React.FC = () => {
157+
const SelectUpstreamImagesForm = () => {
158158
const dispatch = useDispatch();
159159
const ubuntu = useSelector(bootResourceSelectors.ubuntu);
160160
const otherImages = useSelector(bootResourceSelectors.otherImages);
@@ -202,10 +202,8 @@ const DownloadImages: React.FC = () => {
202202

203203
return (
204204
<>
205-
<p>
206-
Select images to be imported and kept in sync daily. Images will be
207-
available for deploying to machines managed by MAAS.
208-
</p>
205+
Select images to be imported and kept in sync daily. Images will be
206+
available for deployment on MAAS managed machines.
209207
{tooManySources && (
210208
<Notification data-testid="too-many-sources" severity="caution">
211209
More than one image source exists. The UI does not support updating
@@ -289,10 +287,10 @@ const DownloadImages: React.FC = () => {
289287
onSuccess={() => {
290288
dispatch(bootResourceActions.poll({ continuous: false }));
291289
}}
292-
submitLabel={"Download"}
290+
submitLabel="Save and sync"
293291
>
294292
{({ values, setFieldValue }: { values: any; setFieldValue: any }) => (
295-
<DownloadImagesSelect
293+
<SelectUpstreamImagesSelect
296294
groupedImages={groupedImages}
297295
setFieldValue={setFieldValue}
298296
values={values}
@@ -304,4 +302,4 @@ const DownloadImages: React.FC = () => {
304302
);
305303
};
306304

307-
export default DownloadImages;
305+
export default SelectUpstreamImagesForm;

0 commit comments

Comments
 (0)