feat(console): sort connectors (#2587)

packages/console/src/pages/Connectors/components/CreateForm/constants.ts

@@ -0,0 +1,12 @@
+export const featuredConnectorTargets = [
+  'google',
+  'apple',
+  'facebook',
+  'github',
+  'discord',
+  'wechat',
+  'alipay',
+  'kakao',
+  'naver',
+  'azuread',
+];

packages/console/src/pages/Connectors/components/CreateForm/index.tsx

@@ -16,6 +16,7 @@ import { getConnectorGroups } from '../../utils';
 import Guide from '../Guide';
 import PlatformSelector from './PlatformSelector';
 import * as styles from './index.module.scss';
+import { getConnectorOrder } from './utils';
 
 type Props = {
   isOpen: boolean;
@@ -56,7 +57,14 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
             existingConnectors.some(({ connectorId }) => connector.id === connectorId),
         })),
       }))
-      .filter(({ connectors }) => !connectors.every(({ added }) => added));
+      .filter(({ connectors }) => !connectors.every(({ added }) => added))
+      .slice()
+      .sort((connectorA, connectorB) => {
+        const orderA = getConnectorOrder(connectorA.target, connectorA.isStandard);
+        const orderB = getConnectorOrder(connectorB.target, connectorB.isStandard);
+
+        return orderA - orderB;
+      });
   }, [factories, type, existingConnectors]);
 
   const activeGroup = useMemo(

packages/console/src/pages/Connectors/components/CreateForm/utils.ts

@@ -0,0 +1,12 @@
+import { featuredConnectorTargets } from './constants';
+
+export const getConnectorOrder = (target: string, isStandard?: boolean): number => {
+  const order = featuredConnectorTargets.indexOf(target);
+
+  if (order === -1) {
+    // Standard connectors come last.
+    return isStandard ? featuredConnectorTargets.length + 1 : featuredConnectorTargets.length;
+  }
+
+  return order;
+};