libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Fix order dialogs (#2922)

Browse source
This commit is contained in:
Erik Jan de Wit 2022-07-06 12:31:05 +02:00 committed by GitHub
parent 6caa64466e
commit d8d55fe391
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/identity-providers/IdentityProvidersSection.tsx
View file

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

30
src/identity-providers/ManageOrderDialog.tsx
View file

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

34
src/user-federation/ManagePriorityDialog.tsx
View file

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