From a908c07670532b0ca7f766065bb4653ce2376e6f Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Tue, 30 Mar 2021 19:48:10 +0900
Subject: [PATCH] feat(frontend): allow selecting multiple original languages

---
 package.json                                  |   2 +
 src/components/LanguageSelector/index.tsx     | 194 ++++++++++++++++++
 src/components/Settings/SettingsMain.tsx      |  27 +--
 .../UserGeneralSettings/index.tsx             |  48 +----
 src/i18n/locale/en.json                       |   3 +-
 src/styles/globals.css                        |  53 +++++
 src/types/custom.d.ts                         |   8 +
 yarn.lock                                     | 103 +++++++++-
 8 files changed, 367 insertions(+), 71 deletions(-)
 create mode 100644 src/components/LanguageSelector/index.tsx

diff --git a/package.json b/package.json
index 4efe95608..ba22fde61 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "react-intersection-observer": "^8.31.0",
     "react-intl": "5.13.5",
     "react-markdown": "^5.0.3",
+    "react-select": "^4.3.0",
     "react-spring": "^8.0.27",
     "react-toast-notifications": "^2.4.3",
     "react-transition-group": "^4.4.1",
@@ -99,6 +100,7 @@
     "@types/nodemailer": "^6.4.1",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "@types/react-select": "^4.0.13",
     "@types/react-toast-notifications": "^2.4.0",
     "@types/react-transition-group": "^4.4.1",
     "@types/secure-random-password": "^0.2.0",
diff --git a/src/components/LanguageSelector/index.tsx b/src/components/LanguageSelector/index.tsx
new file mode 100644
index 000000000..89392b319
--- /dev/null
+++ b/src/components/LanguageSelector/index.tsx
@@ -0,0 +1,194 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import dynamic from 'next/dynamic';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import type { OptionsType, OptionTypeBase } from 'react-select';
+import { Language } from '../../../server/lib/settings';
+import globalMessages from '../../i18n/globalMessages';
+
+const messages = defineMessages({
+  originalLanguageDefault: 'All Languages',
+  languageServerDefault: 'Default ({language})',
+});
+
+const Select = dynamic(() => import('react-select'), { ssr: false });
+
+type OptionType = {
+  value: string;
+  label: string;
+  isFixed?: boolean;
+};
+
+const selectStyles = {
+  multiValueLabel: (base: any, state: { data: { isFixed?: boolean } }) => {
+    return state.data.isFixed ? { ...base, paddingRight: 6 } : base;
+  },
+  multiValueRemove: (base: any, state: { data: { isFixed?: boolean } }) => {
+    return state.data.isFixed ? { ...base, display: 'none' } : base;
+  },
+};
+
+interface LanguageSelectorProps {
+  languages: Language[];
+  value?: string;
+  setFieldValue: (property: string, value: string) => void;
+  serverValue?: string;
+  isUserSettings?: boolean;
+}
+
+const LanguageSelector: React.FC<LanguageSelectorProps> = ({
+  languages,
+  value,
+  setFieldValue,
+  serverValue,
+  isUserSettings = false,
+}) => {
+  const intl = useIntl();
+
+  const defaultLanguageNameFallback = serverValue
+    ? languages.find((language) => language.iso_639_1 === serverValue)
+        ?.english_name ?? serverValue
+    : undefined;
+
+  const options: OptionType[] =
+    languages.map((language) => ({
+      label:
+        intl.formatDisplayName(language.iso_639_1, {
+          type: 'language',
+          fallback: 'none',
+        }) ?? language.english_name,
+      value: language.iso_639_1,
+    })) ?? [];
+
+  if (isUserSettings) {
+    options.unshift({
+      value: 'server',
+      label: intl.formatMessage(messages.languageServerDefault, {
+        language: serverValue
+          ? serverValue
+              .split('|')
+              .map(
+                (value) =>
+                  intl.formatDisplayName(value, {
+                    type: 'language',
+                    fallback: 'none',
+                  }) ?? defaultLanguageNameFallback
+              )
+              .reduce((prev, curr) =>
+                intl.formatMessage(globalMessages.delimitedlist, {
+                  a: prev,
+                  b: curr,
+                })
+              )
+          : intl.formatMessage(messages.originalLanguageDefault),
+      }),
+      isFixed: true,
+    });
+  }
+
+  options.unshift({
+    value: 'all',
+    label: intl.formatMessage(messages.originalLanguageDefault),
+    isFixed: true,
+  });
+
+  return (
+    <Select
+      options={options}
+      isMulti
+      className="react-select-container"
+      classNamePrefix="react-select"
+      value={
+        (isUserSettings && value === 'all') || (!isUserSettings && !value)
+          ? {
+              value: 'all',
+              label: intl.formatMessage(messages.originalLanguageDefault),
+              isFixed: true,
+            }
+          : (value === '' || !value || value === 'server') && isUserSettings
+          ? {
+              value: 'server',
+              label: intl.formatMessage(messages.languageServerDefault, {
+                language: serverValue
+                  ? serverValue
+                      .split('|')
+                      .map(
+                        (value) =>
+                          intl.formatDisplayName(value, {
+                            type: 'language',
+                            fallback: 'none',
+                          }) ?? defaultLanguageNameFallback
+                      )
+                      .reduce((prev, curr) =>
+                        intl.formatMessage(globalMessages.delimitedlist, {
+                          a: prev,
+                          b: curr,
+                        })
+                      )
+                  : intl.formatMessage(messages.originalLanguageDefault),
+              }),
+              isFixed: true,
+            }
+          : value?.split('|').map((code) => {
+              const matchedLanguage = languages.find(
+                (lang) => lang.iso_639_1 === code
+              );
+
+              if (!matchedLanguage) {
+                return undefined;
+              }
+
+              return {
+                label:
+                  intl.formatDisplayName(matchedLanguage.iso_639_1, {
+                    type: 'language',
+                    fallback: 'none',
+                  }) ?? matchedLanguage.english_name,
+                value: matchedLanguage.iso_639_1,
+              };
+            }) ?? undefined
+      }
+      onChange={(
+        value: OptionTypeBase | OptionsType<OptionType> | null,
+        options
+      ) => {
+        if (!Array.isArray(value)) {
+          return;
+        }
+
+        if (
+          (options &&
+            options.action === 'select-option' &&
+            options.option?.value === 'server') ||
+          value?.every(
+            (v: { value: string; label: string }) => v.value === 'server'
+          )
+        ) {
+          return setFieldValue('originalLanguage', '');
+        }
+
+        if (
+          (options &&
+            options.action === 'select-option' &&
+            options.option?.value === 'all') ||
+          value?.every(
+            (v: { value: string; label: string }) => v.value === 'all'
+          )
+        ) {
+          return setFieldValue('originalLanguage', isUserSettings ? 'all' : '');
+        }
+
+        setFieldValue(
+          'originalLanguage',
+          value
+            ?.map((lang) => lang.value)
+            .filter((v) => v !== 'all')
+            .join('|')
+        );
+      }}
+      styles={selectStyles}
+    />
+  );
+};
+
+export default LanguageSelector;
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 4b76806e0..b4a9c8fa7 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -12,6 +12,7 @@ import Badge from '../Common/Badge';
 import Button from '../Common/Button';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
