feat: add organization picker popover and update sidebar navigation (#16760)

Author: slate71

airbyte-webapp/src/area/layout/SideBar/SideBar.tsx

@@ -15,6 +15,7 @@ import { useAuthService } from "core/services/auth";
 import { FeatureItem, useFeature } from "core/services/features";
 import { useIsCloudApp } from "core/utils/app";
 import { Intent, useGeneratedIntent, useIntent } from "core/utils/rbac";
+import { useExperiment } from "hooks/services/Experiment";
 import { useGetConnectorsOutOfDate } from "hooks/services/useConnector";
 import { CloudHelpDropdown } from "packages/cloud/views/layout/CloudMainView/CloudHelpDropdown";
 import { CloudSettingsRoutePaths } from "packages/cloud/views/settings/routePaths";
@@ -36,7 +37,7 @@ const WorkspaceNavItems = () => {
   const workspaceId = useCurrentWorkspaceId();
   const basePath = `${RoutePaths.Workspaces}/${workspaceId}/`;
   return (
-    <>
+    <MenuContent data-testid="navMainItems">
       <NavItem
         label={<FormattedMessage id="sidebar.connections" />}
         icon="connection"
@@ -62,66 +63,76 @@ const WorkspaceNavItems = () => {
         to={basePath + RoutePaths.ConnectorBuilder}
       />
       <NavItem
-        label={<FormattedMessage id="sidebar.settings" />}
+        label={<FormattedMessage id="sidebar.workspaceSettings" />}
         icon="gear"
         to={basePath + RoutePaths.Settings}
         withNotification={hasNewVersions}
       />
-    </>
+    </MenuContent>
   );
 };
 
 const OrganizationNavItems = () => {
   const organizationId = useCurrentOrganizationId();
   const multiWorkspaceUI = useFeature(FeatureItem.MultiWorkspaceUI);
   const displayOrganizationUsers = useFeature(FeatureItem.DisplayOrganizationUsers);
-  const canViewOrgSettings = useIntent("ViewOrganizationSettings", { organizationId });
+  const canViewOrganizationSettings = useIntent("ViewOrganizationSettings", { organizationId });
   const canManageOrganizationBilling = useGeneratedIntent(Intent.ManageOrganizationBilling, { organizationId });
   const canViewOrganizationUsage = useGeneratedIntent(Intent.ViewOrganizationUsage, { organizationId });
+  const canManageEmbedded = useGeneratedIntent(Intent.ViewConfigTemplates, { organizationId });
+  const allowConfigTemplateEndpoints = useExperiment("platform.allow-config-template-endpoints");
+  const isCloudApp = useIsCloudApp();
   const basePath = `${RoutePaths.Organization}/${organizationId}/`;
   return (
-    <>
-      {multiWorkspaceUI && canViewOrgSettings && (
-        <>
+    <MenuContent data-testid="navMainItems">
+      {multiWorkspaceUI && (
+        <NavItem
+          label={<FormattedMessage id="workspaces.title" />}
+          icon="grid"
+          to={basePath + RoutePaths.Workspaces}
+          testId="workspacesLink"
+        />
+      )}
+      {isCloudApp && canManageEmbedded && allowConfigTemplateEndpoints && (
+        <NavItem
+          icon="stars"
+          label={<FormattedMessage id="settings.embedded" />}
+          to={`${basePath + RoutePaths.Settings}/${CloudSettingsRoutePaths.Embedded}`} // Make sure this is correct
+          testId="embeddedLink"
+        />
+      )}
+      {(multiWorkspaceUI && canViewOrganizationSettings && displayOrganizationUsers) ||
+        (isCloudApp && canViewOrganizationSettings && (
           <NavItem
-            label={<FormattedMessage id="workspaces.title" />}
-            icon="grid"
-            to={basePath + RoutePaths.Workspaces}
-            testId="workspacesLink"
+            label={<FormattedMessage id="settings.members" />}
+            icon="community"
+            to={basePath + SettingsRoutePaths.OrganizationMembers}
+            testId="organizationMembersLink"
           />
-          {displayOrganizationUsers && (
-            <NavItem
-              label={<FormattedMessage id="settings.members" />}
-              icon="community"
-              to={basePath + SettingsRoutePaths.OrganizationMembers}
-              testId="organizationMembersLink"
-            />
-          )}
-          {canManageOrganizationBilling && (
-            <NavItem
-              label={<FormattedMessage id="sidebar.billing" />}
-              icon="credits"
-              to={basePath + CloudSettingsRoutePaths.Billing}
-              testId="billingLink"
-            />
-          )}
-          {canViewOrganizationUsage && (
-            <NavItem
-              label={<FormattedMessage id="settings.usage" />}
-              icon="chart"
-              to={basePath + CloudSettingsRoutePaths.OrganizationUsage}
-              testId="organizationUsageLink"
-            />
-          )}
-        </>
+        ))}
+      {isCloudApp && canViewOrganizationSettings && canManageOrganizationBilling && (
+        <NavItem
+          label={<FormattedMessage id="sidebar.billing" />}
+          icon="credits"
+          to={basePath + CloudSettingsRoutePaths.Billing}
+          testId="billingLink"
+        />
+      )}
+      {isCloudApp && canViewOrganizationSettings && canViewOrganizationUsage && (
+        <NavItem
+          label={<FormattedMessage id="settings.usage" />}
+          icon="chart"
+          to={basePath + CloudSettingsRoutePaths.OrganizationUsage}
+          testId="organizationUsageLink"
+        />
       )}
       <NavItem
         label={<FormattedMessage id="settings.organizationSettings" />}
         icon="gear"
         to={basePath + RoutePaths.Settings}
         testId="orgSettingsLink"
       />
-    </>
+    </MenuContent>
   );
 };
 
@@ -132,8 +143,8 @@ export const SideBar: React.FC<PropsWithChildren> = () => {
   const isHidden = HIDDEN_SIDEBAR_PATHS.some((path) => !!matchPath(path, pathname));
   const isCloudApp = useIsCloudApp();
 
-  const organizationId = useCurrentOrganizationId();
-  const showOrgNav = Boolean(organizationId);
+  const showOrganizationNav = pathname.split("/")[1] === RoutePaths.Organization;
+  const showWorkspaceNav = pathname.split("/")[1] === RoutePaths.Workspaces;
 
   const username =
     authType === "simple" || authType === "none"
@@ -145,14 +156,13 @@ export const SideBar: React.FC<PropsWithChildren> = () => {
   return (
     <nav className={classNames(styles.sidebar, { [styles.hidden]: isHidden })}>
       <AirbyteOrgPicker />
-      {/* NOTE: AdminWorkspaceWarning wants a workspace */}
+      {/* NOTE: AdminWorkspaceWarning wants a workspace but one is not always available: https://github.com/airbytehq/airbyte-internal-issues/issues/12948 */}
       {/* <IfFeatureEnabled feature={FeatureItem.ShowAdminWarningInWorkspace}>
         <AdminWorkspaceWarning />
       </IfFeatureEnabled> */}
       <FlexContainer className={styles.sidebar__menuItems} direction="column" justifyContent="flex-start">
-        <MenuContent data-testid="navMainItems">
-          {showOrgNav ? <OrganizationNavItems /> : <WorkspaceNavItems />}
-        </MenuContent>
+        {showOrganizationNav && <OrganizationNavItems />}
+        {showWorkspaceNav && <WorkspaceNavItems />}
         <Box className={styles.sidebar__menuContentSeparator} />
         <MenuContent>
           {isCloudApp ? <CloudHelpDropdown /> : <HelpDropdown />}

airbyte-webapp/src/area/layout/SideBar/components/AirbyteOrgPicker.module.scss

@@ -1,96 +1,61 @@
 @use "scss/colors";
 @use "scss/variables";
+@use "scss/z-indices";
 
 .orgPicker {
+  position: relative;
   width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: variables.$spacing-sm;
   border-bottom: variables.$border-thin solid colors.$grey-100;
-  height: 58px;
-
-  > *:first-child {
-    width: 100%;
-    height: 100%;
-  }
+  height: variables.$height-org-picker;
 }
 
-.orgPicker__dropdownButton {
-  display: flex;
-  align-items: center;
+.orgPicker__button {
   width: 100%;
   height: 100%;
   background: none;
   border: none;
   padding: 0 variables.$spacing-sm;
   cursor: pointer;
+  transition: all 0.3s ease-out;
   border-radius: variables.$border-radius-sm;
 
   &:focus-visible {
-    outline: variables.$border-thick solid colors.$blue-500;
-    outline-offset: variables.$border-thick;
-    border-radius: variables.$border-radius-sm;
+    outline-offset: -2px;
   }
 
   .orgPicker__logo {
     width: 24px;
-    height: 37px;
+    height: 24px;
     flex-shrink: 0;
   }
 
-  .orgPicker__workspace {
-    flex: 1;
-    min-width: 0;
-    text-align: left;
+  .orgPicker__textBlock {
     display: flex;
     flex-direction: column;
-    margin: 0 variables.$spacing-md;
-
-    .orgPicker__workspaceName,
-    .orgPicker__orgName {
-      text-align: left;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 18px;
-      font-weight: 500;
-      font-size: variables.$font-size-sm;
-    }
-  }
-
-  .orgPicker__chevron {
-    display: flex;
-    align-items: center;
-    width: 14px;
-    height: 14px;
-    color: colors.$grey-400;
-    flex-shrink: 0;
+    justify-content: center;
+    min-width: 0;
+    flex: 1;
+    margin: 0 variables.$spacing-sm;
+    cursor: pointer;
   }
-}
-
-.orgPicker__dropdownMenuItem {
-  width: 240px;
-  min-height: 26px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-  padding: 0 variables.$spacing-md;
 
-  .dropdownMenu__orgName {
-    flex: 1;
+  .orgPicker__workspaceName,
+  .orgPicker__orgName {
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: 20px;
+    line-height: 18px;
     font-weight: 500;
     font-size: variables.$font-size-sm;
-    padding-left: variables.$spacing-md;
+    cursor: pointer;
   }
+}
 
-  .orgPicker__gearIcon {
-    color: colors.$grey-400;
-  }
+.orgPicker__popoverPanel {
+  width: 240px;
+  background: colors.$foreground;
+  border-radius: variables.$border-radius-sm;
+  box-shadow: variables.$box-shadow-raised;
+  z-index: z-indices.$dropdownMenu;
 }