refactor: update organization selectors and dropdown component for consistency

Author: jacquesikot

app/client/src/ce/pages/Applications/index.tsx

@@ -102,8 +102,8 @@ import {
   getIsFetchingMyOrganizations,
   getMyOrganizations,
   getOrganizationPermissions,
-  activeOrganisationId,
   shouldShowLicenseBanner,
+  activeOrganizationId,
 } from "ee/selectors/organizationSelectors";
 import { getWorkflowsList } from "ee/selectors/workflowSelectors";
 import {
@@ -145,8 +145,8 @@ import {
 import OldRepoLimitExceededErrorModal from "pages/Editor/gitSync/RepoLimitExceededErrorModal";
 import { trackCurrentDomain } from "utils/multiOrgDomains";
 import OrganizationDropdown from "components/OrganizationDropdown";
-import { fetchMyOrganizations } from "ce/actions/organizationActions";
-import type { Organization } from "ce/api/OrganizationApi";
+import { fetchMyOrganizations } from "ee/actions/organizationActions";
+import type { Organization } from "ee/api/OrganizationApi";
 import { useIsCloudBillingEnabled } from "hooks";
 
 function GitModals() {
@@ -454,8 +454,8 @@ export function LeftPane(props: LeftPaneProps) {
   const {
     activeWorkspaceId,
     isBannerVisible = false,
-    isFetchingWorkspaces,
     isFetchingOrganizations,
+    isFetchingWorkspaces,
     activeOrganizationId,
     workspaces = [],
     organizations = [],
@@ -467,17 +467,19 @@ export function LeftPane(props: LeftPaneProps) {
 
   return (
     <LeftPaneWrapper isBannerVisible={isBannerVisible}>
-      {isCloudBillingEnabled && !isFetchingOrganizations && (
-        <OrganizationDropdown
-          organizations={organizations}
-          selectedOrganization={
-            organizations.find(
-              (organization) =>
-                organization.organizationId === activeOrganizationId,
-            ) || organizations[0]
-          }
-        />
-      )}
+      {isCloudBillingEnabled &&
+        !isFetchingOrganizations &&
+        organizations.length > 0 && (
+          <OrganizationDropdown
+            organizations={organizations}
+            selectedOrganization={
+              organizations.find(
+                (organization) =>
+                  organization.organizationId === activeOrganizationId,
+              ) || organizations[0]
+            }
+          />
+        )}
       <LeftPaneSection
         heading={createMessage(WORKSPACES_HEADING)}
         isBannerVisible={isBannerVisible}
@@ -1019,7 +1021,7 @@ export const ApplictionsMainPage = (props: any) => {
   const isBannerVisible = showBanner && (isHomePage || isLicensePage);
   const organizations = useSelector(getMyOrganizations);
   const isFetchingOrganizations = useSelector(getIsFetchingMyOrganizations);
-  const currentOrganizationId = useSelector(activeOrganisationId);
+  const currentOrganizationId = useSelector(activeOrganizationId);
 
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1088,8 +1090,8 @@ export const ApplictionsMainPage = (props: any) => {
   return (
     <PageWrapper displayName="Applications">
       <LeftPane
-        activeWorkspaceId={activeWorkspaceId}
         activeOrganizationId={currentOrganizationId}
+        activeWorkspaceId={activeWorkspaceId}
         isBannerVisible={isBannerVisible}
         isFetchingOrganizations={isFetchingOrganizations}
         isFetchingWorkspaces={isFetchingWorkspaces}

app/client/src/ce/selectors/organizationSelectors.tsx

@@ -76,6 +76,6 @@ export const getIsFetchingMyOrganizations = (state: DefaultRootState) => {
   return state.organization?.isFetchingMyOrganizations || false;
 };
 
-export const activeOrganisationId = (state: DefaultRootState) => {
+export const activeOrganizationId = (state: DefaultRootState) => {
   return state.organization?.tenantId;
 };

app/client/src/components/OrganizationDropdown.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Icon } from "@appsmith/ads";
-import type { Organization } from "ce/api/OrganizationApi";
-import { createMessage, PENDING_INVITATIONS } from "ce/constants/messages";
+import type { Organization } from "ee/api/OrganizationApi";
+import { createMessage, PENDING_INVITATIONS } from "ee/constants/messages";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 
@@ -36,7 +36,9 @@ const TriggerContent = styled.div`
 `;
 
 const TriggerText = styled.span`
-  truncate: true;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 400;
 `;
 
@@ -136,28 +138,30 @@ export interface PendingInvitation {
 }
 
 export interface OrganizationDropdownProps {
-  selectedOrganization: Organization;
-  organizations: Organization[];
   "data-testid"?: string;
+  organizations: Organization[];
+  selectedOrganization: Organization;
 }
 
 const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
-  selectedOrganization,
-  organizations = [],
   "data-testid": testId,
+  organizations = [],
+  selectedOrganization,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
-  const activeOrganizations = organizations.filter(
+  const safeOrganizations = organizations || [];
+  const activeOrganizations = safeOrganizations.filter(
     (org) => org.state === "ACTIVE",
   );
-  const pendingInvitations = organizations.filter(
+  const pendingInvitations = safeOrganizations.filter(
     (org) => org.state === "INVITED",
   );
 
   const generateInitials = (name: string): string => {
     if (!name) return "";
+
     return name.charAt(0).toUpperCase();
   };
 
@@ -171,6 +175,7 @@ const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
 
       window.open(url, "_blank", "noopener,noreferrer");
     }
+
     setIsOpen(false);
   }, []);
 
@@ -193,8 +198,10 @@ const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
 
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
-      return () =>
+
+      return () => {
         document.removeEventListener("mousedown", handleClickOutside);
+      };
     }
   }, [isOpen]);
 
@@ -203,23 +210,23 @@ const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
   const renderOrgAvatar = (orgName: string) => {
     return (
       <Avatar
-        label={generateInitials(orgName)}
         firstLetter={generateInitials(orgName)}
+        label={generateInitials(orgName)}
         size="sm"
       />
     );
   };
 
   return (
-    <DropdownContainer ref={dropdownRef} data-testid={testId}>
+    <DropdownContainer data-testid={testId} ref={dropdownRef}>
       <DropdownTrigger
-        ref={triggerRef}
-        type="button"
-        onClick={handleToggle}
-        onKeyDown={handleKeyDown}
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         aria-label={`Current organization: ${displayText}`}
+        onClick={handleToggle}
+        onKeyDown={handleKeyDown}
+        ref={triggerRef}
+        type="button"
       >
         <TriggerContent>
           {renderOrgAvatar(displayText)}
@@ -228,28 +235,30 @@ const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
         <Icon name="dropdown" size="md" />
       </DropdownTrigger>
 
-      <DropdownMenu isOpen={isOpen} role="listbox" aria-label="Organizations">
+      <DropdownMenu aria-label="Organizations" isOpen={isOpen} role="listbox">
         {activeOrganizations
           .slice()
           .sort((a, b) => {
             const aIsSelected =
               a.organizationId === selectedOrganization?.organizationId;
+
             const bIsSelected =
               b.organizationId === selectedOrganization?.organizationId;
 
             if (aIsSelected && !bIsSelected) return -1;
+
             if (!aIsSelected && bIsSelected) return 1;
+
             return 0;
           })
           .map((org) => {
             const isSelected =
               org.organizationId === selectedOrganization?.organizationId;
             return (
               <MenuItem
-                key={org.organizationId}
-                role="option"
-                tabIndex={0}
+                aria-selected={isSelected}
                 isSelected={isSelected}
+                key={org.organizationId}
                 onClick={!isSelected ? () => handleSelect(org) : undefined}
                 onKeyDown={
                   !isSelected
@@ -261,7 +270,8 @@ const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
                       }
                     : undefined
                 }
-                aria-selected={isSelected}
+                role="option"
+                tabIndex={0}
               >
                 {renderOrgAvatar(org.organizationName)}
                 <MenuItemText>
@@ -272,9 +282,9 @@ const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
 
                 {!isSelected && (
                   <MenuItemIcon
+                    className="hover-icon color-fg-muted"
                     name="share-box-line"
                     size="md"
-                    className="hover-icon color-fg-muted"
                   />
                 )}
               </MenuItem>
@@ -295,9 +305,9 @@ const OrganizationDropdown: React.FC<OrganizationDropdownProps> = ({
                 <MenuItemText>{invitation.organizationName}</MenuItemText>
 
                 <MenuItemIcon
+                  className="hover-icon color-fg-muted"
                   name="share-box-line"
                   size="md"
-                  className="hover-icon color-fg-muted"
                 />
               </MenuItem>
             ))}