Merge pull request #6983 from savindi7/improvements-branding-banner

Improvements to the Branding banners
wso2 · Oct 15, 2024 · 452b4b5 · 452b4b5
2 parents c8dfc8a + 678f4b3
commit 452b4b5
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 52 deletions.
diff --git a/.changeset/late-islands-notice.md b/.changeset/late-islands-notice.md
@@ -0,0 +1,5 @@
+---
+"@wso2is/admin.branding.v1": patch
+---
+
+Improvements to the Branding banners.
diff --git a/features/admin.branding.v1/components/branding-core.tsx b/features/admin.branding.v1/components/branding-core.tsx
@@ -40,7 +40,6 @@ import {
     ConfirmationModal,
     DangerZone,
     DangerZoneGroup,
-    Message,
     useMediaContext
 } from "@wso2is/react-components";
 import cloneDeep from "lodash-es/cloneDeep";
@@ -158,6 +157,10 @@ const BrandingCore: FunctionComponent<BrandingCoreInterface> = (
         brandingPreference,
         setBrandingPreference
     ] = useState<BrandingPreferenceInterface>(DEFAULT_PREFERENCE);
+    const [
+        returnedBrandingMode,
+        setReturnedBrandingMode
+    ] = useState<BrandingPreferenceTypes>(undefined);
     const [
         isBrandingPreferenceUpdateRequestLoading,
         setIsBrandingPreferenceUpdateRequestLoading
@@ -335,6 +338,33 @@ const BrandingCore: FunctionComponent<BrandingCoreInterface> = (
         }
     }, [ overridenBrandingPreference ]);
 
+    /**
+     * Moderates the Branding Peference response and set the branding mode returned in the response.
+     */
+    useEffect(() => {
+        if (!originalBrandingPreference || brandingPreferenceFetchRequestError?.response?.data?.code
+            === BrandingPreferencesConstants.BRANDING_NOT_CONFIGURED_ERROR_CODE) {
+            setReturnedBrandingMode(undefined);
+
+            return;
+        }
+
+        if (originalBrandingPreference instanceof IdentityAppsApiException) {
+            dispatch(addAlert<AlertInterface>({
+                description: t("extensions:develop.branding.notifications.fetch.invalidStatus.description",
+                    { tenant: tenantName }),
+                level: AlertLevels.ERROR,
+                message: t("extensions:develop.branding.notifications.fetch.invalidStatus.message")
+            }));
+
+            setReturnedBrandingMode(undefined);
+
+            return;
+        }
+
+        setReturnedBrandingMode(originalBrandingPreference?.type);
+    }, [ originalBrandingPreference, brandingPreferenceFetchRequestError ]);
+
     /**
      * Handles preference form submit action.
      *
@@ -635,16 +665,39 @@ const BrandingCore: FunctionComponent<BrandingCoreInterface> = (
 
     return (
         <>
+            {
+                brandingMode === BrandingModes.APPLICATION && !selectedApplication && (
+                    <Alert
+                        className="branding-alert"
+                        severity="warning"
+                    >
+                        { t("extensions:develop.branding.pageHeader.applicationListWarning") }
+                    </Alert>
+                )
+            }
+            {
+                brandingMode === BrandingModes.APPLICATION &&
+                selectedApplication &&
+                returnedBrandingMode === BrandingPreferenceTypes.ORG && (
+                    <Alert
+                        className="branding-alert"
+                        severity="info"
+                    >
+                        { t("extensions:develop.branding.pageHeader.defaultBrandingAppliedMessage") }
+                    </Alert>
+                )
+            }
             {
                 !isBrandingPageLoading && !brandingPreference.configs?.isBrandingEnabled && (
-                    <Message
-                        info
-                        floating
-                        attached="top"
-                        className="preview-disclaimer"
-                        content={ t("extensions:develop.branding.publishToggle.hint") }
+                    (brandingMode === BrandingModes.APPLICATION && selectedApplication) ||
+                    brandingMode === BrandingModes.ORGANIZATION) && (
+                    <Alert
+                        className="branding-alert"
+                        severity="info"
                         data-componentid="branding-preference-preview-disclaimer"
-                    />
+                    >
+                        { t("extensions:develop.branding.publishToggle.hint") }
+                    </Alert>
                 )
             }
             {
@@ -667,20 +720,13 @@ const BrandingCore: FunctionComponent<BrandingCoreInterface> = (
             }
             {
                 showResolutionDisclaimerMessage && (
-                    <Message
-                        info
-                        floating
-                        attached="top"
-                        className="preview-disclaimer"
-                        content={
-                            (
-                                <>
-                                    { t("extensions:develop.branding.pageResolution.hint") }
-                                </>
-                            )
-                        }
+                    <Alert
+                        className="branding-alert"
+                        severity="info"
                         data-componentid="branding-preference-resolution-disclaimer"
-                    />
+                    >
+                        { t("extensions:develop.branding.pageResolution.hint") }
+                    </Alert>
                 )
             }
             <BrandingPreferenceTabs

diff --git a/features/admin.branding.v1/components/branding-page-layout.scss b/features/admin.branding.v1/components/branding-page-layout.scss
@@ -34,3 +34,7 @@
 .toggle-button-icon {
     margin-right: 5px;
 }
+
+.branding-alert {
+    margin-bottom: 16px;
+}
diff --git a/features/admin.branding.v1/components/branding-page-layout.tsx b/features/admin.branding.v1/components/branding-page-layout.tsx
@@ -18,7 +18,6 @@
 
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import Alert from "@oxygen-ui/react/Alert";
 import Autocomplete, { AutocompleteRenderInputParams } from "@oxygen-ui/react/Autocomplete";
 import Chip from "@oxygen-ui/react/Chip";
 import Paper from "@oxygen-ui/react/Paper";
@@ -29,8 +28,6 @@ import useAIBrandingPreference from "@wso2is/admin.branding.ai.v1/hooks/use-ai-b
 import { AppConstants, AppState, history } from "@wso2is/admin.core.v1";
 import { FeatureStatusLabel } from "@wso2is/admin.feature-gate.v1/models/feature-status";
 import { useGetCurrentOrganizationType } from "@wso2is/admin.organizations.v1/hooks/use-get-organization-type";
-import useGetBrandingPreferenceResolve from "@wso2is/common.branding.v1/api/use-get-branding-preference-resolve";
-import { BrandingPreferenceTypes } from "@wso2is/common.branding.v1/models";
 import { AlertLevels, IdentifiableComponentInterface } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
 import { DocumentationLink, PageLayout, useDocumentation } from "@wso2is/react-components";
@@ -79,10 +76,6 @@ const BrandingPageLayout: FunctionComponent<BrandingPageLayoutInterface> = (
         updateActiveTab
     } = useBrandingPreference();
 
-    const {
-        data: brandingData
-    } = useGetBrandingPreferenceResolve(selectedApplication, BrandingPreferenceTypes.APP);
-
     const {
         data: applicationList,
         isLoading: isApplicationListFetchRequestLoading,
@@ -413,30 +406,6 @@ const BrandingPageLayout: FunctionComponent<BrandingPageLayoutInterface> = (
             className="branding-page"
         >
             <LayoutGroup>
-                <motion.div layout>
-                    {
-                        brandingMode === BrandingModes.APPLICATION && !selectedApplication && (
-                            <Alert
-                                severity="warning"
-                                sx={ { marginBottom: 2 } }
-                            >
-                                { t("extensions:develop.branding.pageHeader.applicationListWarning") }
-                            </Alert>
-                        )
-                    }
-                    {
-                        brandingMode === BrandingModes.APPLICATION &&
-                        selectedApplication &&
-                        brandingData?.type === BrandingPreferenceTypes.ORG && (
-                            <Alert
-                                severity="info"
-                                sx={ { marginBottom: 2 } }
-                            >
-                                { t("extensions:develop.branding.pageHeader.defaultBrandingAppliedMessage") }
-                            </Alert>
-                        )
-                    }
-                </motion.div>
                 {
                     !brandingDisabledFeatures?.includes(AI_BRANDING_FEATURE_ID) &&
                     !isSubOrganization() && (