fix(settings): Source setting defaults MAASENG-6063 (#5942)

Author: abuyukyi101198

.env

@@ -1,4 +1,4 @@
-MAAS_URL = "http://maas-ui-demo.internal:5240/"
+MAAS_URL = "https://maas-ui-demo.internal:5443/"
 MAAS_WEBSOCKET_HOST=
 MAAS_WEBSOCKET_PORT=
 BASENAME="/MAAS"

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

@@ -1,10 +1,16 @@
 import {
   useChangeImageSource,
+  useFetchImageSource,
   useGetImageSource,
   useImageSources,
+  useUpdateImageSource,
 } from "./imageSources";
 
-import type { BootSourceCreateRequest } from "@/app/apiclient";
+import type {
+  BootSourceCreateRequest,
+  BootSourceFetchRequest,
+  BootSourceUpdateRequest,
+} from "@/app/apiclient";
 import {
   imageSourceResolvers,
   mockImageSources,
@@ -20,6 +26,7 @@ const mockServer = setupMockServer(
   imageSourceResolvers.getImageSource.handler(),
   imageSourceResolvers.fetchImageSource.handler(),
   imageSourceResolvers.createImageSource.handler(),
+  imageSourceResolvers.updateImageSource.handler(),
   imageSourceResolvers.deleteImageSource.handler()
 );
 
@@ -69,7 +76,7 @@ describe("useGetImageSource", () => {
 });
 
 describe("useChangeImageSource", () => {
-  const updatedImageSource: BootSourceCreateRequest = {
+  const newImageSource: BootSourceCreateRequest = {
     url: "http://updated.images.io/",
     keyring_filename: "/usr/share/keyrings/ubuntu-cloudimage-keyring.gpg",
     keyring_data: "newdata",
@@ -87,13 +94,10 @@ describe("useChangeImageSource", () => {
     const { result } = renderHookWithProviders(() => useChangeImageSource());
     result.current.mutate({
       body: {
-        ...updatedImageSource,
+        ...newImageSource,
         current_boot_source_id: 1,
       },
     });
-    await waitFor(() => {
-      expect(imageSourceResolvers.fetchImageSource.resolved).toBe(true);
-    });
     await waitFor(() => {
       expect(imageSourceResolvers.createImageSource.resolved).toBe(true);
     });
@@ -105,39 +109,58 @@ describe("useChangeImageSource", () => {
     });
   });
 
-  it("should terminate if fetch fails", async () => {
-    mockServer.use(imageSourceResolvers.fetchImageSource.error());
+  it("should terminate if create fails", async () => {
+    mockServer.use(imageSourceResolvers.createImageSource.error());
     const { result } = renderHookWithProviders(() => useChangeImageSource());
     result.current.mutate({
       body: {
-        ...updatedImageSource,
+        ...newImageSource,
         current_boot_source_id: 1,
       },
     });
     await waitFor(() => {
-      expect(imageSourceResolvers.fetchImageSource.resolved).toBe(true);
+      expect(imageSourceResolvers.createImageSource.resolved).toBe(true);
     });
     await waitFor(() => {
       expect(result.current.isError).toBe(true);
     });
-    expect(imageSourceResolvers.createImageSource.resolved).toBe(false);
+    expect(imageSourceResolvers.deleteImageSource.resolved).toBe(false);
   });
+});
 
-  it("should terminate if create fails", async () => {
-    mockServer.use(imageSourceResolvers.createImageSource.error());
-    const { result } = renderHookWithProviders(() => useChangeImageSource());
+describe("useUpdateImageSource", () => {
+  it("should update a pool", async () => {
+    const updatedImageSource: BootSourceUpdateRequest = {
+      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,
-        current_boot_source_id: 1,
-      },
+      body: updatedImageSource,
+      path: { boot_source_id: 1 },
     });
     await waitFor(() => {
-      expect(imageSourceResolvers.createImageSource.resolved).toBe(true);
+      expect(result.current.isSuccess).toBe(true);
+    });
+  });
+});
+
+describe("useFetchImageSource", () => {
+  it("should fetch the available images of the source", async () => {
+    const newImageSource: BootSourceFetchRequest = {
+      url: "http://updated.images.io/",
+      keyring_filename: "/usr/share/keyrings/ubuntu-cloudimage-keyring.gpg",
+      keyring_data: "newdata",
+      skip_keyring_verification: false,
+    };
+    const { result } = renderHookWithProviders(() => useFetchImageSource());
+    result.current.mutate({
+      body: newImageSource,
     });
     await waitFor(() => {
-      expect(result.current.isError).toBe(true);
+      expect(result.current.isSuccess).toBe(true);
     });
-    expect(imageSourceResolvers.deleteImageSource.resolved).toBe(false);
   });
 });

src/app/api/query/imageSources.ts

@@ -2,7 +2,10 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import { useWebsocketAwareQuery } from "@/app/api/query/base";
 import { IMAGES_WORKFLOW_KEY } from "@/app/api/query/images";
-import { queryOptionsWithHeaders } from "@/app/api/utils";
+import {
+  mutationOptionsWithHeaders,
+  queryOptionsWithHeaders,
+} from "@/app/api/utils";
 import type {
   GetBootsourceData,
   GetBootsourceErrors,
@@ -15,8 +18,15 @@ import type {
   CreateBootsourceData,
   CreateBootsourceErrors,
   CreateBootsourceResponses,
+  UpdateBootsourceData,
+  UpdateBootsourceResponses,
+  UpdateBootsourceErrors,
+  FetchBootsourcesAvailableImagesData,
+  FetchBootsourcesAvailableImagesResponses,
+  FetchBootsourcesAvailableImagesErrors,
 } from "@/app/apiclient";
 import {
+  updateBootsource,
   createBootsource,
   deleteBootsource,
   fetchBootsourcesAvailableImages,
@@ -63,24 +73,13 @@ export const useChangeImageSource = () => {
     Options<CreateBootsourceData & { body: { current_boot_source_id: number } }>
   >({
     mutationFn: async (params) => {
-      // Step 1: Fetch to validate source using URL from createData
-      await fetchBootsourcesAvailableImages({
-        body: {
-          url: params.body.url,
-          keyring_filename: params.body.keyring_filename,
-          keyring_data: params.body.keyring_data,
-          skip_keyring_verification: params.body.skip_keyring_verification,
-        },
-        throwOnError: true,
-      });
-
-      // Step 2: Create new source
+      // Step 1: Create new source
       const createResult = await createBootsource({
         ...params,
         throwOnError: true,
       });
 
-      // Step 3: Delete old source
+      // Step 2: Delete old source
       await deleteBootsource({
         path: { boot_source_id: params.body.current_boot_source_id },
         throwOnError: true,
@@ -101,3 +100,33 @@ export const useChangeImageSource = () => {
     },
   });
 };
+
+export const useUpdateImageSource = (
+  mutationOptions?: Options<UpdateBootsourceData>
+) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    ...mutationOptionsWithHeaders<
+      UpdateBootsourceResponses,
+      UpdateBootsourceErrors,
+      UpdateBootsourceData
+    >(mutationOptions, updateBootsource),
+    onSuccess: () => {
+      return queryClient.invalidateQueries({
+        queryKey: listBootsourcesQueryKey(),
+      });
+    },
+  });
+};
+
+export const useFetchImageSource = (
+  mutationOptions?: Options<FetchBootsourcesAvailableImagesData>
+) => {
+  return useMutation({
+    ...mutationOptionsWithHeaders<
+      FetchBootsourcesAvailableImagesResponses,
+      FetchBootsourcesAvailableImagesErrors,
+      FetchBootsourcesAvailableImagesData
+    >(mutationOptions, fetchBootsourcesAvailableImages),
+  });
+};

src/app/base/components/FormikForm/FormikForm.tsx

@@ -42,6 +42,8 @@ const FormikForm = <V extends object, E = null>({
   saving,
   savingLabel,
   secondarySubmit,
+  secondarySubmitSaved,
+  secondarySubmitSaving,
   secondarySubmitDisabled,
   secondarySubmitLabel,
   secondarySubmitTooltip,
@@ -82,6 +84,8 @@ const FormikForm = <V extends object, E = null>({
         secondarySubmit={secondarySubmit}
         secondarySubmitDisabled={secondarySubmitDisabled}
         secondarySubmitLabel={secondarySubmitLabel}
+        secondarySubmitSaved={secondarySubmitSaved}
+        secondarySubmitSaving={secondarySubmitSaving}
         secondarySubmitTooltip={secondarySubmitTooltip}
         submitAppearance={submitAppearance}
         submitDisabled={submitDisabled}

src/app/base/components/FormikFormButtons/FormikFormButtons.tsx

@@ -23,6 +23,8 @@ export type Props<V> = {
   saving?: boolean;
   savingLabel?: string | null;
   secondarySubmit?: FormikContextFunc<V> | null;
+  secondarySubmitSaved?: boolean;
+  secondarySubmitSaving?: boolean;
   secondarySubmitDisabled?: boolean;
   secondarySubmitLabel?: FormikContextFunc<V, string> | string | null;
   secondarySubmitTooltip?: string | null;
@@ -62,6 +64,8 @@ export const FormikFormButtons = <V,>({
   saving,
   savingLabel,
   secondarySubmit,
+  secondarySubmitSaved,
+  secondarySubmitSaving,
   secondarySubmitDisabled,
   secondarySubmitLabel,
   secondarySubmitTooltip,
@@ -81,25 +85,28 @@ export const FormikFormButtons = <V,>({
         ? secondarySubmitLabel(values, formikContext)
         : secondarySubmitLabel;
     const button = (
-      <Button
+      <ActionButton
+        appearance="default"
         className="formik-form-buttons__button"
         data-testid={TestIds.SecondarySubmit}
         disabled={
           buttonsBehavior === "coupled"
             ? secondarySubmitDisabled || submitDisabled
             : secondarySubmitDisabled
         }
+        loading={secondarySubmitSaving}
         onClick={
           secondarySubmit
             ? () => {
                 secondarySubmit(values, formikContext);
               }
             : undefined
         }
+        success={secondarySubmitSaved}
         type="button"
       >
         {secondaryLabel}
-      </Button>
+      </ActionButton>
     );
     if (secondarySubmitTooltip) {
       secondaryButton = (

src/app/images/constants.ts

@@ -1,7 +1,17 @@
 import type { Accept } from "react-dropzone";
 
+export const MAAS_IO_URLS = {
+  stable: "http://images.maas.io/ephemeral-v3/stable/",
+  candidate: "http://images.maas.io/ephemeral-v3/candidate/",
+} as const;
+
+export const MAAS_IO_DEFAULT_KEYRING_FILE_PATHS = {
+  deb: "/usr/share/keyrings/ubuntu-cloudimage-keyring.gpg",
+  snap: "/snap/maas/current/usr/share/keyrings/ubuntu-cloudimage-keyring.gpg",
+};
+
 export const MAAS_IO_DEFAULTS = {
-  url: "http://images.maas.io/ephemeral-v3/stable/",
+  url: MAAS_IO_URLS.stable,
   keyring_filename:
     "/snap/maas/current/usr/share/keyrings/ubuntu-cloudimage-keyring.gpg",
   keyring_data: "",

src/app/images/views/ImageList/ImageListHeader/ImageListHeader.tsx

@@ -11,8 +11,7 @@ import { useSidePanel } from "@/app/base/side-panel-context";
 import DeleteImages from "@/app/images/components/DeleteImages";
 import SelectUpstreamImagesForm from "@/app/images/components/SelectUpstreamImagesForm";
 import UploadCustomImage from "@/app/images/components/UploadCustomImage";
-import { MAAS_IO_DEFAULTS } from "@/app/images/constants";
-import { BootResourceSourceType } from "@/app/images/types";
+import { MAAS_IO_URLS } from "@/app/images/constants";
 
 type ImageListHeaderProps = {
   selectedRows: RowSelectionState;
@@ -22,13 +21,10 @@ type ImageListHeaderProps = {
 const getImageSyncText = (sources: BootSourceResponse[]) => {
   if (sources.length === 1) {
     const mainSource = sources[0];
-    const sourceType = new RegExp(MAAS_IO_DEFAULTS.url).test(
-      mainSource.url ?? ""
-    )
-      ? BootResourceSourceType.MAAS_IO
-      : BootResourceSourceType.CUSTOM;
-    if (sourceType === BootResourceSourceType.MAAS_IO) {
+    if (new RegExp(MAAS_IO_URLS.stable).test(mainSource.url ?? "")) {
       return "maas.io";
+    } else if (new RegExp(MAAS_IO_URLS.candidate).test(mainSource.url ?? "")) {
+      return "maas.io (candidate)";
     }
     return mainSource.url;
   }