Fixed listing flows alphabetically in addition to by type - #2765 (#3960)

* fixed listing flows alphabetically in addition to by type

* Apply suggestions from code review

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
agagancarczyk 2022-12-08 09:30:44 +00:00 committed by GitHub
parent 1f3b08a605
commit ca03f50093
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -38,6 +38,7 @@ import {
import { AuthenticationTab, toAuthentication } from "./routes/Authentication"; import { AuthenticationTab, toAuthentication } from "./routes/Authentication";
import { addTrailingSlash } from "../util"; import { addTrailingSlash } from "../util";
import { getAuthorizationHeaders } from "../utils/getAuthorizationHeaders"; import { getAuthorizationHeaders } from "../utils/getAuthorizationHeaders";
import useLocaleSort, { mapByKey } from "../utils/useLocaleSort";
import "./authentication-section.css"; import "./authentication-section.css";
@ -64,7 +65,7 @@ export default function AuthenticationSection() {
const [key, setKey] = useState(0); const [key, setKey] = useState(0);
const refresh = () => setKey(key + 1); const refresh = () => setKey(key + 1);
const { addAlert, addError } = useAlerts(); const { addAlert, addError } = useAlerts();
const localeSort = useLocaleSort();
const [selectedFlow, setSelectedFlow] = useState<AuthenticationType>(); const [selectedFlow, setSelectedFlow] = useState<AuthenticationType>();
const [open, toggleOpen] = useToggle(); const [open, toggleOpen] = useToggle();
const [bindFlowOpen, toggleBindFlow] = useToggle(); const [bindFlowOpen, toggleBindFlow] = useToggle();
@ -81,7 +82,14 @@ export default function AuthenticationSection() {
); );
const flows = await flowsRequest.json(); const flows = await flowsRequest.json();
return sortBy(flows as AuthenticationType[], (flow) => flow.usedBy?.type); if (!flows) {
return [];
}
return sortBy(
localeSort<AuthenticationType>(flows, mapByKey("alias")),
(flow) => flow.usedBy?.type
);
}; };
const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({ const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({