From 86c42daaaf1d12cba31bf0235375e04c651ae2f6 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 3 Feb 2025 15:01:04 +0530
Subject: [PATCH 1/7] Support CSS flex mode instead of Grid for better
 responsiveness

---
 .../components/page-header/page-header.tsx    | 64 ++++++++++++++-----
 1 file changed, 48 insertions(+), 16 deletions(-)

diff --git a/modules/react-components/src/components/page-header/page-header.tsx b/modules/react-components/src/components/page-header/page-header.tsx
index 3b0da4b4f39..7309300106a 100644
--- a/modules/react-components/src/components/page-header/page-header.tsx
+++ b/modules/react-components/src/components/page-header/page-header.tsx
@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import Box from "@oxygen-ui/react/Box";
 import {
     IdentifiableComponentInterface,
     LoadableComponentInterface,
@@ -61,6 +62,10 @@ export interface PageHeaderPropsInterface extends LoadableComponentInterface, Te
      * Description.
      */
     description?: ReactNode;
+    /**
+     * Flag to enable CSS flex box behavior instead of the Grid.
+     */
+    flex?: boolean;
     /**
      * Flag to determine whether max width should be added to page header text content.
      */
@@ -136,6 +141,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
         bottomMargin,
         className,
         description,
+        flex,
         headingColumnWidth,
         image,
         isLoading,
@@ -275,6 +281,47 @@ export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
         </div>
     );
 
+    /**
+     * Resolves the content rendering logic.
+     * @returns Header content as a react component.
+     */
+    const renderContent = (): ReactElement => {
+        if (!action) {
+            return headingContent;
+        }
+
+        if (flex) {
+            return (
+                <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    flexDirection="row"
+                    flexWrap="wrap"
+                    alignItems="center"
+                    sx={ {
+                        gap: "var(--oxygen-spacing-2)"
+                    } }
+                >
+                    <Box className="heading-wrapper">{ headingContent }</Box>
+                    <Box className="action-wrapper">{ action }</Box>
+                </Box>
+            );
+        }
+
+        return (
+            <Grid>
+                <Grid.Row>
+                    <Grid.Column computer={ headingColumnWidth } className="heading-wrapper">
+                        { headingContent }
+                    </Grid.Column>
+                    <Grid.Column computer={ actionColumnWidth } className="action-wrapper">
+                        { action && <div className="floated right action">{ action }</div> }
+                    </Grid.Column>
+                </Grid.Row>
+            </Grid>
+        );
+    };
+
     return (
         (title || description)
             ? (
@@ -307,22 +354,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
                         )
                     }
                     { alertBanner }
-                    {
-                        action
-                            ? (
-                                <Grid>
-                                    <Grid.Row>
-                                        <Grid.Column computer={ headingColumnWidth } className="heading-wrapper">
-                                            { headingContent }
-                                        </Grid.Column>
-                                        <Grid.Column computer={ actionColumnWidth } className="action-wrapper">
-                                            { action && <div className="floated right action">{ action }</div> }
-                                        </Grid.Column>
-                                    </Grid.Row>
-                                </Grid>
-                            )
-                            : headingContent
-                    }
+                    { renderContent() }
                     {
                         bottomMargin && <Divider hidden/>
                     }

From 7caf9b729e888f8fb8d5a0968cfd2b0316e281ae Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 3 Feb 2025 16:02:26 +0530
Subject: [PATCH 2/7] Revamp the `Go to Console` behaviour

---
 .../components/tenant-card.tsx                | 15 +---
 .../context/tenant-context.tsx                |  6 --
 .../hooks/use-tenant-console-url.ts           | 52 ++++++++++++++
 .../pages/edit-tenant-page.scss               | 35 ++++++++++
 .../pages/edit-tenant-page.tsx                | 51 +++++++++++++-
 .../providers/tenant-provider.tsx             | 70 +------------------
 .../i18n/src/models/namespaces/tenants-ns.ts  | 15 ++--
 .../src/translations/en-US/portals/tenants.ts | 15 ++--
 8 files changed, 146 insertions(+), 113 deletions(-)
 create mode 100644 features/admin.tenants.v1/hooks/use-tenant-console-url.ts

diff --git a/features/admin.tenants.v1/components/tenant-card.tsx b/features/admin.tenants.v1/components/tenant-card.tsx
index 3d627145788..a660b0c233a 100644
--- a/features/admin.tenants.v1/components/tenant-card.tsx
+++ b/features/admin.tenants.v1/components/tenant-card.tsx
@@ -29,7 +29,6 @@ import Stack from "@oxygen-ui/react/Stack";
 import Tooltip from "@oxygen-ui/react/Tooltip";
 import Typography from "@oxygen-ui/react/Typography/Typography";
 import {
-    ArrowUpRightFromSquareIcon,
     BanIcon,
     CircleCheckFilledIcon,
     EllipsisVerticalIcon,
@@ -77,7 +76,7 @@ const TenantCard: FunctionComponent<TenantCardProps> = ({ isLoading, tenant }: T
         );
     });
 
