Merge pull request wso2#8928 from HasiniSama/edit-ui

Provide self organization name update via console UI

Author: HasiniSama

.changeset/beige-carpets-change.md

@@ -0,0 +1,9 @@
+---
+"@wso2is/admin.organizations.v1": patch
+"@wso2is/admin.tenants.v1": patch
+"@wso2is/admin.core.v1": patch
+"@wso2is/console": patch
+"@wso2is/i18n": patch
+---
+
+Provide self organization name update via console UI

apps/console/src/configs/routes.tsx

@@ -19,6 +19,7 @@
 import {
     ArrowRightToBracketPencilIcon,
     BuildingIcon,
+    BuildingPenIcon,
     DocumentCheckIcon,
     EnvelopeGearIcon,
     EnvelopeIcon,
@@ -1760,6 +1761,18 @@ export const getFullScreenViewRoutes = (): RouteInterface[] => {
  */
 export const getDefaultLayoutRoutes = (): RouteInterface[] => {
     return [
+        {
+            component: lazy(() => import("@wso2is/admin.tenants.v1/pages/edit-self-organization-page")),
+            exact: true,
+            icon: {
+                icon: <BuildingPenIcon />
+            },
+            id: "organizations",
+            order: 0,
+            path: AppConstants.getPaths().get("EDIT_SELF_ORGANIZATION"),
+            protected: true,
+            showOnSidePanel: true
+        },
         {
             children: [
                 {

features/admin.core.v1/constants/app-constants.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2022-2024, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2022-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
@@ -439,6 +439,7 @@ export class AppConstants {
                 `${AppConstants.getAdminViewBasePath()}/actions/pre-update-profile` ],
             [ "TENANTS", `${AppConstants.getDefaultLayoutBasePath()}/organizations` ],
             [ "EDIT_TENANT", `${AppConstants.getDefaultLayoutBasePath()}/organizations/:id` ],
+            [ "EDIT_SELF_ORGANIZATION", `${AppConstants.getDefaultLayoutBasePath()}/organizations/self` ],
             [ "SYSTEM_SETTINGS", `${AppConstants.getDefaultLayoutBasePath()}/organizations/system-settings` ],
             [ "POLICY_ADMINISTRATION", `${AppConstants.getAdminViewBasePath()}/policy-administration` ],
             [ "EDIT_POLICY", `${AppConstants.getAdminViewBasePath()}/policy-administration/edit-policy/:id` ],

features/admin.organizations.v1/components/organization-switch/organization-switch-breadcrumb.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2023-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
@@ -104,6 +104,23 @@ export const OrganizationSwitchBreadcrumb: FunctionComponent<OrganizationSwitchD
         mutateOrganizationBreadCrumbFetchRequest();
     }, [ organizationId ]);
 
+    /**
+     * Listen for current authenticated organization updates from the organization edit form.
+     */
+    useEffect(() => {
+        const handleOrganizationUpdate = (event: CustomEvent) => {
+            if (event.detail?.success) {
+                mutateOrganizationBreadCrumbFetchRequest();
+            }
+        };
+
+        window.addEventListener("organization-updated", handleOrganizationUpdate as EventListener);
+
+        return () => {
+            window.removeEventListener("organization-updated", handleOrganizationUpdate as EventListener);
+        };
+    }, []);
+
     const isSubOrg: boolean = window[ "AppUtils" ].getConfig().organizationName;
 
     const isShowSwitcher: boolean = organizationConfigs?.showOrganizationDropdown || isSubOrg;

features/admin.tenants.v1/api/update-self-authenticated-organization.ts

@@ -0,0 +1,69 @@
+/**
+ * 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 { AsgardeoSPAClient, HttpClientInstance } from "@asgardeo/auth-react";
+import { store } from "@wso2is/admin.core.v1/store";
+import { OrganizationPatchData } from "@wso2is/admin.organizations.v1/models";
+import { IdentityAppsApiException } from "@wso2is/core/exceptions";
+import { HttpMethods } from "@wso2is/core/models";
+import { AxiosError, AxiosResponse } from "axios";
+
+/**
+ * Get an HTTP client instance.
+ */
+const httpClient: HttpClientInstance = AsgardeoSPAClient.getInstance()
+    .httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Update details of the currently authenticated organization.
+ *
+ * @param operations - Array of patch operations to apply to the organization.
+ * @returns Promise containing the updated organization response.
+ */
+const updateSelfAuthenticatedOrganization = (operations: OrganizationPatchData[]): Promise<any> => {
+
+    const requestConfig: any = {
+        data: operations,
+        headers: {
+            "Accept": "application/json",
+            "Content-Type": "application/json"
+        },
+        method: HttpMethods.PATCH,
+        url: `${store.getState().config.endpoints.organizations}/organizations/self`
+    };
+
+    return httpClient(requestConfig)
+        .then((response: AxiosResponse) => {
+            return Promise.resolve(response.data);
+        })
+        .catch((error: AxiosError) => {
+            return Promise.reject(new IdentityAppsApiException(
+                error?.response?.data?.description ||
+                error?.response?.data?.message ||
+                error?.message ||
+                "An error occurred while updating the organization.",
+                error.stack,
+                error?.response?.status,
+                error?.response?.request,
+                error?.response,
+                error?.response?.config
+            ));
+        });
+};
+
+export default updateSelfAuthenticatedOrganization;

features/admin.tenants.v1/api/use-get-self-authenticated-organization.ts

@@ -0,0 +1,59 @@
+/**
+ * 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 useRequest, {
+    RequestConfigInterface,
+    RequestErrorInterface,
+    RequestResultInterface
+} from "@wso2is/admin.core.v1/hooks/use-request";
+import { store } from "@wso2is/admin.core.v1/store";
+import { HttpMethods } from "@wso2is/core/models";
+import { OrganizationSelfResponse } from "../models/tenants";
+
+/**
+ * Hook to get the current authenticated organization details.
+ *
+ * @param shouldFetch - Should fetch the data.
+ * @returns A response object containing the data, error, isLoading, isValidating, mutate.
+ */
+const useGetSelfAuthenticatedOrganization = <Data = OrganizationSelfResponse, Error = RequestErrorInterface>
+    (shouldFetch: boolean = true): RequestResultInterface<Data, Error> => {
+
+    const requestConfig: RequestConfigInterface = {
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json"
+        },
+        method: HttpMethods.GET,
+        url: `${ store.getState().config.endpoints.organizations }/organizations/self`
+    };
+
+    const { data, error, isLoading, isValidating, mutate } = useRequest<Data, Error>(
+        shouldFetch ? requestConfig : null
+    );
+
+    return {
+        data,
+        error,
+        isLoading,
+        isValidating,
+        mutate
+    };
+};
+
+export default useGetSelfAuthenticatedOrganization;

features/admin.tenants.v1/components/dropdown/tenant-dropdown.tsx

@@ -24,7 +24,9 @@ import {
     BuildingAltIcon,
     BuildingCircleCheckIcon,
     BuildingPenIcon,
+    EyeIcon,
     HierarchyIcon,
+    PenToSquareIcon,
     PlusIcon
 } from "@oxygen-ui/react-icons";
 import {
@@ -150,6 +152,8 @@ const TenantDropdown: FunctionComponent<TenantDropdownInterface> = (props: Tenan
     });
 
     const hasOrganizationReadPermissions: boolean = useRequiredScopes(organizationsFeatureConfig?.scopes?.read);
+    const hasOrganizationUpdatePermissions: boolean = useRequiredScopes(organizationsFeatureConfig?.scopes?.update);
+    const hasTenantsReadPermissions: boolean = useRequiredScopes(tenantsFeatureConfig?.scopes?.read);
 
     const isMakingTenantsDefaultEnabled: boolean = useSelector((state: AppState) => {
         return !state?.config?.ui?.features?.tenants?.disabledFeatures?.includes(
@@ -246,6 +250,23 @@ const TenantDropdown: FunctionComponent<TenantDropdownInterface> = (props: Tenan
         getOrganizationData();
     }, [ organizationType ]);
 
+    /**
+     * Listen for current authenticated organization updates from the organization edit form.
+     */
+    useEffect(() => {
+        const handleOrganizationUpdate = (event: CustomEvent) => {
+            if (event.detail?.success) {
+                setOrganizationName(event.detail?.newName);
+            }
+        };
+
+        window.addEventListener("organization-updated", handleOrganizationUpdate as EventListener);
+
+        return () => {
+            window.removeEventListener("organization-updated", handleOrganizationUpdate as EventListener);
+        };
+    }, []);
+
     useEffect(() => {
 
         if (!currentTenant){
@@ -668,7 +689,31 @@ const TenantDropdown: FunctionComponent<TenantDropdownInterface> = (props: Tenan
             });
         }
 
-        if (isManagingTenantsFromDropdownEnabled && isSuperOrganization()) {
+        options.push(
+            <Dropdown.Item
+                className="action-panel"
+                onClick={ (): void => {
+                    history.push(AppConstants.getPaths().get("EDIT_SELF_ORGANIZATION"));
+                } }
+                data-compnentid="edit-self-organization"
+            >
+                {
+                    hasOrganizationUpdatePermissions ? (
+                        <>
+                            <PenToSquareIcon />
+                            { t("tenants:tenantDropdown.options.edit.label") }
+                        </>
+                    ) : (
+                        <>
+                            <EyeIcon />
+                            { t("tenants:tenantDropdown.options.view.label") }
+                        </>
+                    )
+                }
+            </Dropdown.Item>
+        );
+
+        if (hasTenantsReadPermissions && isManagingTenantsFromDropdownEnabled && isSuperOrganization()) {
             options.push(
                 <Dropdown.Item
                     className="action-panel"

features/admin.tenants.v1/components/edit-self-organization/edit-self-organization-form.scss

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+.edit-self-organization-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: var(--wso2is-admin-form-max-width);
+
+    p {
+        margin-top: -1.5rem;
+    }
+
+    .edit-self-organization-form-submit-button {
+        align-self: flex-start;
+        margin-top: var(--oxygen-spacing-2);
+    }
+}