Fix order dialogs (#2922)

src/identity-providers/IdentityProvidersSection.tsx

@@ -48,7 +48,7 @@ export default function IdentityProvidersSection() {
   const { realm } = useRealm();
   const history = useHistory();
   const [key, setKey] = useState(0);
-  const refresh = () => setKey(new Date().getTime());
+  const refresh = () => setKey(key + 1);
 
   const [addProviderOpen, setAddProviderOpen] = useState(false);
   const [manageDisplayDialog, setManageDisplayDialog] = useState(false);
@@ -69,13 +69,11 @@ export default function IdentityProvidersSection() {
       return provider.identityProviders!;
     },
     (providers) => {
-      setProviders(providers);
+      setProviders(sortBy(providers, ["config.guiOrder", "alias"]));
     },
-    []
+    [key]
   );
 
-  const loader = () => Promise.resolve(sortBy(providers, "alias"));
-
   const DetailLink = (identityProvider: IdentityProviderRepresentation) => (
     <Link
       key={identityProvider.providerId}
@@ -160,7 +158,10 @@ export default function IdentityProvidersSection() {
       <DeleteConfirm />
       {manageDisplayDialog && (
         <ManageOrderDialog
-          onClose={() => setManageDisplayDialog(false)}
+          onClose={() => {
+            setManageDisplayDialog(false);
+            refresh();
+          }}
           providers={providers.filter((p) => p.enabled)}
         />
       )}
@@ -212,8 +213,7 @@ export default function IdentityProvidersSection() {
         )}
         {providers.length !== 0 && (
           <KeycloakDataTable
-            key={key}
+            loader={providers}
-            loader={loader}
             ariaLabelKey="common:identityProviders"
             searchPlaceholderKey="identity-providers:searchForProvider"
             toolbarItem={

src/identity-providers/ManageOrderDialog.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { sortBy } from "lodash-es";
 import {
-  AlertVariant,
   Button,
   ButtonVariant,
   DataList,
@@ -69,18 +68,20 @@ export const ManageOrderDialog = ({
           id="modal-confirm"
           data-testid="confirm"
           key="confirm"
-          onClick={() => {
+          onClick={async () => {
-            order.map(async (alias, index) => {
+            const updates = order.map((alias, index) => {
               const provider = providers.find((p) => p.alias === alias)!;
               provider.config!.guiOrder = index;
-              try {
+              return adminClient.identityProviders.update({ alias }, provider);
-                await adminClient.identityProviders.update({ alias }, provider);
-                addAlert(t("orderChangeSuccess"), AlertVariant.success);
-              } catch (error) {
-                addError("identity-providers:orderChangeError", error);
-              }
             });
 
+            try {
+              await Promise.all(updates);
+              addAlert(t("orderChangeSuccess"));
+            } catch (error) {
+              addError("identity-providers:orderChangeError", error);
+            }
+
             onClose();
           }}
         >
@@ -111,28 +112,23 @@ export const ManageOrderDialog = ({
         onDragCancel={onDragCancel}
         itemOrder={order}
       >
-        {sortBy(providers, "config.guiOrder").map((provider) => (
+        {sortBy(providers, "config.guiOrder", "alias").map((provider) => (
           <DataListItem
-            aria-labelledby={provider.alias}
+            aria-label={provider.alias}
-            id={`${provider.alias}-item`}
+            id={provider.alias}
             key={provider.alias}
           >
             <DataListItemRow>
               <DataListControl>
-                <DataListDragButton
+                <DataListDragButton aria-label={t("manageOrderItemAria")} />
-                  aria-label="Reorder"
-                  aria-labelledby={provider.alias}
-                  aria-describedby={t("manageOrderItemAria")}
-                  aria-pressed="false"
-                />
               </DataListControl>
               <DataListItemCells
                 dataListCells={[
                   <DataListCell
-                    key={`${provider.alias}-cell`}
+                    key={provider.alias}
                     data-testid={provider.alias}
                   >
-                    <span id={provider.alias}>{provider.alias}</span>
+                    {provider.alias}
                   </DataListCell>,
                 ]}
               />

src/user-federation/ManagePriorityDialog.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { sortBy } from "lodash-es";
 import {
-  AlertVariant,
   Button,
   ButtonVariant,
   DataList,
@@ -68,19 +67,23 @@ export const ManagePriorityDialog = ({
         <Button
           id="modal-confirm"
           key="confirm"
-          onClick={() => {
+          onClick={async () => {
-            order.map(async (name, index) => {
+            const updates = order.map((name, index) => {
               const component = components!.find((c) => c.name === name)!;
               component.config!.priority = [index.toString()];
-              try {
+              return adminClient.components.update(
-                const id = component.id!;
+                { id: component.id! },
-                await adminClient.components.update({ id }, component);
+                component
-                addAlert(t("orderChangeSuccess"), AlertVariant.success);
+              );
-              } catch (error) {
-                addError("orderChangeError", error);
-              }
             });
 
+            try {
+              await Promise.all(updates);
+              addAlert(t("orderChangeSuccess"));
+            } catch (error) {
+              addError("orderChangeError", error);
+            }
+
             onClose();
           }}
         >
@@ -110,28 +113,23 @@ export const ManagePriorityDialog = ({
         onDragCancel={onDragCancel}
         itemOrder={order}
       >
-        {sortBy(components, "config.priority").map((component) => (
+        {sortBy(components, "config.priority", "name").map((component) => (
           <DataListItem
-            aria-labelledby={component.name}
+            aria-label={component.name}
-            id={`${component.name}-item`}
+            id={component.name}
             key={component.name}
           >
             <DataListItemRow>
               <DataListControl>
-                <DataListDragButton
+                <DataListDragButton aria-label={t("manageOrderItemAria")} />
-                  aria-label="Reorder"
-                  aria-labelledby={component.name}
-                  aria-describedby={t("manageOrderItemAria")}
-                  aria-pressed="false"
-                />
               </DataListControl>
               <DataListItemCells
                 dataListCells={[
                   <DataListCell
-                    key={`${component.name}-cell`}
+                    key={component.name}
                     data-testid={component.name}
                   >
-                    <span id={component.name}>{component.name}</span>
+                    {component.name}
                   </DataListCell>,
                 ]}
               />