Merge pull request #7140 from dasuni-30/fix/27350

Fix saving issue when a custom layout is not configured for application branding
wso2 · Dec 3, 2024 · 415fd49 · 415fd49
2 parents c79eb43 + d75068c
commit 415fd49
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 14 deletions.
diff --git a/.changeset/strong-stingrays-hope.md b/.changeset/strong-stingrays-hope.md
@@ -0,0 +1,6 @@
+---
+"@wso2is/admin.branding.v1": patch
+"@wso2is/console": patch
+---
+
+Fix saving issue when a custom layout is not configured for application branding
diff --git a/apps/console/src/extensions/i18n/models/extensions.ts b/apps/console/src/extensions/i18n/models/extensions.ts
@@ -1713,6 +1713,7 @@ export interface Extensions {
                 };
                 fetch: {
                     customLayoutNotFound: {
+                        appBrandingDescription: string;
                         description: string;
                         message: string;
                     };

diff --git a/apps/console/src/extensions/i18n/resources/en-US/extensions.ts b/apps/console/src/extensions/i18n/resources/en-US/extensions.ts
@@ -1937,6 +1937,7 @@ export const extensions: Extensions = {
                 fetch: {
                     customLayoutNotFound: {
                         description: "There is no deployed custom layout for {{ tenant }}.",
+                        appBrandingDescription: "There is no deployed custom layout for this application.",
                         message: "Couldn't activate the custom layout"
                     },
                     genericError: {

diff --git a/features/admin.branding.v1/api/layout.ts b/features/admin.branding.v1/api/layout.ts
@@ -24,6 +24,7 @@ import useRequest, {
     RequestResultInterface
 } from "@wso2is/admin.core.v1/hooks/use-request";
 import { HttpMethods } from "@wso2is/core/models";
+import { BrandingModes } from "../constants";
 import { PredefinedLayouts } from "../meta";
 
 /**
@@ -37,7 +38,9 @@ import { PredefinedLayouts } from "../meta";
 export const useLayout = <Data = Blob, Error = RequestErrorInterface>(
     layout: PredefinedLayouts,
     tenantDomain: string,
-    shouldFetch: boolean = true
+    shouldFetch: boolean = true,
+    brandingMode?: BrandingModes,
+    appName?: string
 ): RequestResultInterface<Data, Error> => {
     const basename: string = AppConstants.getAppBasename()
         ? `/${AppConstants.getAppBasename()}`
@@ -52,12 +55,21 @@ export const useLayout = <Data = Blob, Error = RequestErrorInterface>(
         responseType: "blob",
         url:
             layout === PredefinedLayouts.CUSTOM
-                ? `${
-                    Config.getDeploymentConfig().extensions?.layoutStoreURL
-                        ? (Config.getDeploymentConfig().extensions.layoutStoreURL as string)
-                            .replace("${tenantDomain}", tenantDomain)
-                        : `https://${window.location.host}${basename}/libs/login-portal-layouts`}/body.html`
-                : `https://${window.location.host}${basename}/libs/login-portal-layouts/${layout}/body.html`
+                ? (
+                    brandingMode === BrandingModes.APPLICATION
+                        ? (
+                            `${Config.getDeploymentConfig().extensions?.layoutStoreURL
+                                ? (Config.getDeploymentConfig().extensions.layoutStoreURL as string)
+                                    .replace("${tenantDomain}", tenantDomain)
+                                : `https://${window.location.host}
+                                    ${basename}/libs/login-portal-layouts`}/apps/${appName}/body.html`
+                        ) : (
+                            `${Config.getDeploymentConfig().extensions?.layoutStoreURL
+                                ? (Config.getDeploymentConfig().extensions.layoutStoreURL as string)
+                                    .replace("${tenantDomain}", tenantDomain)
+                                : `https://${window.location.host}${basename}/libs/login-portal-layouts`}/body.html`
+                        )
+                ) : (`https://${window.location.host}${basename}/libs/login-portal-layouts/${layout}/body.html`)
     };
 
     const {

diff --git a/features/admin.branding.v1/components/branding-core.tsx b/features/admin.branding.v1/components/branding-core.tsx
@@ -746,6 +746,7 @@ const BrandingCore: FunctionComponent<BrandingCoreInterface> = (
                 onPreviewResize={ (width: number): void => {
                     setCurrentWidth(width);
                 } }
+                appName= { resolvedName }
             />
             <ConfirmationModal
                 onClose={ (): void => setShowBrandingPublishStatusConfirmationModal(false) }

diff --git a/features/admin.branding.v1/components/branding-preference-tabs.tsx b/features/admin.branding.v1/components/branding-preference-tabs.tsx
@@ -109,6 +109,10 @@ interface BrandingPreferenceTabsInterface extends IdentifiableComponentInterface
      * On preview resize callback.
      */
     onPreviewResize: (width: number) => void;
+    /**
+     * Name of the application
+     */
+    appName?: string;
 }
 
 /**
@@ -130,6 +134,7 @@ export const BrandingPreferenceTabs: FunctionComponent<BrandingPreferenceTabsInt
         isSplitView,
         isUpdating,
         readOnly,
+        appName,
         onSubmit,
         onLayoutChange,
         onPreviewResize
@@ -275,6 +280,7 @@ export const BrandingPreferenceTabs: FunctionComponent<BrandingPreferenceTabsInt
                         onLayoutChange(values);
                     } }
                     readOnly={ readOnly }
+                    appName={ appName }
                     data-componentid="branding-preference-design-form"
                 />
             </Segment>

diff --git a/features/admin.branding.v1/components/design/design-form.tsx b/features/admin.branding.v1/components/design/design-form.tsx
@@ -91,6 +91,10 @@ interface DesignFormPropsInterface extends IdentifiableComponentInterface {
      * Is readonly.
      */
     readOnly?: boolean;
+    /**
+     * Application name.
+     */
+    appName?: string;
     /**
      * Ref for the form.
      */
@@ -149,6 +153,7 @@ export const DesignForm: FunctionComponent<DesignFormPropsInterface> = forwardRe
         isLoading,
         onSubmit,
         readOnly,
+        appName,
         ["data-componentid"]: componentId
     } = props;
 
@@ -190,15 +195,21 @@ export const DesignForm: FunctionComponent<DesignFormPropsInterface> = forwardRe
      */
     const [ layoutDesignExtensionsName, setLayoutDesignExtensionsName ] = useState<string>(null);
 
-    const {
-        data: customLayoutBlob,
-        isLoading: customLayoutLoading
-    } = useLayout(PredefinedLayouts.CUSTOM, tenantDomain, commonConfig?.checkCustomLayoutExistanceBeforeEnabling);
-
     const {
         brandingMode
     } = useBrandingPreference();
 
+    const {
+        data: customLayoutBlob,
+        isLoading: customLayoutLoading
+    } = useLayout(
+        PredefinedLayouts.CUSTOM,
+        tenantDomain,
+        commonConfig?.checkCustomLayoutExistanceBeforeEnabling,
+        brandingMode as BrandingModes,
+        appName
+    );
+
     /**
      * Set the internal initial theme state.
      */
@@ -351,8 +362,12 @@ export const DesignForm: FunctionComponent<DesignFormPropsInterface> = forwardRe
             } else {
                 dispatch(addAlert<AlertInterface>({
                     description:
-                        t("extensions:develop.branding.notifications.fetch.customLayoutNotFound.description",
-                            { tenant: tenantDomain }),
+                        brandingMode === BrandingModes.APPLICATION
+                            ? t("extensions:develop.branding.notifications.fetch.customLayoutNotFound."
+                                + "appBrandingDescription")
+                            : t("extensions:develop.branding.notifications.fetch.customLayoutNotFound.description",
+                                { tenant: tenantDomain })
+                    ,
                     level: AlertLevels.ERROR,
                     message: t("extensions:develop.branding.notifications.fetch.customLayoutNotFound.message")
                 }));