+import LanguageSelector from '../LanguageSelector';
 import RegionSelector from '../RegionSelector';
 import CopyButton from './CopyButton';
 
@@ -46,7 +47,6 @@ const messages = defineMessages({
   validationApplicationTitle: 'You must provide an application title',
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
-  originalLanguageDefault: 'All Languages',
   partialRequestsEnabled: 'Allow Partial Series Requests',
 });
 
@@ -347,26 +347,11 @@ const SettingsMain: React.FC = () => {
                   </label>
                   <div className="form-input">
                     <div className="form-input-field">
-                      <Field
-                        as="select"
-                        id="originalLanguage"
-                        name="originalLanguage"
-                      >
-                        <option value="">
-                          {intl.formatMessage(messages.originalLanguageDefault)}
-                        </option>
-                        {sortedLanguages?.map((language) => (
-                          <option
-                            key={`language-key-${language.iso_639_1}`}
-                            value={language.iso_639_1}
-                          >
-                            {intl.formatDisplayName(language.iso_639_1, {
-                              type: 'language',
-                              fallback: 'none',
-                            }) ?? language.english_name}
-                          </option>
-                        ))}
-                      </Field>
+                      <LanguageSelector
+                        languages={sortedLanguages ?? []}
+                        setFieldValue={setFieldValue}
+                        value={values.originalLanguage}
+                      />
                     </div>
                   </div>
                 </div>
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index 542c45a07..435d2ed7f 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -15,6 +15,7 @@ import Badge from '../../../Common/Badge';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
 import PageTitle from '../../../Common/PageTitle';
+import LanguageSelector from '../../../LanguageSelector';
 import QuotaSelector from '../../../QuotaSelector';
 import RegionSelector from '../../../RegionSelector';
 
@@ -101,11 +102,6 @@ const UserGeneralSettings: React.FC = () => {
     return <Error statusCode={500} />;
   }
 
-  const defaultLanguageNameFallback =
-    languages.find(
-      (language) => language.iso_639_1 === currentSettings.originalLanguage
-    )?.english_name ?? currentSettings.originalLanguage;
-
   return (
     <>
       <PageTitle
@@ -237,41 +233,13 @@ const UserGeneralSettings: React.FC = () => {
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
-                    <Field
-                      as="select"
-                      id="originalLanguage"
-                      name="originalLanguage"
-                    >
-                      <option value="">
-                        {intl.formatMessage(messages.languageServerDefault, {
-                          language: currentSettings.originalLanguage
-                            ? intl.formatDisplayName(
-                                currentSettings.originalLanguage,
-                                {
-                                  type: 'language',
-                                  fallback: 'none',
-                                }
-                              ) ?? defaultLanguageNameFallback
-                            : intl.formatMessage(
-                                messages.originalLanguageDefault
-                              ),
-                        })}
-                      </option>
-                      <option value="all">
-                        {intl.formatMessage(messages.originalLanguageDefault)}
-                      </option>
-                      {sortedLanguages?.map((language) => (
-                        <option
-                          key={`language-key-${language.iso_639_1}`}
-                          value={language.iso_639_1}
-                        >
-                          {intl.formatDisplayName(language.iso_639_1, {
-                            type: 'language',
-                            fallback: 'none',
-                          }) ?? language.english_name}
-                        </option>
-                      ))}
-                    </Field>
+                    <LanguageSelector
+                      languages={sortedLanguages ?? []}
+                      setFieldValue={setFieldValue}
+                      serverValue={currentSettings.originalLanguage}
+                      value={values.originalLanguage}
+                      isUserSettings
+                    />
                   </div>
                 </div>
               </div>
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 1a8f34e70..f23b99420 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -32,6 +32,8 @@
   "components.Discover.upcoming": "Upcoming Movies",
   "components.Discover.upcomingmovies": "Upcoming Movies",
   "components.Discover.upcomingtv": "Upcoming Series",
+  "components.LanguageSelector.languageServerDefault": "Default ({language})",
+  "components.LanguageSelector.originalLanguageDefault": "All Languages",
   "components.Layout.LanguagePicker.changelanguage": "Change Language",
   "components.Layout.SearchInput.searchPlaceholder": "Search Movies & TV",
   "components.Layout.Sidebar.dashboard": "Discover",
@@ -524,7 +526,6 @@
   "components.Settings.notificationsettingsfailed": "Notification settings failed to save.",
   "components.Settings.notificationsettingssaved": "Notification settings saved successfully!",
   "components.Settings.notrunning": "Not Running",
-  "components.Settings.originalLanguageDefault": "All Languages",
   "components.Settings.originallanguage": "Discover Language",
   "components.Settings.originallanguageTip": "Filter content by original language",
   "components.Settings.partialRequestsEnabled": "Allow Partial Series Requests",
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 22e488470..9e0dca53b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -329,3 +329,56 @@ code {
 input[type='search']::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
+
+.react-select-container {
+  @apply w-full;
+}
+
+.react-select-container .react-select__control {
+  @apply text-white bg-gray-700 border border-gray-500 rounded-md hover:border-gray-500;
+}
+
+.react-select-container .react-select__control--is-focused {
+  @apply text-white bg-gray-700 border border-gray-500 rounded-md shadow;
+}
+
+.react-select-container .react-select__menu {
+  @apply text-gray-300 bg-gray-700;
+}
+
+.react-select-container .react-select__option--is-focused {
+  @apply text-white bg-gray-600;
+}
+
+.react-select-container .react-select__indicator-separator {
+  @apply bg-gray-500;
+}
+
+.react-select-container .react-select__indicator {
+  @apply text-gray-500;
+}
+
+.react-select-container .react-select__placeholder {
+  @apply text-gray-400;
+}
+
+.react-select-container .react-select__multi-value {
+  @apply bg-gray-800 border border-gray-500 rounded-md;
+}
+
+.react-select-container .react-select__multi-value__label {
+  @apply text-white;
+}
+
+.react-select-container .react-select__multi-value__remove {
+  @apply cursor-pointer rounded-r-md hover:bg-red-700 hover:text-red-100;
+}
+
+.react-select-container .react-select__input {
+  @apply text-base text-white border-none shadow-sm;
+}
+
+.react-select-container .react-select__input input:focus {
+  @apply text-white border-none;
+  box-shadow: none;
+}
diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts
index 9930ccce9..3c6a7d37f 100644
--- a/src/types/custom.d.ts
+++ b/src/types/custom.d.ts
@@ -22,3 +22,11 @@ declare module '*.png' {
   const content: any;
   export default content;
 }
+
+declare module '*.css' {
+  interface IClassNames {
+    [className: string]: string;
+  }
+  const classNames: IClassNames;
+  export = classNames;
+}
diff --git a/yarn.lock b/yarn.lock
index 3e9f15cf6..ed1e73e35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -983,7 +983,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.13.10":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
   integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
@@ -1266,6 +1266,17 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
+"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3":
+  version "11.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
+  integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
+
 "@emotion/core@^10.0.14":
   version "10.0.35"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
@@ -1287,7 +1298,7 @@
     "@emotion/utils" "0.11.3"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/hash@0.8.0":
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
@@ -1297,6 +1308,24 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.1.1":
+  version "11.1.5"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
+  integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "@emotion/cache" "^11.1.3"
+    "@emotion/serialize" "^1.0.0"
+    "@emotion/sheet" "^1.0.1"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -1308,17 +1337,33 @@
     "@emotion/utils" "0.11.3"
     csstype "^2.5.7"
 
+"@emotion/serialize@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.1.tgz#322cdebfdbb5a88946f17006548191859b9b0855"
+  integrity sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
   integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
 
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
+  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+
 "@emotion/stylis@0.8.5":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -1328,7 +1373,12 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
   integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
 
-"@emotion/weak-memoize@0.2.5":
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
@@ -2297,13 +2347,23 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
-"@types/react-dom@^17.0.3":
+"@types/react-dom@*", "@types/react-dom@^17.0.3":
   version "17.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.3.tgz#7fdf37b8af9d6d40127137865bb3fff8871d7ee1"
   integrity sha512-4NnJbCeWE+8YBzupn/YrJxZ8VnjcJq5iR1laqQ1vkpQgBiA7bwk0Rp24fxsdNinzJY2U+HHS4dJJDPdoMjdJ7w==
   dependencies:
     "@types/react" "*"
 
+"@types/react-select@^4.0.13":
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-4.0.13.tgz#8d2c41a0df7fbf67ab0b995797b0e9b4e6b38cde"
+  integrity sha512-rXYEc565IzzjgQzs9C0YCFxV/QajMZnCHG5QwRQ5BZMfH0Lj90VI/xohawemRkD46IvpaLRbO6xzSquJlgBGUA==
+  dependencies:
+    "@emotion/serialize" "^1.0.0"
+    "@types/react" "*"
+    "@types/react-dom" "*"
+    "@types/react-transition-group" "*"
+
 "@types/react-toast-notifications@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-toast-notifications/-/react-toast-notifications-2.4.0.tgz#0ca0732cfae5a6ef5939a676fffac6e64c78bc25"
@@ -2311,7 +2371,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.4.1":
+"@types/react-transition-group@*", "@types/react-transition-group@^4.4.1":
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1"
   integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==
@@ -6767,7 +6827,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8736,7 +8796,7 @@ mem@^1.1.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-memoize-one@^5.1.1:
+memoize-one@^5.0.0, memoize-one@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
@@ -11330,6 +11390,13 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-input-autosize@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
+  integrity sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-intersection-observer@^8.31.0:
   version "8.31.0"
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz#0ed21aaf93c4c0475b22b0ccaba6169076d01605"
@@ -11376,6 +11443,19 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-select@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.0.tgz#6bde634ae7a378b49f3833c85c126f533483fa2e"
+  integrity sha512-SBPD1a3TJqE9zoI/jfOLCAoLr/neluaeokjOixr3zZ1vHezkom8K0A9J4QG9IWDqIDE9K/Mv+0y1GjidC2PDtQ==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.0.0"
+    "@emotion/react" "^11.1.1"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^3.0.0"
+    react-transition-group "^4.3.0"
+
 react-spring@^8.0.27:
   version "8.0.27"
   resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
@@ -11392,7 +11472,7 @@ react-toast-notifications@^2.4.3:
     "@emotion/core" "^10.0.14"
     react-transition-group "^4.4.1"
 
-react-transition-group@^4.4.1:
+react-transition-group@^4.3.0, react-transition-group@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
   integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
@@ -12932,6 +13012,11 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+stylis@^4.0.3:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.9.tgz#ae3d5283aa439225cf79dd2d0cf46f8bfd4ad393"
+  integrity sha512-ci7pEFNVW3YJiWEzqPOMsAjY6kgraZ3ZgBfQ5HYbNtLJEsQ0G46ejWZpfSSCp/FaSiCSGGhzL9O2lN+2cB6ong==
+
 stylis@^4.0.6:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.7.tgz#412a90c28079417f3d27c028035095e4232d2904"