feat(frontend): show alert when there are no default radarr/sonarr servers

fixes #344

src/components/Settings/SettingsServices.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Badge from '../Common/Badge';
 import Button from '../Common/Button';
 import useSWR from 'swr';
@@ -31,8 +31,48 @@ const messages = defineMessages({
   activeProfile: 'Active Profile',
   addradarr: 'Add Radarr Server',
   addsonarr: 'Add Sonarr Server',
+  nodefault: 'No default server selected!',
+  nodefaultdescription:
+    'At least one server must be marked as default before any requests will make it to your services.',
+  no4kimplemented: '(Default 4K servers are not currently implemented)',
 });
 
+const NoDefaultAlert: React.FC = () => {
+  const intl = useIntl();
+  return (
+    <div className="rounded-md bg-yellow-600 p-4 mb-8">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <svg
+            className="h-5 w-5 text-yellow-200"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-yellow-200">
+            {intl.formatMessage(messages.nodefault)}
+          </h3>
+          <div className="mt-2 text-sm text-yellow-300">
+            <p>{intl.formatMessage(messages.nodefaultdescription)}</p>
+            <p className="mt-2">
+              {intl.formatMessage(messages.no4kimplemented)}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 interface ServerInstanceProps {
   name: string;
   isDefault?: boolean;
@@ -249,51 +289,57 @@ const SettingsServices: React.FC = () => {
       <div className="mt-6 sm:mt-5">
         {!radarrData && !radarrError && <LoadingSpinner />}
         {radarrData && !radarrError && (
-          <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <>
-            {radarrData.map((radarr) => (
+            {radarrData.length > 0 &&
-              <ServerInstance
+              !radarrData.some(
-                key={`radarr-config-${radarr.id}`}
+                (radarr) => radarr.isDefault && !radarr.is4k
-                name={radarr.name}
+              ) && <NoDefaultAlert />}
-                address={radarr.hostname}
+            <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                profileName={radarr.activeProfileName}
+              {radarrData.map((radarr) => (
-                isSSL={radarr.useSsl}
+                <ServerInstance
-                isDefault={radarr.isDefault && !radarr.is4k}
+                  key={`radarr-config-${radarr.id}`}
-                isDefault4K={radarr.is4k && radarr.isDefault}
+                  name={radarr.name}
-                onEdit={() => setEditRadarrModal({ open: true, radarr })}
+                  address={radarr.hostname}
-                onDelete={() =>
+                  profileName={radarr.activeProfileName}
-                  setDeleteServerModal({
+                  isSSL={radarr.useSsl}
-                    open: true,
+                  isDefault={radarr.isDefault && !radarr.is4k}
-                    serverId: radarr.id,
+                  isDefault4K={radarr.is4k && radarr.isDefault}
-                    type: 'radarr',
+                  onEdit={() => setEditRadarrModal({ open: true, radarr })}
-                  })
+                  onDelete={() =>
-                }
+                    setDeleteServerModal({
-              />
+                      open: true,
-            ))}
+                      serverId: radarr.id,
-            <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
+                      type: 'radarr',
-              <div className="flex items-center justify-center w-full h-full">
+                    })
-                <Button
-                  buttonType="ghost"
-                  onClick={() =>
-                    setEditRadarrModal({ open: true, radarr: null })
                   }
-                >
+                />
-                  <svg
+              ))}
-                    className="w-5 h-5 mr-1"
+              <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
-                    fill="currentColor"
+                <div className="flex items-center justify-center w-full h-full">
-                    viewBox="0 0 20 20"
+                  <Button
-                    xmlns="http://www.w3.org/2000/svg"
+                    buttonType="ghost"
+                    onClick={() =>
+                      setEditRadarrModal({ open: true, radarr: null })
+                    }
                   >
-                    <path
+                    <svg
-                      fillRule="evenodd"
+                      className="w-5 h-5 mr-1"
-                      d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                      fill="currentColor"
-                      clipRule="evenodd"
+                      viewBox="0 0 20 20"
-                    />
+                      xmlns="http://www.w3.org/2000/svg"
-                  </svg>
+                    >
-                  <FormattedMessage {...messages.addradarr} />
+                      <path
-                </Button>
+                        fillRule="evenodd"
-              </div>
+                        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-            </li>
+                        clipRule="evenodd"
-          </ul>
+                      />
+                    </svg>
+                    <FormattedMessage {...messages.addradarr} />
+                  </Button>
+                </div>
+              </li>
+            </ul>
+          </>
         )}
       </div>
       <div className="mt-10">
@@ -307,52 +353,58 @@ const SettingsServices: React.FC = () => {
       <div className="mt-6 sm:mt-5">
         {!sonarrData && !sonarrError && <LoadingSpinner />}
         {sonarrData && !sonarrError && (
-          <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <>
-            {sonarrData.map((sonarr) => (
+            {sonarrData.length > 0 &&
-              <ServerInstance
+              !sonarrData.some(
-                key={`sonarr-config-${sonarr.id}`}
+                (sonarr) => sonarr.isDefault && !sonarr.is4k
-                name={sonarr.name}
+              ) && <NoDefaultAlert />}
-                address={sonarr.hostname}
+            <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                profileName={sonarr.activeProfileName}
+              {sonarrData.map((sonarr) => (
-                isSSL={sonarr.useSsl}
+                <ServerInstance
-                isSonarr
+                  key={`sonarr-config-${sonarr.id}`}
-                isDefault4K={sonarr.isDefault && sonarr.is4k}
+                  name={sonarr.name}
-                isDefault={sonarr.isDefault && !sonarr.is4k}
+                  address={sonarr.hostname}
-                onEdit={() => setEditSonarrModal({ open: true, sonarr })}
+                  profileName={sonarr.activeProfileName}
-                onDelete={() =>
+                  isSSL={sonarr.useSsl}
-                  setDeleteServerModal({
+                  isSonarr
-                    open: true,
+                  isDefault4K={sonarr.isDefault && sonarr.is4k}
-                    serverId: sonarr.id,
+                  isDefault={sonarr.isDefault && !sonarr.is4k}
-                    type: 'sonarr',
+                  onEdit={() => setEditSonarrModal({ open: true, sonarr })}
-                  })
+                  onDelete={() =>
-                }
+                    setDeleteServerModal({
-              />
+                      open: true,
-            ))}
+                      serverId: sonarr.id,
-            <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
+                      type: 'sonarr',
-              <div className="flex items-center justify-center w-full h-full">
+                    })
-                <Button
-                  buttonType="ghost"
-                  onClick={() =>
-                    setEditSonarrModal({ open: true, sonarr: null })
                   }
-                >
+                />
-                  <svg
+              ))}
-                    className="w-5 h-5 mr-1"
+              <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
-                    fill="currentColor"
+                <div className="flex items-center justify-center w-full h-full">
-                    viewBox="0 0 20 20"
+                  <Button
-                    xmlns="http://www.w3.org/2000/svg"
+                    buttonType="ghost"
+                    onClick={() =>
+                      setEditSonarrModal({ open: true, sonarr: null })
+                    }
                   >
-                    <path
+                    <svg
-                      fillRule="evenodd"
+                      className="w-5 h-5 mr-1"
-                      d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                      fill="currentColor"
-                      clipRule="evenodd"
+                      viewBox="0 0 20 20"
-                    />
+                      xmlns="http://www.w3.org/2000/svg"
-                  </svg>
+                    >
-                  <FormattedMessage {...messages.addsonarr} />
+                      <path
-                </Button>
+                        fillRule="evenodd"
-              </div>
+                        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-            </li>
+                        clipRule="evenodd"
-          </ul>
+                      />
+                    </svg>
+                    <FormattedMessage {...messages.addsonarr} />
+                  </Button>
+                </div>
+              </li>
+            </ul>
+          </>
         )}
       </div>
     </>

src/i18n/locale/en.json

@@ -207,6 +207,9 @@
   "components.Settings.menuPlexSettings": "Plex",
   "components.Settings.menuServices": "Services",
   "components.Settings.nextexecution": "Next Execution",
+  "components.Settings.no4kimplemented": "(Default 4K servers are not currently implemented)",
+  "components.Settings.nodefault": "No default server selected!",
+  "components.Settings.nodefaultdescription": "At least one server must be marked as default before any requests will make it to your services.",
   "components.Settings.notificationsettings": "Notification Settings",
   "components.Settings.notificationsettingsDescription": "Here you can pick and choose what types of notifications to send and through what types of services.",
   "components.Settings.notrunning": "Not Running",