Merge pull request #7490 from brionmario/fix-22225-2

Remove `Go to Console` link from root organization actions and show a URL instead

.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

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;

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;
     }

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;

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>
     );
 };

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,

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,

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;

features/admin.tenants.v1/pages/edit-tenant-page.scss

@@ -45,4 +45,41 @@
             }
         }
     }
+
+    .console-url-copy-field {
+        .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;
+            }
+        }
+    }
+}
+
+@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;
+            }
+        }
+    }
 }

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
+                legacyGrid={ false }
                 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 logout 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;