fix bug where we didn't show platforms in order (#33428)

This fixes a bug where we don't show platforms in order as they appear in platformCategories. This is because the original list is coming from a different source (platforms.json) so we actually need to cross-reference the other list to get the correct position.

static/app/components/multiPlatformPicker.tsx

@@ -24,15 +24,39 @@ import EmptyMessage from 'sentry/views/settings/components/emptyMessage';
 
 const PLATFORM_CATEGORIES = [{id: 'all', name: t('All')}, ...categoryList] as const;
 
+// Category needs the all option while CategoryObj does not
+type Category = typeof PLATFORM_CATEGORIES[number]['id'];
+type CategoryObj = typeof categoryList[number];
+type Platform = CategoryObj['platforms'][number];
+
+// create a lookup table for each platform
+const indexByPlatformByCategory = {} as Record<
+  CategoryObj['id'],
+  Record<Platform, number>
+>;
+categoryList.forEach(category => {
+  const indexByPlatform = {} as Record<Platform, number>;
+  indexByPlatformByCategory[category.id] = indexByPlatform;
+  category.platforms.forEach((platform: Platform, index: number) => {
+    indexByPlatform[platform] = index;
+  });
+});
+
+const getIndexOfPlatformInCategory = (
+  category: CategoryObj['id'],
+  platform: PlatformIntegration
+) => {
+  const indexByPlatform = indexByPlatformByCategory[category];
+  return indexByPlatform[platform.id];
+};
+
 const isPopular = (platform: PlatformIntegration) =>
   popularPlatformCategories.includes(
     platform.id as typeof popularPlatformCategories[number]
   );
 
 const popularIndex = (platform: PlatformIntegration) =>
-  popularPlatformCategories.indexOf(
-    platform.id as typeof popularPlatformCategories[number]
-  );
+  getIndexOfPlatformInCategory('popular', platform);
 
 const PlatformList = styled('div')`
   display: grid;
@@ -41,8 +65,6 @@ const PlatformList = styled('div')`
   margin-bottom: ${space(2)};
 `;
 
-type Category = typeof PLATFORM_CATEGORIES[number]['id'];
-
 interface PlatformPickerProps {
   addPlatform: (key: PlatformKey) => void;
   organization: Organization;
@@ -86,12 +108,19 @@ function PlatformPicker(props: PlatformPickerProps) {
           // if both popular, maintain ordering from popular list
           return popularIndex(a) - popularIndex(b);
         }
+        // if one popular, that one shhould be first
         if (isPopular(a) !== isPopular(b)) {
           return isPopular(a) ? -1 : 1;
         }
+        // since the all list is coming from a different source (platforms.json)
+        // we can't go off the index of the item in platformCategories.tsx since there is no all list
+        return a.id.localeCompare(b.id);
       }
       // maintain ordering otherwise
-      return 0;
+      return (
+        getIndexOfPlatformInCategory(category, a) -
+        getIndexOfPlatformInCategory(category, b)
+      );
     };
 
     const filtered = platforms