Add readonly state

wso2 · Jun 5, 2024 · b482419 · b482419
1 parent 89e2dbd
commit b482419
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 14 deletions.
diff --git a/features/admin.branding.ai.v1/components/branding-ai-banner.tsx b/features/admin.branding.ai.v1/components/branding-ai-banner.tsx
@@ -30,18 +30,25 @@ import {
     DocumentationLink,
     useDocumentation
 } from "@wso2is/react-components";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, { FunctionComponent, PropsWithChildren, ReactElement, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import useAIBrandingPreference from "../hooks/use-ai-branding-preference";
 import useGenerateAIBrandingPreference,
 { GenerateAIBrandingPreferenceFunc } from "../hooks/use-generate-ai-branding-preference";
 import { BannerState } from "../models/types";
 import "./branding-ai-banner.scss";
 
+interface BrandingAIBannerProps {
+    readonly?: boolean;
+}
+
 /**
  * Branding AI banner component.
  */
-const BrandingAIBanner: FunctionComponent = (): ReactElement => {
+const BrandingAIBanner: FunctionComponent<PropsWithChildren<BrandingAIBannerProps>> = (
+    props: PropsWithChildren<BrandingAIBannerProps>): ReactElement => {
+
+    const { readonly } = props;
 
     const { t } = useTranslation();
 
@@ -96,6 +103,7 @@ const BrandingAIBanner: FunctionComponent = (): ReactElement => {
                             className="oxygen-chip-beta mb-1 ml-2"
                         />
                     ) }
+                    readonly={ readonly }
                 />
             </Collapse>
             <Collapse in={ bannerState === BannerState.INPUT || bannerState === BannerState.COLLAPSED }>
@@ -177,4 +185,8 @@ const BrandingAIBanner: FunctionComponent = (): ReactElement => {
     );
 };
 
+BrandingAIBanner.defaultProps = {
+    readonly: false
+};
+
 export default BrandingAIBanner;
diff --git a/features/admin.branding.ai.v1/providers/ai-branding-preference-provider.tsx b/features/admin.branding.ai.v1/providers/ai-branding-preference-provider.tsx
@@ -46,19 +46,21 @@ import AIFeatureContext from "../context/ai-branding-feature-context";
 import { BrandingGenerationResultAPIResponseInterface } from "../models/branding-preferences";
 import { BannerState } from "../models/types";
 
-type AIBrandingPreferenceProviderProps = PropsWithChildren;
+interface AIBrandingPreferenceProviderProps {
+    readonly?: boolean;
+}
 
 /**
  * Provider for the AI branding preference context.
  *
  * @param props - Props injected to the component.
  * @returns AI branding preference provider.
  */
-const AIBrandingPreferenceProvider: FunctionComponent<AIBrandingPreferenceProviderProps> = (
-    props: AIBrandingPreferenceProviderProps
+const AIBrandingPreferenceProvider: FunctionComponent<PropsWithChildren<AIBrandingPreferenceProviderProps>> = (
+    props: PropsWithChildren<AIBrandingPreferenceProviderProps>
 ): ReactElement => {
 
-    const { children } = props;
+    const { readonly, children } = props;
 
     const { t } = useTranslation();
 
@@ -192,7 +194,7 @@ const AIBrandingPreferenceProvider: FunctionComponent<AIBrandingPreferenceProvid
                             !brandingDisabledFeatures?.includes(AI_BRANDING_FEATURE_ID) &&
                             !isSubOrganization() && (
                                 <div className="mb-2">
-                                    <BrandingAIBanner/>
+                                    <BrandingAIBanner readonly={ readonly }/>
                                 </div>
                             )
                         }
@@ -204,4 +206,11 @@ const AIBrandingPreferenceProvider: FunctionComponent<AIBrandingPreferenceProvid
     );
 };
 
+/**
+ * Default props for the component.
+ */
+AIBrandingPreferenceProvider.defaultProps = {
+    readonly: false
+};
+
 export default AIBrandingPreferenceProvider;
diff --git a/features/admin.branding.v1/components/branding-page-layout.tsx b/features/admin.branding.v1/components/branding-page-layout.tsx
@@ -351,13 +351,13 @@ const BrandingPageLayout: FunctionComponent<BrandingPageLayoutInterface> = (
                             } }
                             variants={ animationVariants }>
                             { resolveBrandingDescription() }
+                            <DocumentationLink
+                                link={ getLink("develop.branding.learnMore") }
+                            >
+                                { t("common:learnMore") }
+                            </DocumentationLink>
                         </motion.div>
                     </AnimatePresence>
-                    <DocumentationLink
-                        link={ getLink("develop.branding.learnMore") }
-                    >
-                        { t("common:learnMore") }
-                    </DocumentationLink>
                 </div>
             ) }
             data-componentid={ `${ componentId }-layout` }
@@ -377,7 +377,9 @@ const BrandingPageLayout: FunctionComponent<BrandingPageLayoutInterface> = (
                     }
                 </motion.div>
                 <motion.div layout>
-                    <AIBrandingPreferenceProvider>
+                    <AIBrandingPreferenceProvider
+                        readonly={ brandingMode === BrandingModes.APPLICATION && !selectedApplication }
+                    >
                         <BrandingCore />
                     </AIBrandingPreferenceProvider>
                 </motion.div>

diff --git a/features/admin.branding.v1/components/branding-preference-tabs.tsx b/features/admin.branding.v1/components/branding-preference-tabs.tsx
@@ -453,7 +453,7 @@ export const BrandingPreferenceTabs: FunctionComponent<BrandingPreferenceTabsInt
                     disabled={ brandingMode === BrandingModes.APPLICATION }
                 >
                     { t("branding:tabs.text.label") }
-                    { isSAASDeployment && (
+                    { isSAASDeployment && brandingMode !== BrandingModes.APPLICATION && (
                         <Chip
                             size="small"
                             sx={ { marginLeft: 1 } }

diff --git a/features/common.ai.v1/components/ai-banner.tsx b/features/common.ai.v1/components/ai-banner.tsx
@@ -35,6 +35,7 @@ interface AIBannerProps extends IdentifiableComponentInterface {
     onActionButtonClick?: () => void;
     actionButtonText?: string;
     titleLabel?: ReactElement;
+    readonly?: boolean;
 }
 
 /**
@@ -47,6 +48,7 @@ const AIBanner = (props: AIBannerProps): ReactElement => {
         aiText,
         description,
         onActionButtonClick,
+        readonly,
         title,
         titleLabel
     } = props;
@@ -81,6 +83,7 @@ const AIBanner = (props: AIBannerProps): ReactElement => {
                         onClick={ onActionButtonClick }
                         color="primary"
                         variant="contained"
+                        disabled={ readonly }
                     >
                         { actionButtonText }
                     </Button>
@@ -90,4 +93,12 @@ const AIBanner = (props: AIBannerProps): ReactElement => {
     );
 };
 
+/**
+ * Default props for the component.
+ */
+AIBanner.defaultProps = {
+    "data-componentid": "ai-banner",
+    readonly: false
+};
+
 export default AIBanner;