🚧 Work in progress for Mantine v5

src/components/AppShelf/AddAppShelfItem.tsx

@@ -8,8 +8,8 @@ import {
   LoadingOverlay,
   Modal,
   MultiSelect,
-  ScrollArea,
   Select,
+  Stack,
   Switch,
   Tabs,
   TextInput,
@@ -18,7 +18,7 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
-import { IconApps as Apps } from '@tabler/icons';
+import { IconApps } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
@@ -38,18 +38,18 @@ export function AddItemShelfButton(props: any) {
       >
         <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
-      <ActionIcon
-        variant="default"
-        radius="md"
-        size="xl"
-        color="blue"
-        style={props.style}
-        onClick={() => setOpened(true)}
-      >
-        <Tooltip label="Add a service">
-          <Apps />
-        </Tooltip>
-      </ActionIcon>
+      <Tooltip label="Add a service">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          style={props.style}
+          onClick={() => setOpened(true)}
+        >
+          <IconApps />
+        </ActionIcon>
+      </Tooltip>
     </>
   );
 }
@@ -192,151 +192,153 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           form.reset();
         })}
       >
-        <Tabs grow>
-          <Tabs.Tab label="Options">
-            <ScrollArea style={{ height: 500 }} scrollbarSize={4}>
-              <Group direction="column" grow>
-                <TextInput
-                  required
-                  label="Service name"
-                  placeholder="Plex"
-                  {...form.getInputProps('name')}
-                />
+        <Tabs defaultValue="Options">
+          <Tabs.List grow>
+            <Tabs.Tab value="Options">Options</Tabs.Tab>
+            <Tabs.Tab value="Advanced Options">Advanced options</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="Options">
+            <Stack>
+              <TextInput
+                required
+                label="Service name"
+                placeholder="Plex"
+                {...form.getInputProps('name')}
+              />
 
-                <TextInput
-                  required
-                  label="Icon URL"
-                  placeholder={DEFAULT_ICON}
-                  {...form.getInputProps('icon')}
-                />
-                <TextInput
-                  required
-                  label="Service URL"
-                  placeholder="http://localhost:7575"
-                  {...form.getInputProps('url')}
-                />
-                <TextInput
-                  label="On Click 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'}
-                    />
-                    <Tip>
-                      Get your API key{' '}
-                      <Anchor
-                        target="_blank"
-                        weight="bold"
-                        style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                        href={`${hostname}/settings/general`}
-                      >
-                        here.
-                      </Anchor>
-                    </Tip>
-                  </>
-                )}
-                {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' && (
-                  <>
-                    <TextInput
-                      label="Password"
-                      placeholder="password"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-                {form.values.type === 'Transmission' && (
-                  <>
-                    <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="adminadmin"
-                      value={form.values.password}
-                      onChange={(event) => {
-                        form.setFieldValue('password', event.currentTarget.value);
-                      }}
-                      error={form.errors.password && 'Invalid password'}
-                    />
-                  </>
-                )}
-              </Group>
-            </ScrollArea>
-          </Tabs.Tab>
-          <Tabs.Tab label="Advanced Options">
-            <Group direction="column" grow>
+              <TextInput
+                required
+                label="Icon URL"
+                placeholder={DEFAULT_ICON}
+                {...form.getInputProps('icon')}
+              />
+              <TextInput
+                required
+                label="Service URL"
+                placeholder="http://localhost:7575"
+                {...form.getInputProps('url')}
+              />
+              <TextInput
+                label="On Click 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'}
+                  />
+                  <Tip>
+                    Get your API key{' '}
+                    <Anchor
+                      target="_blank"
+                      weight="bold"
+                      style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
+                      href={`${hostname}/settings/general`}
+                    >
+                      here.
+                    </Anchor>
+                  </Tip>
+                </>
+              )}
+              {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' && (
+                <>
+                  <TextInput
+                    label="Password"
+                    placeholder="password"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+              {form.values.type === 'Transmission' && (
+                <>
+                  <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="adminadmin"
+                    value={form.values.password}
+                    onChange={(event) => {
+                      form.setFieldValue('password', event.currentTarget.value);
+                    }}
+                    error={form.errors.password && 'Invalid password'}
+                  />
+                </>
+              )}
+            </Stack>
+          </Tabs.Panel>
+          <Tabs.Panel value="Advanced Options">
+            <Stack>
               <MultiSelect
                 required
                 label="HTTP Status Codes"
@@ -354,8 +356,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                 defaultChecked={form.values.newTab}
                 {...form.getInputProps('newTab')}
               />
-            </Group>
-          </Tabs.Tab>
+            </Stack>
+          </Tabs.Panel>
         </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>