@digital-ai/dot-components 2.3.1 → 2.3.2

package/CHANGE_LOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [2.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (02/23/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.1...2.3.2)
+
+**Fixed bugs:**
+
+- S-89896: Still trying to get SQ off its \(non-\)duplicate obsession [\#1388](https://github.com/digital-ai/dot-components/pull/1388) ([jmcnally](https://github.com/jmcnally))
+- S-89896: Sort app types alphabetically [\#1384](https://github.com/digital-ai/dot-components/pull/1384) ([jmcnally](https://github.com/jmcnally))
+- S-89896: Handle non-product apps in their own group [\#1381](https://github.com/digital-ai/dot-components/pull/1381) ([jmcnally](https://github.com/jmcnally))
+
 ## [2.3.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/15/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.0...2.3.1)
@@ -226,6 +236,7 @@
 **Fixed bugs:**
 
 - S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
+- S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
@@ -277,7 +288,6 @@
 
 **Fixed bugs:**
 
-- D-20378: update input margin to account for helper text [\#1212](https://github.com/digital-ai/dot-components/pull/1212) ([CWSites](https://github.com/CWSites))
 - D-21918: Update `DotAlertBanner` to match Figma [\#1208](https://github.com/digital-ai/dot-components/pull/1208) ([CWSites](https://github.com/CWSites))
 
 ## [1.19.1](https://www.npmjs.com/package/@digital-ai/dot-components) (07/18/2022)
@@ -289,6 +299,7 @@
 - D-22029: `DotAutocomplete`: fix id attribute on input [\#1217](https://github.com/digital-ai/dot-components/pull/1217) ([angel-git](https://github.com/angel-git))
 - D-20693: `DotSidebar` updates to match Figma [\#1214](https://github.com/digital-ai/dot-components/pull/1214) ([CWSites](https://github.com/CWSites))
 - D-20329: add href to application logo [\#1213](https://github.com/digital-ai/dot-components/pull/1213) ([CWSites](https://github.com/CWSites))
+- D-20378: update input margin to account for helper text [\#1212](https://github.com/digital-ai/dot-components/pull/1212) ([CWSites](https://github.com/CWSites))
 - D-20404: update table border color [\#1211](https://github.com/digital-ai/dot-components/pull/1211) ([CWSites](https://github.com/CWSites))
 - D-21972: Adds props for custom tooltip position in ListItemProps [\#1207](https://github.com/digital-ai/dot-components/pull/1207) ([s-zimm](https://github.com/s-zimm))
 
@@ -586,6 +597,10 @@
 - D-19722: `Table`: Fix Storybook issues by refactoring Table's story. [\#974](https://github.com/digital-ai/dot-components/pull/974) ([dmiletic85](https://github.com/dmiletic85))
 - D-19713: Do not show alert banner close button if onClose not provided [\#973](https://github.com/digital-ai/dot-components/pull/973) ([selsemore](https://github.com/selsemore))
 
+**Misc:**
+
+- S-76846: update to webpack 5 [\#940](https://github.com/digital-ai/dot-components/pull/940) ([CWSites](https://github.com/CWSites))
+
 ## [1.7.0](https://www.npmjs.com/package/@digital-ai/dot-components) (01/28/2022)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.6.2...1.7.0)
@@ -629,7 +644,6 @@
 
 **Misc:**
 
-- S-76846: update to webpack 5 [\#940](https://github.com/digital-ai/dot-components/pull/940) ([CWSites](https://github.com/CWSites))
 - S-76846: storybook updates `develop` [\#935](https://github.com/digital-ai/dot-components/pull/935) ([CWSites](https://github.com/CWSites))
 
 ## [1.6.1](https://www.npmjs.com/package/@digital-ai/dot-components) (01/10/2022)

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, useEffect, useRef, useMemo, useContext, createContext, forwardRef, Fragment as Fragment$1, createElement, useCallback } from 'react';
+import { useState, useEffect, useRef, useMemo, useContext, createContext, useCallback, forwardRef, Fragment as Fragment$1, createElement } from 'react';
 import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Alert, Fade, Avatar, IconButton, Link, Drawer, Button, darken, List, ListItem, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, ListItemIcon, Collapse, ListSubheader, Divider, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, TablePagination, TableContainer, TableCell, TableRow, TableBody, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress } from '@mui/material';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, alpha, useTheme } from '@mui/material/styles';
@@ -1372,8 +1372,9 @@ function useCancelablePromise() {
 }
 
 const nullStr = null;
-const deployAppInstance = (id, name, instance_state) => ({
-  id,
+let idCount = 100;
+const createAppInstance = (name, instance_state, appType = 'Deploy') => ({
+  id: '757e74ed-389b-4ec4-be29-bfed6738b' + idCount++,
   product_instance_id: nullStr,
   account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
   enabled: true,
@@ -1385,13 +1386,14 @@ const deployAppInstance = (id, name, instance_state) => ({
   alternate_label: nullStr,
   logo: nullStr,
   needs_authentication: false,
-  logo_product_name: 'Deploy',
-  instance_state
+  logo_product_name: appType,
+  instance_state: instance_state % 2
 });
-const testData = [['757e74ed-389b-4ec4-be29-bfed6738b907', 'QA Deploy', 0], ['857e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 1', 1], ['957e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 2', 1], ['057e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 3', 1], ['157e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 4', 1], ['257e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 5', 1], ['257e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 5a', 1], ['257e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 5b', 1], ['657e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 6', 0], ['757e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 7', 1], ['857e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 8', 1], ['957e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 9', 0], ['057e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 10', 0], ['157e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 11', 1], ['257e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 12', 0], ['357e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 13', 1], ['457e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 14', 1], ['557e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 15', 1], ['657e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 16', 0], ['757e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 17', 1], ['857e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 18', 0], ['957e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 19', 1], ['057e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 20', 1], ['157e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 21', 1], ['257e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 22', 1], ['357e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 23', 1], ['457e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 24', 1], ['557e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 25', 1], ['657e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 26', 0], ['757e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 27', 1], ['857e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 28', 1], ['957e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 29', 0], ['057e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 30', 1], ['157e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 31', 1], ['257e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 32', 1], ['357e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 33', 0], ['457e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 34', 1], ['557e74ed-389b-4ec4-be29-bfed6738b929', 'Deploy 35', 1], ['557e74ed-399b-4ec4-be29-bfed6738b929', 'Deploy 36', 1]];
+const testData = [['QA Deploy', 0], ['Deploy 1', 1], ['Deploy 2er', 5], ['Deploy 3rf', 3], ['Deploy 4', 7], ['Deploy 5', 9], ['Deploy 5a', 101], ['Deploy 5b', 91], ['Deploy 6', 2], ['Deploy 7', 3], ['Deploy 8c', 21], ['Deploy 9', 20], ['Deploy 10m', 10], ['Deploy 11', 11], ['Deploy 12qa', 30], ['Deploy 13', 31], ['Deploy 14d', 41], ['Deploy 15', 45], ['Deploy 16', 40], ['Deploy 17', 51], ['Deploy 18', 70], ['Deploy 19a', 61], ['Deploy 20', 63], ['Deploy 21', 67], ['Deploy 22p', 65], ['Deploy 23', 73], ['Deploy 24o', 93], ['Deploy 25', 11], ['Deploy 26', 80], ['Deploy 27io', 81], ['Deploy 28ty', 87], ['Deploy 29', 76], ['Deploy 30rt', 97], ['Deploy 31sd', 37], ['Deploy 32as', 39], ['Deploy 33', 12], ['No type 1c', 13], ['Deploy 34pl', 19], ['No type 2t', 14], ['Deploy 35', 17], ['No type 3h', 44], ['Deploy 36d', 55]];
 const deployInstances = [];
-for (const [id, name, instanceState] of testData) {
-  deployInstances.push(deployAppInstance(id, name, instanceState));
+for (const [name, instanceState] of testData) {
+  const appType = name.startsWith('No type') ? null : 'Deploy';
+  deployInstances.push(createAppInstance(name, instanceState, appType));
 }
 let applications = [{
   id: 'be6e1e4f-7009-4412-b3ba-e5633cbe6be0',
@@ -1979,15 +1981,19 @@ const createTopLevelMenuItem = (url, logo, title, openNewTab = true) => {
   }), `top-menu-item-${title}`);
 };
 const createAppTypeLabel = (appTypeName, logo, appProps) => {
+  const logoProps = logo ? {
+    imageSrc: logo
+  } : {
+    iconId: 'collection'
+  };
   return jsxs("div", Object.assign({
     className: "logo-title"
   }, {
-    children: [jsx(DotAvatar, {
+    children: [jsx(DotAvatar, Object.assign({}, logoProps, {
       alt: "app image",
-      imageSrc: logo,
       type: "image",
       variant: "circular"
-    }, void 0), jsxs("div", Object.assign({
+    }), void 0), jsxs("div", Object.assign({
       className: "dot-app-switcher-app-title"
     }, {
       children: [jsx(DotTypography, Object.assign({
@@ -2188,6 +2194,7 @@ const DotAppSwitcherView = ({
   activeApp,
   apps,
   className,
+  noAppTypeLabel: _noAppTypeLabel = 'Other',
   platformConsoleUrl,
   onClose,
   open,
@@ -2209,19 +2216,26 @@ const DotAppSwitcherView = ({
     selectedAppType = selectedAppTypeAlt;
     setSelectedAppType = setSelectedAppTypeAlt;
   }
-  const showApps = appType => {
+  const showApps = useCallback(appType => {
     setSelectedAppType(appType);
-  };
-  const showAppTypes = () => setSelectedAppType(null);
-  const populateAppTypeMap = () => {
+  }, []);
+  const showAppTypes = useCallback(() => setSelectedAppType(null), []);
+  const populateAppTypeMap = useCallback(() => {
     const newAppTypeMap = new Map();
+    // we'll put Other at the end
+    const otherApps = [];
     apps === null || apps === void 0 ? void 0 : apps.forEach(app => {
-      const appTypeName = app.logo_product_name;
       const children = createMenuItem(app.url, app.name, getInstanceStateText(app));
-      let appTypeApps = newAppTypeMap.get(appTypeName);
-      if (!appTypeApps) {
-        appTypeApps = [];
-        newAppTypeMap.set(appTypeName, appTypeApps);
+      const appTypeName = app.logo_product_name;
+      let appTypeApps;
+      if (appTypeName) {
+        appTypeApps = newAppTypeMap.get(appTypeName);
+        if (!appTypeApps) {
+          appTypeApps = [];
+          newAppTypeMap.set(appTypeName, appTypeApps);
+        }
+      } else {
+        appTypeApps = otherApps;
       }
       appTypeApps.push({
         children,
@@ -2229,7 +2243,15 @@ const DotAppSwitcherView = ({
         height: 64
       });
     });
-    setAppTypeMap(newAppTypeMap);
+    const keys = Array.from(newAppTypeMap.keys()).sort();
+    const sortedAppTypeMap = new Map();
+    for (const appType of keys) {
+      sortedAppTypeMap.set(appType, newAppTypeMap.get(appType));
+    }
+    if (otherApps.length > 0) {
+      sortedAppTypeMap.set(_noAppTypeLabel, otherApps);
+    }
+    setAppTypeMap(sortedAppTypeMap);
     const menuItems = [daiAppsHeaderMenuItem];
     if (platformConsoleUrl) {
       const children = createTopLevelMenuItem(platformConsoleUrl, getLogoForAppType('Platform'), 'Digital.ai Platform', !window.location.href.startsWith(platformConsoleUrl));
@@ -2240,9 +2262,9 @@ const DotAppSwitcherView = ({
       });
     }
     const newAppTypeLabels = new Map();
-    newAppTypeMap.forEach((singleTypeApps, appTypeName) => {
+    sortedAppTypeMap.forEach((singleTypeApps, appTypeName) => {
       if ((singleTypeApps === null || singleTypeApps === void 0 ? void 0 : singleTypeApps.length) > 0) {
-        const logo = getLogoForAppType(appTypeName);
+        const logo = appTypeName === _noAppTypeLabel ? null : getLogoForAppType(appTypeName);
         newAppTypeLabels.set(appTypeName, {
           logo,
           singleTypeApps
@@ -2263,7 +2285,7 @@ const DotAppSwitcherView = ({
     });
     setAppTypeMenuItems(menuItems);
     setAppTypeLabels(newAppTypeLabels);
-  };
+  }, [apps]);
   const emptyState = () => {
     const currentAppMenuItem = createTopLevelMenuItem(window.location.href, getLogoForAppType(activeApp.product), activeApp.name, false);
     setAppTypeMenuItems([daiAppsHeaderMenuItem, {

package/index.umd.js

@@ -1548,9 +1548,13 @@
     }
 
     var nullStr = null;
-    var deployAppInstance = function deployAppInstance(id, name, instance_state) {
+    var idCount = 100;
+    var createAppInstance = function createAppInstance(name, instance_state, appType) {
+      if (appType === void 0) {
+        appType = 'Deploy';
+      }
       return {
-        id: id,
+        id: '757e74ed-389b-4ec4-be29-bfed6738b' + idCount++,
         product_instance_id: nullStr,
         account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
         enabled: true,
@@ -1562,18 +1566,18 @@
         alternate_label: nullStr,
         logo: nullStr,
         needs_authentication: false,
-        logo_product_name: 'Deploy',
-        instance_state: instance_state
+        logo_product_name: appType,
+        instance_state: instance_state % 2
       };
     };
-    var testData = [['757e74ed-389b-4ec4-be29-bfed6738b907', 'QA Deploy', 0], ['857e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 1', 1], ['957e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 2', 1], ['057e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 3', 1], ['157e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 4', 1], ['257e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 5', 1], ['257e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 5a', 1], ['257e74ed-389b-4ec4-be29-bfed6738b907', 'Deploy 5b', 1], ['657e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 6', 0], ['757e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 7', 1], ['857e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 8', 1], ['957e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 9', 0], ['057e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 10', 0], ['157e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 11', 1], ['257e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 12', 0], ['357e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 13', 1], ['457e74ed-389b-4ec4-be29-bfed6738b908', 'Deploy 14', 1], ['557e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 15', 1], ['657e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 16', 0], ['757e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 17', 1], ['857e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 18', 0], ['957e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 19', 1], ['057e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 20', 1], ['157e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 21', 1], ['257e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 22', 1], ['357e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 23', 1], ['457e74ed-389b-4ec4-be29-bfed6738b909', 'Deploy 24', 1], ['557e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 25', 1], ['657e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 26', 0], ['757e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 27', 1], ['857e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 28', 1], ['957e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 29', 0], ['057e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 30', 1], ['157e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 31', 1], ['257e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 32', 1], ['357e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 33', 0], ['457e74ed-389b-4ec4-be29-bfed6738b919', 'Deploy 34', 1], ['557e74ed-389b-4ec4-be29-bfed6738b929', 'Deploy 35', 1], ['557e74ed-399b-4ec4-be29-bfed6738b929', 'Deploy 36', 1]];
+    var testData = [['QA Deploy', 0], ['Deploy 1', 1], ['Deploy 2er', 5], ['Deploy 3rf', 3], ['Deploy 4', 7], ['Deploy 5', 9], ['Deploy 5a', 101], ['Deploy 5b', 91], ['Deploy 6', 2], ['Deploy 7', 3], ['Deploy 8c', 21], ['Deploy 9', 20], ['Deploy 10m', 10], ['Deploy 11', 11], ['Deploy 12qa', 30], ['Deploy 13', 31], ['Deploy 14d', 41], ['Deploy 15', 45], ['Deploy 16', 40], ['Deploy 17', 51], ['Deploy 18', 70], ['Deploy 19a', 61], ['Deploy 20', 63], ['Deploy 21', 67], ['Deploy 22p', 65], ['Deploy 23', 73], ['Deploy 24o', 93], ['Deploy 25', 11], ['Deploy 26', 80], ['Deploy 27io', 81], ['Deploy 28ty', 87], ['Deploy 29', 76], ['Deploy 30rt', 97], ['Deploy 31sd', 37], ['Deploy 32as', 39], ['Deploy 33', 12], ['No type 1c', 13], ['Deploy 34pl', 19], ['No type 2t', 14], ['Deploy 35', 17], ['No type 3h', 44], ['Deploy 36d', 55]];
     var deployInstances = [];
     for (var _i = 0, testData_1 = testData; _i < testData_1.length; _i++) {
       var _a = testData_1[_i],
-        id = _a[0],
-        name_1 = _a[1],
-        instanceState = _a[2];
-      deployInstances.push(deployAppInstance(id, name_1, instanceState));
+        name_1 = _a[0],
+        instanceState = _a[1];
+      var appType = name_1.startsWith('No type') ? null : 'Deploy';
+      deployInstances.push(createAppInstance(name_1, instanceState, appType));
     }
     var applications = [{
       id: 'be6e1e4f-7009-4412-b3ba-e5633cbe6be0',
@@ -2213,15 +2217,19 @@
       }), "top-menu-item-" + title);
     };
     var createAppTypeLabel = function createAppTypeLabel(appTypeName, logo, appProps) {
+      var logoProps = logo ? {
+        imageSrc: logo
+      } : {
+        iconId: 'collection'
+      };
       return jsxRuntime.jsxs("div", __assign({
         className: "logo-title"
       }, {
-        children: [jsxRuntime.jsx(DotAvatar, {
+        children: [jsxRuntime.jsx(DotAvatar, __assign({}, logoProps, {
           alt: "app image",
-          imageSrc: logo,
           type: "image",
           variant: "circular"
-        }, void 0), jsxRuntime.jsxs("div", __assign({
+        }), void 0), jsxRuntime.jsxs("div", __assign({
           className: "dot-app-switcher-app-title"
         }, {
           children: [jsxRuntime.jsx(DotTypography, __assign({
@@ -2434,51 +2442,60 @@
       var activeApp = _a.activeApp,
         apps = _a.apps,
         className = _a.className,
+        _b = _a.noAppTypeLabel,
+        noAppTypeLabel = _b === void 0 ? 'Other' : _b,
         platformConsoleUrl = _a.platformConsoleUrl,
         onClose = _a.onClose,
         open = _a.open,
         selectedAppType = _a.selectedAppType,
-        _b = _a.yOffset,
-        yOffset = _b === void 0 ? 48 : _b,
-        _c = _a.zIndex,
-        zIndex = _c === void 0 ? 990 : _c;
+        _c = _a.yOffset,
+        yOffset = _c === void 0 ? 48 : _c,
+        _d = _a.zIndex,
+        zIndex = _d === void 0 ? 990 : _d;
       var dotCoreApiContext = useDotCoreApiContext();
       var setSelectedAppType = null;
       if (dotCoreApiContext !== null) {
         setSelectedAppType = dotCoreApiContext.setSelectedAppSwitcherAppType;
       }
       var rootClasses = useStylesWithRootClass(rootClassName$Q, className);
-      var _d = React.useState(),
-        appTypeMap = _d[0],
-        setAppTypeMap = _d[1];
       var _e = React.useState(),
-        appTypeLabels = _e[0],
-        setAppTypeLabels = _e[1];
+        appTypeMap = _e[0],
+        setAppTypeMap = _e[1];
       var _f = React.useState(),
-        appTypeMenuItems = _f[0],
-        setAppTypeMenuItems = _f[1];
-      var _g = React.useState(null),
-        selectedAppTypeAlt = _g[0],
-        setSelectedAppTypeAlt = _g[1];
+        appTypeLabels = _f[0],
+        setAppTypeLabels = _f[1];
+      var _g = React.useState(),
+        appTypeMenuItems = _g[0],
+        setAppTypeMenuItems = _g[1];
+      var _h = React.useState(null),
+        selectedAppTypeAlt = _h[0],
+        setSelectedAppTypeAlt = _h[1];
       if (!setSelectedAppType) {
         selectedAppType = selectedAppTypeAlt;
         setSelectedAppType = setSelectedAppTypeAlt;
       }
-      var showApps = function showApps(appType) {
+      var showApps = React.useCallback(function (appType) {
         setSelectedAppType(appType);
-      };
-      var showAppTypes = function showAppTypes() {
+      }, []);
+      var showAppTypes = React.useCallback(function () {
         return setSelectedAppType(null);
-      };
-      var populateAppTypeMap = function populateAppTypeMap() {
+      }, []);
+      var populateAppTypeMap = React.useCallback(function () {
         var newAppTypeMap = new Map();
+        // we'll put Other at the end
+        var otherApps = [];
         apps === null || apps === void 0 ? void 0 : apps.forEach(function (app) {
-          var appTypeName = app.logo_product_name;
           var children = createMenuItem(app.url, app.name, getInstanceStateText(app));
-          var appTypeApps = newAppTypeMap.get(appTypeName);
-          if (!appTypeApps) {
-            appTypeApps = [];
-            newAppTypeMap.set(appTypeName, appTypeApps);
+          var appTypeName = app.logo_product_name;
+          var appTypeApps;
+          if (appTypeName) {
+            appTypeApps = newAppTypeMap.get(appTypeName);
+            if (!appTypeApps) {
+              appTypeApps = [];
+              newAppTypeMap.set(appTypeName, appTypeApps);
+            }
+          } else {
+            appTypeApps = otherApps;
           }
           appTypeApps.push({
             children: children,
@@ -2486,7 +2503,16 @@
             height: 64
           });
         });
-        setAppTypeMap(newAppTypeMap);
+        var keys = Array.from(newAppTypeMap.keys()).sort();
+        var sortedAppTypeMap = new Map();
+        for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+          var appType = keys_1[_i];
+          sortedAppTypeMap.set(appType, newAppTypeMap.get(appType));
+        }
+        if (otherApps.length > 0) {
+          sortedAppTypeMap.set(noAppTypeLabel, otherApps);
+        }
+        setAppTypeMap(sortedAppTypeMap);
         var menuItems = [daiAppsHeaderMenuItem];
         if (platformConsoleUrl) {
           var children = createTopLevelMenuItem(platformConsoleUrl, getLogoForAppType('Platform'), 'Digital.ai Platform', !window.location.href.startsWith(platformConsoleUrl));
@@ -2497,9 +2523,9 @@
           });
         }
         var newAppTypeLabels = new Map();
-        newAppTypeMap.forEach(function (singleTypeApps, appTypeName) {
+        sortedAppTypeMap.forEach(function (singleTypeApps, appTypeName) {
           if ((singleTypeApps === null || singleTypeApps === void 0 ? void 0 : singleTypeApps.length) > 0) {
-            var logo = getLogoForAppType(appTypeName);
+            var logo = appTypeName === noAppTypeLabel ? null : getLogoForAppType(appTypeName);
             newAppTypeLabels.set(appTypeName, {
               logo: logo,
               singleTypeApps: singleTypeApps
@@ -2522,7 +2548,7 @@
         });
         setAppTypeMenuItems(menuItems);
         setAppTypeLabels(newAppTypeLabels);
-      };
+      }, [apps]);
       var emptyState = function emptyState() {
         var currentAppMenuItem = createTopLevelMenuItem(window.location.href, getLogoForAppType(activeApp.product), activeApp.name, false);
         setAppTypeMenuItems([daiAppsHeaderMenuItem, {

package/lib/components/app-switcher/AppSwitcher.d.ts

@@ -7,6 +7,7 @@ interface ActiveAppInfo {
 }
 interface CommonAppSwitcherProps extends CommonProps {
     activeApp: ActiveAppInfo;
+    noAppTypeLabel?: string;
     onClose?: (event: MouseEvent | KeyboardEvent) => void;
     yOffset?: number;
     zIndex?: number;
@@ -17,7 +18,7 @@ interface AppSwitcherViewProps extends CommonAppSwitcherProps {
     platformConsoleUrl?: string;
     selectedAppType: string;
 }
-export declare const DotAppSwitcherView: ({ activeApp, apps, className, platformConsoleUrl, onClose, open, selectedAppType, yOffset, zIndex, }: AppSwitcherViewProps) => JSX.Element;
+export declare const DotAppSwitcherView: ({ activeApp, apps, className, noAppTypeLabel, platformConsoleUrl, onClose, open, selectedAppType, yOffset, zIndex, }: AppSwitcherViewProps) => JSX.Element;
 interface AppSwitcherProps extends CommonAppSwitcherProps {
     accountId?: string;
     includePlatformConsole?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [