add sorting to selects where it makes sense (#298)

Author: siren

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/EnumSelect.tsx

@@ -17,6 +17,7 @@ const EnumSelect = ({
   value,
   type,
   errorText,
+  sort = false,
 }: {
   id: string;
   label: string;
@@ -27,12 +28,19 @@ const EnumSelect = ({
   onChange: (value: string) => void;
   type: { [key: string]: string };
   errorText?: string;
+  sort?: boolean;
 }): JSX.Element => {
   const { t } = useTranslation();
+
   const options: OptionType[] = Object.keys(type).map((key) => ({
     value: type[key],
     label: t(`${id}.${type[key]}`),
   }));
+  if (sort) {
+    options.sort((a, b) =>
+      a.label.toLowerCase().localeCompare(b.label.toLowerCase())
+    );
+  }
 
   return (
     <Select

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/ReservationUnitEditor.tsx

@@ -2,7 +2,6 @@ import { useMutation, useQuery } from "@apollo/client";
 import {
   Accordion,
   Checkbox,
-  Combobox,
   Fieldset,
   Link,
   Notification,
@@ -74,6 +73,7 @@ import {
   UPDATE_RESERVATION_UNIT,
 } from "./queries";
 import FormErrorSummary from "../../../common/FormErrorSummary";
+import SortedCompobox from "./SortedCompobox";
 
 const bufferTimeOptions = [
   { value: 900, label: "15 minuuttia" },
@@ -567,7 +567,7 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                     );
                   })}
                   <Normal>
-                    <Combobox
+                    <SortedCompobox
                       id="spacePks"
                       multiselect
                       required
@@ -595,7 +595,7 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                     />
                   </Normal>
                   <Normal>
-                    <Combobox
+                    <SortedCompobox
                       id="resourcePks"
                       multiselect
                       label={t("ReservationUnitEditor.label.resourcePks")}
@@ -687,6 +687,7 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                 <EditorGrid>
                   <Normal>
                     <Select
+                      sort
                       required
                       id="reservationUnitTypePk"
                       label={t(
@@ -711,7 +712,8 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                     />
                   </Normal>
                   <Normal>
-                    <Combobox
+                    <SortedCompobox
+                      sort
                       multiselect
                       label={t("ReservationUnitEditor.purposesLabel")}
                       placeholder={t(
@@ -737,7 +739,8 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                     />
                   </Normal>
                   <Normal>
-                    <Combobox
+                    <SortedCompobox
+                      sort
                       multiselect
                       label={t("ReservationUnitEditor.equipmentsLabel")}
                       placeholder={t(
@@ -1051,6 +1054,7 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                   <Normal>
                     <Select
                       id="metadataSetPk"
+                      sort
                       required
                       options={state.metadataOptions}
                       label={t("ReservationUnitEditor.label.metadataSetPk")}
@@ -1096,6 +1100,7 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                   </Wide>
                   <Wide>
                     <EnumSelect
+                      sort
                       id="authentication"
                       required
                       value={state.reservationUnitEdit.authentication || "WEAK"}
@@ -1257,6 +1262,7 @@ const ReservationUnitEditor = (): JSX.Element | null => {
                       return (
                         <Normal>
                           <Select
+                            sort
                             id={name}
                             key={name}
                             label={t(`ReservationUnitEditor.label.${propName}`)}

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/Select.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { memoize } from "lodash";
 import { Select as HDSSelect } from "hds-react";
 import { OptionType } from "../../../common/types";
 
@@ -21,6 +22,7 @@ const Select = ({
   placeholder,
   helper,
   errorText,
+  sort = false,
 }: {
   id: string;
   label: string;
@@ -31,13 +33,24 @@ const Select = ({
   placeholder?: string;
   helper?: string;
   errorText?: string;
+  sort?: boolean;
 }): JSX.Element => {
+  const sortedOpts = memoize((originalOptions) => {
+    const opts = [...originalOptions];
+    if (sort) {
+      opts.sort((a, b) =>
+        a.label.toLowerCase().localeCompare(b.label.toLowerCase())
+      );
+    }
+    return opts;
+  })(options);
+
   return (
     <HDSSelect
       id={id}
       label={label}
       placeholder={placeholder}
-      options={options}
+      options={sortedOpts}
       required={required}
       onChange={(e: OptionType) => {
         if (typeof e.value !== "undefined") {

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/SortedCompobox.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import memoize from "lodash/memoize";
+import { ComboboxProps, Combobox } from "hds-react";
+import { OptionType } from "../../../common/types";
+
+const SortedCompobox = (
+  props: ComboboxProps<OptionType> & { sort?: boolean }
+): JSX.Element => {
+  const sortedOpts = memoize((originalOptions) => {
+    const opts = [...originalOptions];
+    if (props.sort) {
+      opts.sort((a, b) =>
+        a.label.toLowerCase().localeCompare(b.label.toLowerCase())
+      );
+    }
+    return opts;
+  })(props.options);
+
+  return <Combobox {...props} options={sortedOpts} />;
+};
+export default SortedCompobox;