Merge pull request wso2#4364 from savindi7/sort-dynamic-connectors

Sort the other settings connector category to the end of the list
savindi7 · Oct 27, 2023 · 8612f0e · 8612f0e
2 parents dfc94e8 + 86d272d
commit 8612f0e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/apps/console/src/features/core/configs/routes.tsx b/apps/console/src/features/core/configs/routes.tsx
@@ -19,12 +19,13 @@
 import {
     ArrowRightToBracketPencilIcon,
     BoltIcon,
+    BuildingIcon,
     EnvelopeGearIcon,
     EnvelopeIcon,
     EnvelopeMagnifyingGlassIcon,
-    HierarchyIcon,
     LightbulbOnIcon,
     LinearNodesIcon,
+    NodesIcon,
     UserCircleDotIcon,
     UserGroupIcon
 } from "@oxygen-ui/react-icons";
@@ -204,9 +205,7 @@ export const getAppViewRoutes = (useExtendedRoutes: boolean = false): RouteInter
                         component: lazy(() => import("../../connections/pages/connections")),
                         exact: true,
                         icon: {
-                            icon: identityProviderConfig?.useNewConnectionsView
-                                ? getSidePanelIcons().connections
-                                : getSidePanelIcons().identityProviders
+                            icon: <NodesIcon />
                         },
                         id: "identityProviders",
                         name: identityProviderConfig?.useNewConnectionsView
@@ -375,7 +374,7 @@ export const getAppViewRoutes = (useExtendedRoutes: boolean = false): RouteInter
                         component: lazy(() => import("../../../features/organizations/pages/organizations")),
                         exact: true,
                         icon: {
-                            icon: <HierarchyIcon fill="black" />
+                            icon: <BuildingIcon />
                         },
                         id: "organizations",
                         name: "console:manage.features.sidePanel.organizations",
@@ -423,7 +422,7 @@ export const getAppViewRoutes = (useExtendedRoutes: boolean = false): RouteInter
                         }),
                         exact: true,
                         icon: {
-                            icon: <EnvelopeMagnifyingGlassIcon fill="black" />
+                            icon: <EnvelopeMagnifyingGlassIcon />
                         },
                         id: "organizationDiscovery",
                         name: "console:manage.features.sidePanel.emailDomainDiscovery",

diff --git a/apps/console/src/features/server-configurations/pages/connector-listing-page.tsx b/apps/console/src/features/server-configurations/pages/connector-listing-page.tsx
@@ -329,23 +329,43 @@ export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterfa
      * Get connector categories which generate the connector forms dynamically.
      */
     const getDynamicCategoryConnectors = (): ReactElement[] => {
+
+        // This sorting is done to move Other Settings to the end of the list. This implementation can be removed
+        // once the response if sorted from the backend.
+        let sortedConnectorCategories: GovernanceConnectorCategoryInterface[] = [];
+
         if (connectorCategories && Array.isArray(connectorCategories) && connectorCategories.length > 0) {
-            return connectorCategories.map((connectorCategory: GovernanceConnectorCategoryInterface, index: number) => (
-                <Grid xs={ 12 } lg={ 6 } key={ index }>
-                    <SettingsSection
-                        data-testid={ `${testId}-${connectorCategory?.id}` }
-                        description={ t(
-                            `console:manage.features.governanceConnectors.connectorCategories.${camelCase(
-                                connectorCategory.name
-                            )}.description`
-                        ) }
-                        icon={ () => resolveConnectorCategoryIcon(connectorCategory?.id) }
-                        header={ connectorCategory.name }
-                        onPrimaryActionClick={ () => handleConnectorCategoryAction(connectorCategory) }
-                        primaryAction={ t("common:configure") }
-                    />
-                </Grid>
-            ));
+
+            sortedConnectorCategories = [ ...connectorCategories ];
+
+            sortedConnectorCategories.push(sortedConnectorCategories.splice(sortedConnectorCategories.indexOf(
+                sortedConnectorCategories.find(
+                    (category: GovernanceConnectorCategoryInterface) =>
+                        category.id === ServerConfigurationsConstants.OTHER_SETTINGS_CONNECTOR_CATEGORY_ID
+                )), 1)[0]);
+
+        } else {
+            sortedConnectorCategories = null;
+        }
+
+        if (sortedConnectorCategories) {
+            return sortedConnectorCategories?.map(
+                (connectorCategory: GovernanceConnectorCategoryInterface, index: number) => (
+                    <Grid xs={ 12 } lg={ 6 } key={ index }>
+                        <SettingsSection
+                            data-testid={ `${testId}-${connectorCategory?.id}` }
+                            description={ t(
+                                `console:manage.features.governanceConnectors.connectorCategories.${camelCase(
+                                    connectorCategory.name
+                                )}.description`
+                            ) }
+                            icon={ () => resolveConnectorCategoryIcon(connectorCategory?.id) }
+                            header={ connectorCategory.name }
+                            onPrimaryActionClick={ () => handleConnectorCategoryAction(connectorCategory) }
+                            primaryAction={ t("common:configure") }
+                        />
+                    </Grid>
+                ));
         }
 
         return null;
@@ -410,16 +430,10 @@ export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterfa
                         ? renderLoadingPlaceholder()
                         : (
                             <Grid container rowSpacing={ 2 } columnSpacing={ 3 }>
-                                {
-                                    renderConnectors()
-                                }
                                 {
                                     serverConfigurationConfig.dynamicConnectors
                                         ? (
                                             <>
-                                                <Grid xs={ 12 } lg={ 6 }>
-                                                    <AdminAdvisoryBannerSection />
-                                                </Grid>
                                                 <Grid xs={ 12 } lg={ 6 }>
                                                     <SettingsSection
                                                         data-componentid={ "multi-attribute-login-section" }
@@ -435,6 +449,9 @@ export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterfa
                                                         primaryAction={ t("common:configure") }
                                                     />
                                                 </Grid>
+                                                <Grid xs={ 12 } lg={ 6 }>
+                                                    <AdminAdvisoryBannerSection />
+                                                </Grid>
                                             </>
                                         ) : (
                                             <>
@@ -485,7 +502,11 @@ export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterfa
                                                     <PrivateKeyJWTConfig/>
                                                 </Grid>
                                             </>
-                                        ) }
+                                        )
+                                }
+                                {
+                                    renderConnectors()
+                                }
                             </Grid>
                         )
                 }