Reworked AddAppShelfItem

Adds:
- Advanced Options tab
- Changed which ping status codes identify as "Online"
- Change if service opens in new tab or not

Fixes:
- Deluge and Transmission Password requirement

src/components/AppShelf/AddAppShelfItem.tsx

@@ -12,6 +12,8 @@ import {
   Title,
   Anchor,
   Text,
+  Tabs,
+  MultiSelect,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -19,7 +21,7 @@ import { IconApps as Apps } from '@tabler/icons';
 import { v4 as uuidv4 } from 'uuid';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList } from '../../tools/types';
+import { ServiceTypeList, statusCodes, targets } from '../../tools/types';
 
 export function AddItemShelfButton(props: any) {
   const [opened, setOpened] = useState(false);
@@ -113,6 +115,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       username: props.username ?? (undefined as unknown as string),
       password: props.password ?? (undefined as unknown as string),
       openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      status: props.status ?? ['200'],
+      target: props.target ?? '_blank',
     },
     validate: {
       apiKey: () => null,
@@ -133,6 +137,12 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
         }
         return null;
       },
+      status: (value: string[]) => {
+        if (!value.length) {
+          return 'Please select a status code';
+        }
+        return null;
+      },
     },
   });
 
@@ -191,117 +201,165 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Group direction="column" grow>
-          <TextInput
-            required
-            label="Service name"
-            placeholder="Plex"
-            {...form.getInputProps('name')}
-          />
-
-          <TextInput
-            required
-            label="Icon URL"
-            placeholder="/favicon.svg"
-            {...form.getInputProps('icon')}
-          />
-          <TextInput
-            required
-            label="Service URL"
-            placeholder="http://localhost:7575"
-            {...form.getInputProps('url')}
-          />
-          <TextInput
-            label="New tab URL"
-            placeholder="http://sonarr.example.com"
-            {...form.getInputProps('openedUrl')}
-          />
-          <Select
-            label="Service type"
-            defaultValue="Other"
-            placeholder="Pick one"
-            required
-            searchable
-            data={ServiceTypeList}
-            {...form.getInputProps('type')}
-          />
-          <Select
-            label="Category"
-            data={categoryList}
-            placeholder="Select a category or create a new one"
-            nothingFound="Nothing found"
-            searchable
-            clearable
-            creatable
-            onClick={(e) => {
-              e.preventDefault();
-            }}
-            getCreateLabel={(query) => `+ Create "${query}"`}
-            onCreate={(query) => {}}
-            {...form.getInputProps('category')}
-          />
-          <LoadingOverlay visible={isLoading} />
-          {(form.values.type === 'Sonarr' ||
-            form.values.type === 'Radarr' ||
-            form.values.type === 'Lidarr' ||
-            form.values.type === 'Readarr') && (
-            <>
+        <Tabs position="apart">
+          <Tabs.Tab label="Options">
+            <Group direction="column" grow>
               <TextInput
                 required
-                label="API key"
-                placeholder="Your API key"
-                value={form.values.apiKey}
-                onChange={(event) => {
-                  form.setFieldValue('apiKey', event.currentTarget.value);
-                }}
-                error={form.errors.apiKey && 'Invalid API key'}
+                label="Service name"
+                placeholder="Plex"
+                {...form.getInputProps('name')}
               />
-              <Text
-                style={{
-                  alignSelf: 'center',
-                  fontSize: '0.75rem',
-                  textAlign: 'center',
-                  color: 'gray',
-                }}
-              >
-                Tip: Get your API key{' '}
-                <Anchor
-                  target="_blank"
-                  weight="bold"
-                  style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                  href={`${hostname}/settings/general`}
-                >
-                  here.
-                </Anchor>
-              </Text>
-            </>
-          )}
-          {(form.values.type === 'Deluge' ||
-            form.values.type === 'Transmission' ||
-            form.values.type === 'qBittorrent') && (
-            <>
-              <TextInput
-                label="Username"
-                placeholder="admin"
-                value={form.values.username}
-                onChange={(event) => {
-                  form.setFieldValue('username', event.currentTarget.value);
-                }}
-                error={form.errors.username && 'Invalid username'}
-              />
-              <TextInput
-                label="Password"
-                placeholder="password"
-                value={form.values.password}
-                onChange={(event) => {
-                  form.setFieldValue('password', event.currentTarget.value);
-                }}
-                error={form.errors.password && 'Invalid password'}
-              />
-            </>
-          )}
-        </Group>
 