-    const { deleteTenant, disableTenant, enableTenant, navigateToTenantConsole } = useTenants();
+    const { deleteTenant, disableTenant, enableTenant } = useTenants();
 
     const [ anchorEl, setAnchorEl ] = useState<null | HTMLElement>(null);
 
@@ -202,18 +201,6 @@ const TenantCard: FunctionComponent<TenantCardProps> = ({ isLoading, tenant }: T
                             onClose={ handleClose }
                             className="tenant-card-footer-dropdown"
                         >
-                            <MenuItem
-                                className="tenant-card-footer-dropdown-item"
-                                onClick={ () => {
-                                    navigateToTenantConsole(tenant);
-                                    handleClose();
-                                } }
-                            >
-                                <ListItemIcon>
-                                    <ArrowUpRightFromSquareIcon />
-                                </ListItemIcon>
-                                <ListItemText>{ t("tenants:listing.item.actions.goToConsole.label") }</ListItemText>
-                            </MenuItem>
                             <MenuItem
                                 className={ classNames("tenant-card-footer-dropdown-item", {
                                     error: tenant?.lifecycleStatus?.activated,
diff --git a/features/admin.tenants.v1/context/tenant-context.tsx b/features/admin.tenants.v1/context/tenant-context.tsx
index 6fd9ee6ce3d..7ac49fe8273 100644
--- a/features/admin.tenants.v1/context/tenant-context.tsx
+++ b/features/admin.tenants.v1/context/tenant-context.tsx
@@ -51,11 +51,6 @@ export interface TenantContextProps {
      * Function to mutate the tenant list.
      */
     mutateTenantList: () => void;
-    /**
-     * Navigate to the tenant console.
-     * @param tenant  - Tenant to navigate to.
-     */
-    navigateToTenantConsole: (tenant: Tenant) => void;
     /**
      * The search query.
      */
@@ -96,7 +91,6 @@ const TenantContext: Context<TenantContextProps> = createContext<null | TenantCo
     isInitialRenderingComplete: false,
     isTenantListLoading: false,
     mutateTenantList: () => null,
-    navigateToTenantConsole: () => null,
     searchQuery: "",
     searchQueryClearTrigger: false,
     setSearchQuery: () => null,
diff --git a/features/admin.tenants.v1/hooks/use-tenant-console-url.ts b/features/admin.tenants.v1/hooks/use-tenant-console-url.ts
new file mode 100644
index 00000000000..4930a1fa950
--- /dev/null
+++ b/features/admin.tenants.v1/hooks/use-tenant-console-url.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AppState } from "@wso2is/admin.core.v1/store";
+import { useSelector } from "react-redux";
+import { Tenant } from "../models/tenants";
+
+/**
+ * Hook to generate the console URL for a given tenant.
+ *
+ * This hook generates the console URL for a specified tenant by replacing the
+ * tenant domain in the client host URL. It uses the `clientHost` value from
+ * the Redux store and replaces the existing tenant domain with the provided
+ * tenant's domain.
+ *
+ * @param tenant - The tenant object containing the domain to be used in the URL.
+ * @returns The console URL for the specified tenant, or `undefined` if the tenant domain is not provided.
+ *
+ * @example
+ * ```tsx
+ * const tenant: Tenant = { domain: "example.com" };
+ * const consoleURL = useTenantConsoleURL(tenant);
+ * console.log(consoleURL); // Outputs the console URL for the specified tenant
+ * ```
+ */
+const useTenantConsoleURL = (tenant: Tenant): string | undefined => {
+    const clientHost: string = useSelector((state: AppState) => state.config?.deployment?.clientHost);
+    const tenantPrefix: string = useSelector((state: AppState) => state.config?.deployment?.tenantPrefix);
+
+    if (!tenant?.domain) {
+        return undefined;
+    }
+
+    return clientHost.replace(new RegExp(`/${tenantPrefix}/[^/]+/`), `/${tenantPrefix}/${tenant.domain}/`);
+};
+
+export default useTenantConsoleURL;
diff --git a/features/admin.tenants.v1/pages/edit-tenant-page.scss b/features/admin.tenants.v1/pages/edit-tenant-page.scss
index a28eca1d46f..7b1a19c9fd3 100644
--- a/features/admin.tenants.v1/pages/edit-tenant-page.scss
+++ b/features/admin.tenants.v1/pages/edit-tenant-page.scss
@@ -45,4 +45,39 @@
             }
         }
     }
+
+    .console-url-copy-field {
+        .MuiInputBase-root {
+            min-width: 400px;
+
+            &.Mui-readOnly {
+                cursor: default;
+                background-color: #e9ecef!important;
+            }
+        }
+    }
+}
+
+@media (min-width: 675px) {
+    .tenant-edit-page {
+        .console-url-copy-field {
+            display: flex;
+            flex-direction: row;
+            align-content: center;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: nowrap;
+            gap: 15px;
+        }
+    }
+}
+
+@media (max-width: 675px) {
+    .tenant-edit-page {
+        .console-url-copy-field {
+            .MuiInputBase-root {
+                min-width: auto;
+            }
+        }
+    }
 }
