From 6b26188d888a1f80bd36a1968e41333bab2af794 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Thu, 6 May 2021 22:33:11 -0400
Subject: [PATCH] fix(ui): hide advanced request options when there is only one
 choice (#1591)

* refactor: remove unnecessary elements/indentation

* fix(ui): hide advanced request options when there is only one choice
---
 .../RequestModal/AdvancedRequester/index.tsx  | 292 +++++++++---------
 src/i18n/locale/en.json                       |   2 +-
 2 files changed, 150 insertions(+), 144 deletions(-)

diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx
index 8ed0adf4..614da3a8 100644
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -26,7 +26,7 @@ type OptionType = {
 const Select = dynamic(() => import('react-select'), { ssr: false });
 
 const messages = defineMessages({
-  advancedoptions: 'Advanced Options',
+  advancedoptions: 'Advanced',
   destinationserver: 'Destination Server',
   qualityprofile: 'Quality Profile',
   rootfolder: 'Root Folder',
@@ -276,9 +276,9 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
       </div>
       <div className="p-4 bg-gray-600 rounded-md shadow">
         {!!data && selectedServer !== null && (
-          <>
-            <div className="flex flex-col items-center justify-between md:flex-row">
-              <div className="flex-grow flex-shrink-0 w-full mb-2 md:w-1/4 md:pr-4 md:mb-0">
+          <div className="flex flex-col md:flex-row">
+            {data.filter((server) => server.is4k === is4k).length > 1 && (
+              <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
                 <label htmlFor="server">
                   {intl.formatMessage(messages.destinationserver)}
                 </label>
@@ -288,7 +288,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   value={selectedServer}
                   onChange={(e) => setSelectedServer(Number(e.target.value))}
                   onBlur={(e) => setSelectedServer(Number(e.target.value))}
-                  className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                  className="bg-gray-800 border-gray-700"
                 >
                   {data
                     .filter((server) => server.is4k === is4k)
@@ -306,7 +306,11 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                     ))}
                 </select>
               </div>
-              <div className="flex-grow flex-shrink-0 w-full mb-2 md:w-1/4 md:pr-4 md:mb-0">
+            )}
+            {(isValidating ||
+              !serverData ||
+              serverData.profiles.length > 1) && (
+              <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
                 <label htmlFor="profile">
                   {intl.formatMessage(messages.qualityprofile)}
                 </label>
@@ -316,7 +320,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   value={selectedProfile}
                   onChange={(e) => setSelectedProfile(Number(e.target.value))}
                   onBlur={(e) => setSelectedProfile(Number(e.target.value))}
-                  className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                  className="bg-gray-800 border-gray-700"
                   disabled={isValidating || !serverData}
                 >
                   {(isValidating || !serverData) && (
@@ -346,11 +350,11 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                     ))}
                 </select>
               </div>
-              <div
-                className={`flex-grow flex-shrink-0 w-full mb-2 md:w-1/4 md:mb-0 ${
-                  type === 'tv' ? 'md:pr-4' : ''
-                }`}
-              >
+            )}
+            {(isValidating ||
+              !serverData ||
+              serverData.rootFolders.length > 1) && (
+              <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
                 <label htmlFor="folder">
                   {intl.formatMessage(messages.rootfolder)}
                 </label>
@@ -360,7 +364,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   value={selectedFolder}
                   onChange={(e) => setSelectedFolder(e.target.value)}
                   onBlur={(e) => setSelectedFolder(e.target.value)}
-                  className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                  className="bg-gray-800 border-gray-700"
                   disabled={isValidating || !serverData}
                 >
                   {(isValidating || !serverData) && (
@@ -399,8 +403,12 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                     ))}
                 </select>
               </div>
-              {type === 'tv' && (
-                <div className="flex-grow flex-shrink-0 w-full mb-2 md:w-1/4 md:mb-0">
+            )}
+            {type === 'tv' &&
+              (isValidating ||
+                !serverData ||
+                (serverData.languageProfiles ?? []).length > 1) && (
+                <div className="flex-grow flex-shrink-0 w-full mb-3 md:w-1/4 md:pr-4 last:pr-0">
                   <label htmlFor="language">
                     {intl.formatMessage(messages.languageprofile)}
                   </label>
@@ -414,7 +422,7 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                     onBlur={(e) =>
                       setSelectedLanguage(parseInt(e.target.value))
                     }
-                    className="block w-full py-2 pl-3 pr-10 mt-1 text-base leading-6 text-white transition duration-150 ease-in-out bg-gray-800 border-gray-700 rounded-md form-select focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5"
+                    className="bg-gray-800 border-gray-700"
                     disabled={isValidating || !serverData}
                   >
                     {(isValidating || !serverData) && (
@@ -447,147 +455,145 @@ const AdvancedRequester: React.FC<AdvancedRequesterProps> = ({
                   </select>
                 </div>
               )}
-            </div>
-          </>
-        )}
-        {!!data && selectedServer !== null && (
-          <div className="mt-0 sm:mt-2">
-            <label htmlFor="tags">{intl.formatMessage(messages.tags)}</label>
-            <Select
-              name="tags"
-              options={(serverData?.tags ?? []).map((tag) => ({
-                label: tag.label,
-                value: tag.id,
-              }))}
-              isMulti
-              isDisabled={isValidating || !serverData}
-              placeholder={
-                isValidating || !serverData
-                  ? intl.formatMessage(globalMessages.loading)
-                  : intl.formatMessage(messages.selecttags)
-              }
-              className="react-select-container react-select-container-dark"
-              classNamePrefix="react-select"
-              value={selectedTags.map((tagId) => {
-                const foundTag = serverData?.tags.find(
-                  (tag) => tag.id === tagId
-                );
-                return {
-                  value: foundTag?.id,
-                  label: foundTag?.label,
-                };
-              })}
-              onChange={(
-                value: OptionTypeBase | OptionsType<OptionType> | null
-              ) => {
-                if (!Array.isArray(value)) {
-                  return;
-                }
-                setSelectedTags(value?.map((option) => option.value));
-              }}
-              noOptionsMessage={() => intl.formatMessage(messages.notagoptions)}
-            />
           </div>
         )}
+        {selectedServer !== null &&
+          (isValidating || !serverData || !!serverData?.tags?.length) && (
+            <div className="mb-2">
+              <label htmlFor="tags">{intl.formatMessage(messages.tags)}</label>
+              <Select
+                name="tags"
+                options={(serverData?.tags ?? []).map((tag) => ({
+                  label: tag.label,
+                  value: tag.id,
+                }))}
+                isMulti
+                isDisabled={isValidating || !serverData}
+                placeholder={
+                  isValidating || !serverData
+                    ? intl.formatMessage(globalMessages.loading)
+                    : intl.formatMessage(messages.selecttags)
+                }
+                className="react-select-container react-select-container-dark"
+                classNamePrefix="react-select"
+                value={selectedTags.map((tagId) => {
+                  const foundTag = serverData?.tags.find(
+                    (tag) => tag.id === tagId
+                  );
+                  return {
+                    value: foundTag?.id,
+                    label: foundTag?.label,
+                  };
+                })}
+                onChange={(
+                  value: OptionTypeBase | OptionsType<OptionType> | null
+                ) => {
+                  if (!Array.isArray(value)) {
+                    return;
+                  }
+                  setSelectedTags(value?.map((option) => option.value));
+                }}
+                noOptionsMessage={() =>
+                  intl.formatMessage(messages.notagoptions)
+                }
+              />
+            </div>
+          )}
         {hasPermission([Permission.MANAGE_REQUESTS, Permission.MANAGE_USERS]) &&
           selectedUser && (
-            <div className="mt-2 first:mt-0">
-              <Listbox
-                as="div"
-                value={selectedUser}
-                onChange={(value) => setSelectedUser(value)}
-                className="space-y-1"
-              >
-                {({ open }) => (
-                  <>
-                    <Listbox.Label>
-                      {intl.formatMessage(messages.requestas)}
-                    </Listbox.Label>
-                    <div className="relative">
-                      <span className="inline-block w-full rounded-md shadow-sm">
-                        <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-800 border border-gray-700 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
-                          <span className="flex items-center">
-                            <img
-                              src={selectedUser.avatar}
-                              alt=""
-                              className="flex-shrink-0 w-6 h-6 rounded-full"
-                            />
-                            <span className="block ml-3">
-                              {selectedUser.displayName}
-                            </span>
-                            <span className="ml-1 text-gray-400 truncate">
-                              ({selectedUser.email})
-                            </span>
+            <Listbox
+              as="div"
+              value={selectedUser}
+              onChange={(value) => setSelectedUser(value)}
+              className="space-y-1"
+            >
+              {({ open }) => (
+                <>
+                  <Listbox.Label>
+                    {intl.formatMessage(messages.requestas)}
+                  </Listbox.Label>
+                  <div className="relative">
+                    <span className="inline-block w-full rounded-md shadow-sm">
+                      <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-800 border border-gray-700 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
+                        <span className="flex items-center">
+                          <img
+                            src={selectedUser.avatar}
+                            alt=""
+                            className="flex-shrink-0 w-6 h-6 rounded-full"
+                          />
+                          <span className="block ml-3">
+                            {selectedUser.displayName}
                           </span>
-                          <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
-                            <ChevronDownIcon className="w-5 h-5" />
+                          <span className="ml-1 text-gray-400 truncate">
+                            ({selectedUser.email})
                           </span>
-                        </Listbox.Button>
-                      </span>
+                        </span>
+                        <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
+                          <ChevronDownIcon className="w-5 h-5" />
+                        </span>
+                      </Listbox.Button>
+                    </span>
 
-                      <Transition
-                        show={open}
-                        enter="transition ease-in duration-300"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="transition ease-in duration-100"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0"
-                        className="w-full mt-1 bg-gray-800 rounded-md shadow-lg"
+                    <Transition
+                      show={open}
+                      enter="transition ease-in duration-300"
+                      enterFrom="opacity-0"
+                      enterTo="opacity-100"
+                      leave="transition ease-in duration-100"
+                      leaveFrom="opacity-100"
+                      leaveTo="opacity-0"
+                      className="w-full mt-1 bg-gray-800 rounded-md shadow-lg"
+                    >
+                      <Listbox.Options
+                        static
+                        className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
                       >
-                        <Listbox.Options
-                          static
-                          className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
-                        >
-                          {userData?.results.map((user) => (
-                            <Listbox.Option key={user.id} value={user}>
-                              {({ selected, active }) => (
-                                <div
+                        {userData?.results.map((user) => (
+                          <Listbox.Option key={user.id} value={user}>
+                            {({ selected, active }) => (
+                              <div
+                                className={`${
+                                  active
+                                    ? 'text-white bg-indigo-600'
+                                    : 'text-gray-300'
+                                } cursor-default select-none relative py-2 pl-8 pr-4`}
+                              >
+                                <span
                                   className={`${
-                                    active
-                                      ? 'text-white bg-indigo-600'
-                                      : 'text-gray-300'
-                                  } cursor-default select-none relative py-2 pl-8 pr-4`}
+                                    selected ? 'font-semibold' : 'font-normal'
+                                  } flex items-center`}
                                 >
+                                  <img
+                                    src={user.avatar}
+                                    alt=""
+                                    className="flex-shrink-0 w-6 h-6 rounded-full"
+                                  />
+                                  <span className="flex-shrink-0 block ml-3">
+                                    {user.displayName}
+                                  </span>
+                                  <span className="ml-1 text-gray-400 truncate">
+                                    ({user.email})
+                                  </span>
+                                </span>
+                                {selected && (
                                   <span
                                     className={`${
-                                      selected ? 'font-semibold' : 'font-normal'
-                                    } flex items-center`}
+                                      active ? 'text-white' : 'text-indigo-600'
+                                    } absolute inset-y-0 left-0 flex items-center pl-1.5`}
                                   >
-                                    <img
-                                      src={user.avatar}
-                                      alt=""
-                                      className="flex-shrink-0 w-6 h-6 rounded-full"
-                                    />
-                                    <span className="flex-shrink-0 block ml-3">
-                                      {user.displayName}
-                                    </span>
-                                    <span className="ml-1 text-gray-400 truncate">
-                                      ({user.email})
-                                    </span>
+                                    <CheckIcon className="w-5 h-5" />
                                   </span>
-                                  {selected && (
-                                    <span
-                                      className={`${
-                                        active
-                                          ? 'text-white'
-                                          : 'text-indigo-600'
-                                      } absolute inset-y-0 left-0 flex items-center pl-1.5`}
-                                    >
-                                      <CheckIcon className="w-5 h-5" />
-                                    </span>
-                                  )}
-                                </div>
-                              )}
-                            </Listbox.Option>
-                          ))}
-                        </Listbox.Options>
-                      </Transition>
-                    </div>
-                  </>
-                )}
-              </Listbox>
-            </div>
+                                )}
+                              </div>
+                            )}
+                          </Listbox.Option>
+                        ))}
+                      </Listbox.Options>
+                    </Transition>
+                  </div>
+                </>
+              )}
+            </Listbox>
           )}
         {isAnime && (
           <div className="mt-4 italic">
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index 965b96db..e6961f51 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -183,7 +183,7 @@
   "components.RequestList.showallrequests": "Show All Requests",
   "components.RequestList.sortAdded": "Request Date",
   "components.RequestList.sortModified": "Last Modified",
-  "components.RequestModal.AdvancedRequester.advancedoptions": "Advanced Options",
+  "components.RequestModal.AdvancedRequester.advancedoptions": "Advanced",
   "components.RequestModal.AdvancedRequester.animenote": "* This series is an anime.",
   "components.RequestModal.AdvancedRequester.default": "{name} (Default)",
   "components.RequestModal.AdvancedRequester.destinationserver": "Destination Server",