+              <TextInput
+                required
+                label="Icon URL"
+                placeholder="/favicon.svg"
+                {...form.getInputProps('icon')}
+              />
+              <TextInput
+                required
+                label="Service URL"
+                placeholder="http://localhost:7575"
+                {...form.getInputProps('url')}
+              />
+              <TextInput
+                label="New tab URL"
+                placeholder="http://sonarr.example.com"
+                {...form.getInputProps('openedUrl')}
+              />
+              <Select
+                label="Service type"
+                defaultValue="Other"
+                placeholder="Pick one"
+                required
+                searchable
+                data={ServiceTypeList}
+                {...form.getInputProps('type')}
+              />
+              <Select
+                label="Category"
+                data={categoryList}
+                placeholder="Select a category or create a new one"
+                nothingFound="Nothing found"
+                searchable
+                clearable
+                creatable
+                onClick={(e) => {
+                  e.preventDefault();
+                }}
+                getCreateLabel={(query) => `+ Create "${query}"`}
+                onCreate={(query) => {}}
+                {...form.getInputProps('category')}
+              />
+              <LoadingOverlay visible={isLoading} />
+              {(form.values.type === 'Sonarr' ||
+                form.values.type === 'Radarr' ||
+                form.values.type === 'Lidarr' ||
+                form.values.type === 'Readarr') && (
+                <>
+                  <TextInput
+                    required
+                    label="API key"
+                    placeholder="Your API key"
+                    value={form.values.apiKey}
+                    onChange={(event) => {
+                      form.setFieldValue('apiKey', event.currentTarget.value);
+                    }}
+                    error={form.errors.apiKey && 'Invalid API key'}
+                  />
+                  <Text
+                    style={{
+                      alignSelf: 'center',
+                      fontSize: '0.75rem',
+                      textAlign: 'center',
+                      color: 'gray',
+                    }}
+                  >
+                    Tip: Get your API key{' '}
+                    <Anchor
+                      target="_blank"
+                      weight="bold"
+                      style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                      href={`${hostname}/settings/general`}
+                    >
+                      here.
+                    </Anchor>
+                  </Text>
+                </>
+              )}
+              {form.values.type === 'qBittorrent' && (
+                <>
+                  <TextInput
+                    required
+                    label="Username"
+                    placeholder="admin"
+                    value={form.values.username}
+                    onChange={(event) => {
+                      form.setFieldValue('username', event.currentTarget.value);
+                    }}
+                    error={form.errors.username && 'Invalid username'}
+                  />
+                  <TextInput
+                    required
+                    label="Password"
+                    placeholder="adminadmin"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+              {(form.values.type === 'Deluge' ||
+                form.values.type === 'Transmission' ||
+                form.values.type === 'qBittorrent') && (
+                <>
+                  <TextInput
+                    label="Username"
+                    placeholder="admin"
+                    value={form.values.username}
+                    onChange={(event) => {
+                      form.setFieldValue('username', event.currentTarget.value);
+                    }}
+                    error={form.errors.username && 'Invalid username'}
+                  />
+                  <TextInput
+                    label="Password"
+                    placeholder="password"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+            </Group>
+          </Tabs.Tab>
+          <Tabs.Tab label="Advanced Options">
+            <MultiSelect
+              required
+              label="HTTP Status Codes"
+              data={statusCodes}
+              placeholder="Select valid status codes"
+              clearButtonLabel="Clear selection"
+              nothingFound="Nothing found"
+              clearable
+              searchable
+              {...form.getInputProps('status')}
+            />
+            <Select
+              required
+              label="Open Tab in: "
+              data={targets}
+              defaultValue="_blank"
+              placeholder="Pick one"
+              {...form.getInputProps('target')}
+            />
+          </Tabs.Tab>
+        </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>
         </Group>