diff --git a/features/admin.tenants.v1/pages/edit-tenant-page.tsx b/features/admin.tenants.v1/pages/edit-tenant-page.tsx
index 33f314746ab..3d53773b650 100644
--- a/features/admin.tenants.v1/pages/edit-tenant-page.tsx
+++ b/features/admin.tenants.v1/pages/edit-tenant-page.tsx
@@ -17,19 +17,25 @@
  */
 
 import Avatar from "@oxygen-ui/react/Avatar";
+import Box from "@oxygen-ui/react/Box";
+import IconButton from "@oxygen-ui/react/IconButton";
+import TextField from "@oxygen-ui/react/TextField";
 import Tooltip from "@oxygen-ui/react/Tooltip";
 import Typography from "@oxygen-ui/react/Typography";
+import { CopyIcon } from "@oxygen-ui/react-icons";
 import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
 import { history } from "@wso2is/admin.core.v1/helpers/history";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
-import { PageLayout } from "@wso2is/react-components";
+import { CommonUtils } from "@wso2is/core/utils";
+import { Hint, PageLayout } from "@wso2is/react-components";
 import classNames from "classnames";
 import moment from "moment";
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import useGetTenant from "../api/use-get-tenant";
 import useGetTenantOwner from "../api/use-get-tenant-owner";
 import EditTenant from "../components/edit-tenant/edit-tenant";
+import useTenantConsoleURL from "../hooks/use-tenant-console-url";
 import { Tenant, TenantOwner } from "../models/tenants";
 import TenantProvider from "../providers/tenant-provider";
 import "./edit-tenant-page.scss";
