feat(settings): Image source settings to v3 MAASENG-5630 (#5857)

Author: abuyukyi101198

src/app/api/query/imageSources.test.ts

@@ -0,0 +1,87 @@
+import {
+  useGetImageSource,
+  useImageSources,
+  useUpdateImageSource,
+} from "./imageSources";
+
+import type { BootSourceRequest } from "@/app/apiclient";
+import {
+  imageSourceResolvers,
+  mockImageSources,
+} from "@/testing/resolvers/imageSources";
+import {
+  renderHookWithProviders,
+  setupMockServer,
+  waitFor,
+} from "@/testing/utils";
+
+setupMockServer(
+  imageSourceResolvers.listImageSources.handler(),
+  imageSourceResolvers.getImageSource.handler(),
+  imageSourceResolvers.updateImageSource.handler()
+);
+
+describe("useImageSources", () => {
+  it("should return image sources data", async () => {
+    const { result } = renderHookWithProviders(() => useImageSources());
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+    expect(result.current.data?.items).toEqual(mockImageSources.items);
+  });
+});
+
+describe("useGetImageSource", () => {
+  it("should return the correct image source", async () => {
+    const expectedImageSource = mockImageSources.items[0];
+    const { result } = renderHookWithProviders(() =>
+      useGetImageSource(
+        { path: { boot_source_id: expectedImageSource.id } },
+        true
+      )
+    );
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+    expect(result.current.data).toMatchObject(expectedImageSource);
+  });
+
+  it("should return error if image source does not exist", async () => {
+    const { result } = renderHookWithProviders(() =>
+      useGetImageSource({ path: { boot_source_id: 99 } }, true)
+    );
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+  });
+
+  it("should not fetch when enabled is false", async () => {
+    const { result } = renderHookWithProviders(() =>
+      useGetImageSource({ path: { boot_source_id: 1 } }, false)
+    );
+    // Wait a bit to ensure the query doesn't start
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(result.current.isSuccess).toBe(false);
+    expect(result.current.isLoading).toBe(false);
+  });
+});
+
+describe("useUpdateImageSource", () => {
+  it("should update an existing image source", async () => {
+    const updatedImageSource: BootSourceRequest = {
+      url: "http://updated.images.io/",
+      keyring_filename: "/usr/share/keyrings/ubuntu-cloudimage-keyring.gpg",
+      keyring_data: "newdata",
+      priority: 5,
+      skip_keyring_verification: false,
+    };
+    const { result } = renderHookWithProviders(() => useUpdateImageSource());
+    result.current.mutate({
+      body: updatedImageSource,
+      path: { boot_source_id: 1 },
+    });
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+  });
+});

src/app/api/query/imageSources.ts

@@ -0,0 +1,70 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { useWebsocketAwareQuery } from "@/app/api/query/base";
+import {
+  mutationOptionsWithHeaders,
+  queryOptionsWithHeaders,
+} from "@/app/api/utils";
+import type {
+  GetBootSourceData,
+  GetBootSourceErrors,
+  GetBootSourceResponses,
+  ListBootSourcesData,
+  ListBootSourcesErrors,
+  ListBootSourcesResponses,
+  Options,
+  UpdateBootSourceData,
+  UpdateBootSourceErrors,
+  UpdateBootSourceResponses,
+} from "@/app/apiclient";
+import {
+  updateBootSource,
+  getBootSource,
+  listBootSources,
+} from "@/app/apiclient";
+import {
+  getBootSourceQueryKey,
+  listBootSourcesQueryKey,
+} from "@/app/apiclient/@tanstack/react-query.gen";
+
+export const useImageSources = (options?: Options<ListBootSourcesData>) => {
+  return useWebsocketAwareQuery(
+    queryOptionsWithHeaders<
+      ListBootSourcesResponses,
+      ListBootSourcesErrors,
+      ListBootSourcesData
+    >(options, listBootSources, listBootSourcesQueryKey(options))
+  );
+};
+
+export const useGetImageSource = (
+  options: Options<GetBootSourceData>,
+  enabled: boolean
+) => {
+  return useWebsocketAwareQuery({
+    ...queryOptionsWithHeaders<
+      GetBootSourceResponses,
+      GetBootSourceErrors,
+      GetBootSourceData
+    >(options, getBootSource, getBootSourceQueryKey(options)),
+    enabled,
+  });
+};
+
+export const useUpdateImageSource = (
+  mutationOptions?: Options<UpdateBootSourceData>
+) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    ...mutationOptionsWithHeaders<
+      UpdateBootSourceResponses,
+      UpdateBootSourceErrors,
+      UpdateBootSourceData
+    >(mutationOptions, updateBootSource),
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: listBootSourcesQueryKey(),
+      });
+    },
+  });
+};

src/app/base/components/Placeholder/_index.scss

@@ -1,12 +1,12 @@
 @mixin Placeholder {
   .p-placeholder {
     animation: shine 1.5s infinite ease-out;
-    background-color: $color-mid-x-light;
+    background-color: var(--vf-color-background-hover);
     background-image: linear-gradient(
-      to right,
-      $color-mid-x-light calc(50% - 2rem),
-      $color-light 50%,
-      $color-mid-x-light calc(50% + 2rem)
+                    to right,
+                    var(--vf-color-background-hover) calc(50% - 2rem),
+                    var(--vf-color-background-default) 50%,
+                    var(--vf-color-background-hover) calc(50% + 2rem)
     );
     background-size: 300% 100%;
     color: transparent;

src/app/images/components/SelectUpstreamImagesForm/SelectUpstreamImagesForm.test.tsx

@@ -6,14 +6,20 @@ import { bootResourceActions } from "@/app/store/bootresource";
 import { BootResourceSourceType } from "@/app/store/bootresource/types";
 import type { RootState } from "@/app/store/root/types";
 import * as factory from "@/testing/factories";
+import { imageSourceResolvers } from "@/testing/resolvers/imageSources";
 import {
   userEvent,
   screen,
   within,
   renderWithProviders,
+  setupMockServer,
+  waitForLoading,
 } from "@/testing/utils";
 
 const mockStore = configureStore<RootState>();
+const mockServer = setupMockServer(
+  imageSourceResolvers.listImageSources.handler()
+);
 
 describe("SelectUpstreamImagesForm", () => {
   const ubuntu = factory.bootResourceUbuntu({
@@ -77,7 +83,7 @@ describe("SelectUpstreamImagesForm", () => {
     renderWithProviders(<SelectUpstreamImagesForm />, {
       state,
     });
-
+    await waitForLoading();
     const rowUbuntu = within(
       screen.getByRole("row", { name: "16.04 LTS", hidden: true })
     ).getAllByRole("combobox", { hidden: true });
@@ -97,7 +103,7 @@ describe("SelectUpstreamImagesForm", () => {
     renderWithProviders(<SelectUpstreamImagesForm />, {
       store,
     });
-
+    await waitForLoading();
     await userEvent.click(
       screen.getByRole("button", { name: "Save and sync" })
     );
@@ -118,17 +124,22 @@ describe("SelectUpstreamImagesForm", () => {
     const actualActions = store.getActions();
     expect(
       actualActions.find((action) => action.type === expectedUbuntuAction.type)
-    ).toStrictEqual(expectedUbuntuAction);
+    ).toMatchObject(expectedUbuntuAction);
     expect(
       actualActions.find((action) => action.type === expectedOtherAction.type)
     ).toStrictEqual(expectedOtherAction);
   });
 
-  it("disables form with a notification if more than one source detected", () => {
-    const sources = [
-      factory.bootResourceUbuntuSource(),
-      factory.bootResourceUbuntuSource(),
-    ];
+  it("disables form with a notification if more than one source detected", async () => {
+    mockServer.use(
+      imageSourceResolvers.listImageSources.handler({
+        items: [
+          factory.imageSourceFactory.build(),
+          factory.imageSourceFactory.build(),
+        ],
+        total: 2,
+      })
+    );
     const state = factory.rootState({
       bootresource: factory.bootResourceState({
         resources: [
@@ -138,14 +149,14 @@ describe("SelectUpstreamImagesForm", () => {
           arches: [],
           commissioning_series: "focal",
           releases: [],
-          sources,
+          sources: [], // uses v3
         },
       }),
     });
     renderWithProviders(<SelectUpstreamImagesForm />, {
       state,
     });
-
+    await waitForLoading();
     expect(
       screen.getByText(
         "More than one image source exists. The UI does not support updating synced images when more than one source has been defined. Use the API to adjust your sources."