@@ -64,6 +70,7 @@ const EditTenantPage: FunctionComponent<EditTenantPageProps> = ({
         tenant?.owners[0]?.id,
         !!tenant
     );
+    const consoleURL: string | undefined = useTenantConsoleURL(tenant);
 
     /**
      * Merges the tenant and tenant owner data.
@@ -100,6 +107,7 @@ const EditTenantPage: FunctionComponent<EditTenantPageProps> = ({
             } }
         >
             <PageLayout
+                flex
                 pageTitle="Edit Root Organizations"
                 title={
                     (<div className="tenant-status">
@@ -144,6 +152,44 @@ const EditTenantPage: FunctionComponent<EditTenantPageProps> = ({
                 } }
                 className="tenant-edit-page"
                 bottomMargin={ false }
+                action={
+                    (<TextField
+                        label={
+                            (<Box>
+                                <span>{ t("tenants:edit.consoleURL.label") }</span>
+                                <Hint popup>
+                                    <Trans i18nKey="tenants:edit.consoleURL.hint" values={ { domain: tenant?.domain } }>
+                                        If you try to login to <strong>{ tenant?.domain }</strong> organization&apos;s
+                                        Console using the same browser, you will have to log out from this active
+                                        session first.
+                                    </Trans>
+                                </Hint>
+                            </Box>)
+                        }
+                        id="filled-start-adornment"
+                        InputProps={ {
+                            endAdornment: (
+                                <Tooltip title="Copy">
+                                    <div>
+                                        <IconButton
+                                            aria-label="Reset field to default"
+                                            className="reset-field-to-default-adornment"
+                                            onClick={ async () => {
+                                                await CommonUtils.copyTextToClipboard(consoleURL);
+                                            } }
+                                            edge="end"
+                                        >
+                                            <CopyIcon size={ 12 } />
+                                        </IconButton>
+                                    </div>
+                                </Tooltip>
+                            ),
+                            readOnly: true
+                        } }
+                        value={ consoleURL }
+                        className="console-url-copy-field"
+                    />)
+                }
             >
                 <EditTenant tenant={ mergedTenant } />
             </PageLayout>
@@ -152,4 +198,3 @@ const EditTenantPage: FunctionComponent<EditTenantPageProps> = ({
 };
 
 export default EditTenantPage;
-history;
diff --git a/features/admin.tenants.v1/providers/tenant-provider.tsx b/features/admin.tenants.v1/providers/tenant-provider.tsx
index aab0d9c417a..ff5adf975d6 100644
--- a/features/admin.tenants.v1/providers/tenant-provider.tsx
+++ b/features/admin.tenants.v1/providers/tenant-provider.tsx
@@ -16,17 +16,13 @@
  * under the License.
  */
 
-import { useAuthContext } from "@asgardeo/auth-react";
-import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
 import { UIConstants } from "@wso2is/admin.core.v1/constants/ui-constants";
-import { history } from "@wso2is/admin.core.v1/helpers/history";
-import { AppState } from "@wso2is/admin.core.v1/store";
 import { AlertLevels } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
 import { ConfirmationModal } from "@wso2is/react-components";
 import React, { PropsWithChildren, ReactElement, useEffect, useState } from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
 import { Dispatch } from "redux";
 import deleteTenantMetadata from "../api/delete-tenant-metadata";
 import updateTenantActivationStatus from "../api/update-tenant-activation-status";
@@ -81,20 +77,13 @@ const TenantProvider = ({
 }: PropsWithChildren<TenantProviderProps>): ReactElement => {
     const { t } = useTranslation();
     const dispatch: Dispatch = useDispatch();
-    const { updateConfig } = useAuthContext();
-
-    const clientHost: string = useSelector((state: AppState) => state.config?.deployment?.clientHost);
 
     const [ isInitialRenderingComplete, setIsInitialRenderingComplete ] = useState<boolean>(false);
     const [ tenantListLimit, setTenantListLimit ] = useState<number>(UIConstants.DEFAULT_RESOURCE_GRID_ITEM_LIMIT);
     const [ showDeleteConfirmationModal, setShowDeleteConfirmationModal ] = useState<boolean>(false);
     const [ showDisableConfirmationModal, setShowDisableConfirmationModal ] = useState<boolean>(false);
-    const [ showTenantConsoleNavigationConfirmationModal, setShowTenantConsoleNavigationConfirmationModal ] = useState<
-        boolean
-    >(false);
     const [ deletingTenant, setDeletingTenant ] = useState<Tenant>(null);
     const [ disablingTenant, setDisablingTenant ] = useState<Tenant>(null);
-    const [ consoleNavigatingTenant, setConsoleNavigatingTenant ] = useState<Tenant>(null);
     const [ isTenantDeleteRequestLoading, setIsTenantDeleteRequestLoading ] = useState<boolean>(false);
     const [ isTenantStatusUpdateRequestLoading, setIsTenantStatusUpdateRequestLoading ] = useState<boolean>(false);
     const [ searchQuery, setSearchQuery ] = useState<string>("");
@@ -215,22 +204,6 @@ const TenantProvider = ({
             });
     };
 
-    /**
-     * Handles the tenant console navigation after the user confirms the action.
-     * @param tenant - Tenant to navigate to.
-     */
-    const handleTenantConsoleNavigation = async (tenant: Tenant): Promise<void> => {
-        const consoleURL: string = clientHost.replace(/\/t\/[^/]+\//, `/t/${tenant.domain}/`);
-
-        setShowTenantConsoleNavigationConfirmationModal(false);
-
-        await updateConfig({
-            signOutRedirectURL: consoleURL
-        });
-
-        history.push(AppConstants.getAppLogoutPath());
-    };
-
     return (
         <TenantContext.Provider
             value={ {
@@ -248,10 +221,6 @@ const TenantProvider = ({
                 isInitialRenderingComplete,
                 isTenantListLoading,
                 mutateTenantList,
-                navigateToTenantConsole: (tenant: Tenant): void => {
-                    setShowTenantConsoleNavigationConfirmationModal(true);
-                    setConsoleNavigatingTenant(tenant);
-                },
                 searchQuery,
                 searchQueryClearTrigger,
                 setSearchQuery,
@@ -322,41 +291,6 @@ const TenantProvider = ({
                     </ConfirmationModal.Content>
                 </ConfirmationModal>
             ) }
-            { showTenantConsoleNavigationConfirmationModal && (
-                <ConfirmationModal
-                    data-componentid="tenant-console-navigation-confirmation-modal"
-                    onClose={ (): void => setShowTenantConsoleNavigationConfirmationModal(false) }
-                    type="warning"
-                    open={ showTenantConsoleNavigationConfirmationModal }
-                    assertionHint={ t("tenants:confirmationModals.navigatingToTenantConsole.assertionHint") }
-                    assertionType="checkbox"
-                    primaryAction={ t("tenants:confirmationModals.navigatingToTenantConsole.primaryAction") }
-                    secondaryAction={ t("tenants:confirmationModals.navigatingToTenantConsole.secondaryAction") }
-                    onSecondaryActionClick={ (): void => setShowTenantConsoleNavigationConfirmationModal(false) }
-                    onPrimaryActionClick={ async () => await handleTenantConsoleNavigation(consoleNavigatingTenant) }
-                    closeOnDimmerClick={ false }
-                >
-                    <ConfirmationModal.Header data-componentid="tenant-disable-confirmation-modal-header">
-                        { t("tenants:confirmationModals.navigatingToTenantConsole.header") }
-                    </ConfirmationModal.Header>
-                    <ConfirmationModal.Message
-                        attached
-                        warning
-                        data-componentid="tenant-disable-confirmation-modal-message"
-                    >
-                        { t("tenants:confirmationModals.navigatingToTenantConsole.message") }
-                    </ConfirmationModal.Message>
-                    <ConfirmationModal.Content data-componentid="tenant-disable-confirmation-modal-content">
-                        <Trans
-                            i18nKey="tenants:confirmationModals.navigatingToTenantConsole.content"
-                            values={ { domain: consoleNavigatingTenant?.domain } }
-                        >
-                            If you continue navigating to the <strong>{ consoleNavigatingTenant?.domain }
-                            </strong>Console, you will be logged out from the current session.
-                        </Trans>
-                    </ConfirmationModal.Content>
-                </ConfirmationModal>
-            ) }
         </TenantContext.Provider>
     );
 };
diff --git a/modules/i18n/src/models/namespaces/tenants-ns.ts b/modules/i18n/src/models/namespaces/tenants-ns.ts
index ad9059477e2..f3cf035f56f 100644
--- a/modules/i18n/src/models/namespaces/tenants-ns.ts
+++ b/modules/i18n/src/models/namespaces/tenants-ns.ts
@@ -163,17 +163,13 @@ export interface TenantsNS {
             primaryAction: string;
             secondaryAction: string;
         };
-        navigatingToTenantConsole: {
-            assertionHint: string;
-            content: string;
-            header: string;
-            message: string;
-            primaryAction: string;
-            secondaryAction: string;
-        };
     },
     edit: {
         backButton: string;
+        consoleURL: {
+            label: string;
+            hint: string;
+        };
         subtitle: string;
     };
     editTenant: {
@@ -296,9 +292,6 @@ export interface TenantsNS {
                 edit: {
                     label: string;
                 };
-                goToConsole: {
-                    label: string;
-                };
                 more: {
                     label: string;
                 };
diff --git a/modules/i18n/src/translations/en-US/portals/tenants.ts b/modules/i18n/src/translations/en-US/portals/tenants.ts
index 06aeafee40f..45ac1ca7e55 100644
--- a/modules/i18n/src/translations/en-US/portals/tenants.ts
+++ b/modules/i18n/src/translations/en-US/portals/tenants.ts
@@ -166,18 +166,14 @@ export const tenants: TenantsNS = {
             message: "This action will temporarily disable the organization.",
             primaryAction: "Confirm",
             secondaryAction: "Cancel"
-        },
-        navigatingToTenantConsole: {
-            assertionHint: "Please confirm your action.",
-            content: "If you continue navigating to the <1>{{domain}}</1> Console, you will be logged out from the current session.",
-            header: "Confirmation",
-            message: "Navigating to the Console will require you to re-login.",
-            primaryAction: "Logout & Go to Console",
-            secondaryAction: "Cancel"
         }
     },
     edit: {
         backButton: "Go back to Root Organizations",
+        consoleURL: {
+            hint: "If you try to login to <1>{{domain}}</1> organization's Console using the same browser, you will have to log out from this active session first.",
+            label: "Console URL"
+        },
         subtitle: "Crated on {{date}}"
     },
     editTenant: {
@@ -300,9 +296,6 @@ export const tenants: TenantsNS = {
                 edit: {
                     label: "Edit"
                 },
-                goToConsole: {
-                    label: "Go to Console"
-                },
                 more: {
                     label: "More"
                 }

From 2c831ff7dc0a263fc0ed20b4599f4a13dd4dc6df Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 3 Feb 2025 16:07:31 +0530
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=A6=8B=20Add=20changeset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/fast-nails-nail.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/fast-nails-nail.md

diff --git a/.changeset/fast-nails-nail.md b/.changeset/fast-nails-nail.md
new file mode 100644
index 00000000000..ac771b35bfb
--- /dev/null
+++ b/.changeset/fast-nails-nail.md
@@ -0,0 +1,9 @@
+---
+"@wso2is/admin.tenants.v1": patch
+"@wso2is/react-components": patch
+"@wso2is/i18n": patch
+---
+
+Remove `Go to Console` link from root organization actions and show a URL instead
+
+**Reason**: There are issues in having a `Go to Console` link and we can't properly workaround this without first resolving https://github.com/wso2/product-is/issues/22615

From c6d36fa7c978fdfc9f2ee322d9b79d9a29c3bae8 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 3 Feb 2025 16:45:14 +0530
Subject: [PATCH 4/7] Rename `flex` prop

---
 .../pages/edit-tenant-page.tsx                |  2 +-
 .../components/page-header/page-header.tsx    | 50 +++++++------------
 2 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/features/admin.tenants.v1/pages/edit-tenant-page.tsx b/features/admin.tenants.v1/pages/edit-tenant-page.tsx
index 3d53773b650..b4403707bbe 100644
--- a/features/admin.tenants.v1/pages/edit-tenant-page.tsx
+++ b/features/admin.tenants.v1/pages/edit-tenant-page.tsx
@@ -107,7 +107,7 @@ const EditTenantPage: FunctionComponent<EditTenantPageProps> = ({
             } }
         >
             <PageLayout
-                flex
+                legacyGrid={ false }
                 pageTitle="Edit Root Organizations"
                 title={
                     (<div className="tenant-status">
diff --git a/modules/react-components/src/components/page-header/page-header.tsx b/modules/react-components/src/components/page-header/page-header.tsx
index 7309300106a..f0ac53e3003 100644
--- a/modules/react-components/src/components/page-header/page-header.tsx
+++ b/modules/react-components/src/components/page-header/page-header.tsx
@@ -63,9 +63,11 @@ export interface PageHeaderPropsInterface extends LoadableComponentInterface, Te
      */
     description?: ReactNode;
     /**
-     * Flag to enable CSS flex box behavior instead of the Grid.
+     * Flag to enable the legacy semantic-ui grid system for the page header.
+     * @deprecated This prop is deprecated and will be removed in the next major release.
+     * Use the new flex mode (default) instead.
      */
-    flex?: boolean;
+    legacyGrid?: boolean;
     /**
      * Flag to determine whether max width should be added to page header text content.
      */
@@ -130,33 +132,31 @@ export interface BackButtonInterface extends TestableComponentInterface, Identif
  * @returns the page header component
  */
 export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
-    props: PageHeaderPropsInterface
-): ReactElement => {
-
-    const {
+    {
         action,
-        actionColumnWidth,
+        actionColumnWidth = 6,
         alertBanner,
         backButton,
-        bottomMargin,
+        bottomMargin = true,
         className,
         description,
-        flex,
-        headingColumnWidth,
+        // TODO: Remove the default value once the existing components are updated.
+        legacyGrid = true,
+        headingColumnWidth = 10,
         image,
         isLoading,
-        imageSpaced,
+        imageSpaced = "right",
         loadingStateOptions,
-        showBottomDivider,
+        showBottomDivider = false,
         title,
-        titleAs,
+        titleAs = "h1",
         titleTextAlign,
         pageHeaderMaxWidth,
         truncateContent,
-        [ "data-componentid" ]: componentId,
-        [ "data-testid" ]: testId
-    } = props;
-
+        [ "data-componentid" ]: componentId = "page-header",
+        [ "data-testid" ]: testId = "page-header"
+    }: PageHeaderPropsInterface
+): ReactElement => {
     const wrapperClasses = classNames(
         "page-header-wrapper",
         {
@@ -290,7 +290,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
             return headingContent;
         }
 
-        if (flex) {
+        if (!legacyGrid) {
             return (
                 <Box
                     display="flex"
@@ -366,17 +366,3 @@ export const PageHeader: React.FunctionComponent<PageHeaderPropsInterface> = (
             : null
     );
 };
-
-/**
- * Default proptypes for the page header component.
- */
-PageHeader.defaultProps = {
-    actionColumnWidth: 6,
-    bottomMargin: true,
-    "data-componentid": "page-header",
-    "data-testid": "page-header",
-    headingColumnWidth: 10,
-    imageSpaced: "right",
-    showBottomDivider: false,
-    titleAs: "h1"
-};

From 17f22a53aeea79ff9f6256b0ab52410522a0d454 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 3 Feb 2025 17:37:48 +0530
Subject: [PATCH 5/7] Render `DangerZoneGroup` conditionally

---
 .../components/edit-tenant/edit-tenant.tsx    | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/features/admin.tenants.v1/components/edit-tenant/edit-tenant.tsx b/features/admin.tenants.v1/components/edit-tenant/edit-tenant.tsx
index 567cc6844d9..989396329ff 100644
--- a/features/admin.tenants.v1/components/edit-tenant/edit-tenant.tsx
+++ b/features/admin.tenants.v1/components/edit-tenant/edit-tenant.tsx
@@ -56,6 +56,8 @@ const EditTenant: FunctionComponent<EditTenantProps> = ({
 }: EditTenantProps): ReactElement => {
     const { t } = useTranslation();
 
+    const isActivated: boolean = tenant?.lifecycleStatus?.activated;
+
     const isTenantDeletionEnabled: boolean = useSelector((state: AppState) => {
         return !state?.config?.ui?.features?.tenants?.disabledFeatures?.includes(
             TenantConstants.FEATURE_DICTIONARY.TENANT_DELETION
@@ -97,26 +99,28 @@ const EditTenant: FunctionComponent<EditTenantProps> = ({
             >
                 <EditTenantForm tenant={ tenant } />
             </Card>
-            <DangerZoneGroup sectionHeader={ t("tenants:editTenant.dangerZoneGroup.header") }>
-                { tenant?.lifecycleStatus?.activated && (
-                    <DangerZone
-                        data-componentid={ `${componentId}-danger-zone-status` }
-                        actionTitle={ t("tenants:editTenant.dangerZoneGroup.disable.actionTitle") }
-                        header={ t("tenants:editTenant.dangerZoneGroup.disable.header") }
-                        subheader={ t("tenants:editTenant.dangerZoneGroup.disable.subheader") }
-                        onActionClick={ (): void => disableTenant(tenant) }
-                    />
-                ) }
-                { isTenantDeletionEnabled && (
-                    <DangerZone
-                        data-componentid={ `${componentId}-danger-zone-delete` }
-                        actionTitle={ t("tenants:editTenant.dangerZoneGroup.delete.actionTitle") }
-                        header={ t("tenants:editTenant.dangerZoneGroup.delete.header") }
-                        subheader={ t("tenants:editTenant.dangerZoneGroup.delete.subheader") }
-                        onActionClick={ (): void => deleteTenant(tenant) }
-                    />
-                ) }
-            </DangerZoneGroup>
+            { (isActivated || isTenantDeletionEnabled) && (
+                <DangerZoneGroup sectionHeader={ t("tenants:editTenant.dangerZoneGroup.header") }>
+                    { isActivated && (
+                        <DangerZone
+                            data-componentid={ `${componentId}-danger-zone-status` }
+                            actionTitle={ t("tenants:editTenant.dangerZoneGroup.disable.actionTitle") }
+                            header={ t("tenants:editTenant.dangerZoneGroup.disable.header") }
+                            subheader={ t("tenants:editTenant.dangerZoneGroup.disable.subheader") }
+                            onActionClick={ (): void => disableTenant(tenant) }
+                        />
+                    ) }
+                    { isTenantDeletionEnabled && (
+                        <DangerZone
+                            data-componentid={ `${componentId}-danger-zone-delete` }
+                            actionTitle={ t("tenants:editTenant.dangerZoneGroup.delete.actionTitle") }
+                            header={ t("tenants:editTenant.dangerZoneGroup.delete.header") }
+                            subheader={ t("tenants:editTenant.dangerZoneGroup.delete.subheader") }
+                            onActionClick={ (): void => deleteTenant(tenant) }
+                        />
+                    ) }
+                </DangerZoneGroup>
+            ) }
         </Stack>
     );
 };

From 6e45b8f38be0fe7c0988a45235a4111e12b72fe4 Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Mon, 3 Feb 2025 17:44:37 +0530
Subject: [PATCH 6/7] Fix typo

---
 features/admin.tenants.v1/pages/edit-tenant-page.tsx   | 2 +-
 modules/i18n/src/translations/en-US/portals/tenants.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/features/admin.tenants.v1/pages/edit-tenant-page.tsx b/features/admin.tenants.v1/pages/edit-tenant-page.tsx
index b4403707bbe..651eb6e4873 100644
--- a/features/admin.tenants.v1/pages/edit-tenant-page.tsx
+++ b/features/admin.tenants.v1/pages/edit-tenant-page.tsx
@@ -160,7 +160,7 @@ const EditTenantPage: FunctionComponent<EditTenantPageProps> = ({
                                 <Hint popup>
                                     <Trans i18nKey="tenants:edit.consoleURL.hint" values={ { domain: tenant?.domain } }>
                                         If you try to login to <strong>{ tenant?.domain }</strong> organization&apos;s
-                                        Console using the same browser, you will have to log out from this active
+                                        Console using the same browser, you will have to logout from this active
                                         session first.
                                     </Trans>
                                 </Hint>
diff --git a/modules/i18n/src/translations/en-US/portals/tenants.ts b/modules/i18n/src/translations/en-US/portals/tenants.ts
index 45ac1ca7e55..d10cc74e87b 100644
--- a/modules/i18n/src/translations/en-US/portals/tenants.ts
+++ b/modules/i18n/src/translations/en-US/portals/tenants.ts
@@ -171,7 +171,7 @@ export const tenants: TenantsNS = {
     edit: {
         backButton: "Go back to Root Organizations",
         consoleURL: {
-            hint: "If you try to login to <1>{{domain}}</1> organization's Console using the same browser, you will have to log out from this active session first.",
+            hint: "If you try to login to <1>{{domain}}</1> organization's Console using the same browser, you will have to logout from this active session first.",
             label: "Console URL"
         },
         subtitle: "Crated on {{date}}"

From 91f48a3bf7bca8e3b3e79ef64a5a2278e69c673a Mon Sep 17 00:00:00 2001
From: Brion <info@brionmario.com>
Date: Wed, 5 Feb 2025 11:42:48 +0530
Subject: [PATCH 7/7] Link TODO issues for `Mui-readOnly` styling

---
 .../pages/console-settings-page.scss                        | 6 ++++--
 .../components/edit-organization-discovery-domains.scss     | 4 +++-
 features/admin.sms-providers.v1/pages/sms-providers.scss    | 2 ++
 features/admin.tenants.v1/pages/edit-tenant-page.scss       | 2 ++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/features/admin.console-settings.v1/pages/console-settings-page.scss b/features/admin.console-settings.v1/pages/console-settings-page.scss
index e24024b5446..4c35a374a64 100644
--- a/features/admin.console-settings.v1/pages/console-settings-page.scss
+++ b/features/admin.console-settings.v1/pages/console-settings-page.scss
@@ -6,10 +6,12 @@
     align-items: center;
     flex-wrap: nowrap;
     gap: 15px;
-    
+
     .MuiInputBase-root {
         min-width: 400px;
-        
+
+        // TODO: Fix this from the `@oxygen-ui/react` side and remove.
+        // Tracker: https://github.com/wso2/oxygen-ui/issues/331
         &.Mui-readOnly {
             cursor: default;
             background-color: #e9ecef!important;
diff --git a/features/admin.organization-discovery.v1/components/edit-organization-discovery-domains.scss b/features/admin.organization-discovery.v1/components/edit-organization-discovery-domains.scss
index 585be0e2259..0152c2d0bdd 100644
--- a/features/admin.organization-discovery.v1/components/edit-organization-discovery-domains.scss
+++ b/features/admin.organization-discovery.v1/components/edit-organization-discovery-domains.scss
@@ -1,10 +1,12 @@
 .edit-organization-discovery-domains-form {
-    // TODO: Fix this from `@oxygen-ui` side.
+    // TODO: Fix this from the `@oxygen-ui/react` side and remove.
+    // Tracker: https://github.com/wso2/oxygen-ui/issues/331
     .Mui-readOnly {
         background-color: #e9ecef;
     }
 
     // TODO: Fix this from `@oxygen-ui` side.
+    // Tracker: https://github.com/wso2/oxygen-ui/issues/332
     .MuiFormHelperText-root {
         margin-left: 0;
     }
diff --git a/features/admin.sms-providers.v1/pages/sms-providers.scss b/features/admin.sms-providers.v1/pages/sms-providers.scss
index 22df6dbae8d..02f630b6354 100644
--- a/features/admin.sms-providers.v1/pages/sms-providers.scss
+++ b/features/admin.sms-providers.v1/pages/sms-providers.scss
@@ -19,6 +19,8 @@
  .sms-provider-config-form {
 
     .MuiInputBase-root {
+        // TODO: Fix this from the `@oxygen-ui/react` side and remove.
+        // Tracker: https://github.com/wso2/oxygen-ui/issues/331
         &.Mui-readOnly {
             cursor: default;
             background-color: #e9ecef!important;
diff --git a/features/admin.tenants.v1/pages/edit-tenant-page.scss b/features/admin.tenants.v1/pages/edit-tenant-page.scss
index 7b1a19c9fd3..bcd14c13cde 100644
--- a/features/admin.tenants.v1/pages/edit-tenant-page.scss
+++ b/features/admin.tenants.v1/pages/edit-tenant-page.scss
@@ -50,6 +50,8 @@
         .MuiInputBase-root {
             min-width: 400px;
 
+            // TODO: Fix this from the `@oxygen-ui/react` side and remove.
+            // Tracker: https://github.com/wso2/oxygen-ui/issues/331
             &.Mui-readOnly {
                 cursor: default;
                 background-color: #e9ecef!important;