feat: improve design in edit service modal

src/components/Dashboard/Modals/EditService/EditServiceModal.tsx

@@ -1,24 +1,23 @@
-import { Button, createStyles, Group, Stack, Tabs, Text } from '@mantine/core';
+import { Alert, Button, createStyles, Group, Stack, Tabs, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps } from '@mantine/modals';
 import { hideNotification, showNotification } from '@mantine/notifications';
-import {
+import { IconAccessPoint, IconAdjustments, IconBrush, IconClick, IconPlug } from '@tabler/icons';
-  IconAccessPoint,
-  IconAdjustments,
-  IconBrush,
-  IconClick,
-  IconDeviceFloppy,
-  IconDoorExit,
-  IconPlug,
-} from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
+import { useState } from 'react';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 import { ServiceType } from '../../../../types/service';
 import { AppearanceTab } from './Tabs/AppereanceTab/AppereanceTab';
 import { BehaviourTab } from './Tabs/BehaviourTab/BehaviourTab';
 import { GeneralTab } from './Tabs/GeneralTab/GeneralTab';
 import { IntegrationTab } from './Tabs/IntegrationTab/IntegrationTab';
 import { NetworkTab } from './Tabs/NetworkTab/NetworkTab';
+import { EditServiceModalTab } from './Tabs/type';
+
+const serviceUrlRegex =
+  '(https?://(?:www.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\\s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\\s]{2,}|https?://(?:www.|(?!www))[a-zA-Z0-9]+.[^\\s]{2,}|www.[a-zA-Z0-9]+.[^\\s]{2,})';
 
 export const EditServiceModal = ({
   context,
@@ -27,16 +26,55 @@ export const EditServiceModal = ({
 }: ContextModalProps<{ service: ServiceType }>) => {
   const { t } = useTranslation();
   const { classes } = useStyles();
+  const { name: configName, config } = useConfigContext();
+  const updateConfig = useConfigStore((store) => store.updateConfig);
 
   const form = useForm<ServiceType>({
     initialValues: innerProps.service,
+    validate: {
+      name: (name) => (!name ? 'Name is required' : null),
+      url: (url) => {
+        if (!url) {
+          return 'Url is required';
+        }
+
+        if (!url.match(serviceUrlRegex)) {
+          return 'Value is not a valid url';
+        }
+
+        return null;
+      },
+      appearance: (appearance) => (!appearance.iconUrl ? 'Icon is required' : null),
+      behaviour: (behaviour) => {
+        if (behaviour.onClickUrl === undefined || behaviour.onClickUrl.length < 1) {
+          return null;
+        }
+
+        if (!behaviour.onClickUrl?.match(serviceUrlRegex)) {
+          return 'Uri override is not a valid uri';
+        }
+
+        return null;
+      },
+    },
+    validateInputOnChange: true,
   });
 
   const onSubmit = (values: ServiceType) => {
-    console.log('form submitted');
     console.log(values);
+
+    if (!configName) {
+      return;
+    }
+
+    updateConfig(configName, (previousConfig) => ({
+      ...previousConfig,
+      services: [...previousConfig.services.filter((x) => x.id !== form.values.id), form.values],
+    }));
   };
 
+  const [activeTab, setActiveTab] = useState<EditServiceModalTab>('general');
+
   const tryCloseModal = () => {
     if (form.isDirty()) {
       showNotification({
@@ -65,6 +103,13 @@ export const EditServiceModal = ({
 
   return (
     <>
+      {configName === undefined ||
+        (config === undefined && (
+          <Alert color="red">
+            There was an unexpected problem loading the configuration. Functionality might be
+            restricted. Please report this incident.
+          </Alert>
+        ))}
       <Stack spacing={0} align="center" my="lg">
         {form.values.appearance.iconUrl ? (
           // disabled because image target is too dynamic for next image cache
@@ -85,7 +130,11 @@ export const EditServiceModal = ({
         </Text>
       </Stack>
       <form onSubmit={form.onSubmit(onSubmit)}>
-        <Tabs defaultValue="general">
+        <Tabs
+          value={activeTab}
+          onTabChange={(tab) => setActiveTab(tab as EditServiceModalTab)}
+          defaultValue="general"
+        >
           <Tabs.List grow>
             <Tabs.Tab value="general" icon={<IconAdjustments size={14} />}>
               General
@@ -104,7 +153,7 @@ export const EditServiceModal = ({
             </Tabs.Tab>
           </Tabs.List>
 
-          <GeneralTab form={form} />
+          <GeneralTab form={form} openTab={(targetTab) => setActiveTab(targetTab)} />
           <BehaviourTab form={form} />
           <NetworkTab form={form} />
           <AppearanceTab form={form} />
@@ -112,16 +161,10 @@ export const EditServiceModal = ({
         </Tabs>
 
         <Group position="right" mt={100}>
-          <Button
+          <Button px={50} variant="light" color="gray" onClick={tryCloseModal}>
-            leftIcon={<IconDoorExit size={20} />}
-            px={50}
-            variant="light"
-            color="gray"
-            onClick={tryCloseModal}
-          >
             Cancel
           </Button>
-          <Button type="submit" leftIcon={<IconDeviceFloppy size={20} />} px={50}>
+          <Button type="submit" px={50}>
             Save
           </Button>
         </Group>

src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/AppereanceTab.tsx

@@ -31,6 +31,7 @@ export const AppearanceTab = ({ form }: AppearanceTabProps) => {
           className={classes.textInput}
           icon={<Image />}
           label="Service Icon"
+          description="Logo of your service displayed in your dashboard. Must return a body content containg an image"
           variant="default"
           withAsterisk
           required

src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/IconSelector/IconSelector.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import {
   ActionIcon,
+  Button,
   createStyles,
   Divider,
   Flex,
@@ -12,7 +13,7 @@ import {
   TextInput,
   Title,
 } from '@mantine/core';
-import { IconFlame, IconSearch, IconX } from '@tabler/icons';
+import { IconSearch, IconX } from '@tabler/icons';
 import { useState } from 'react';
 import { ICON_PICKER_SLICE_LIMIT } from '../../../../../../../../data/constants';
 import { useRepositoryIconsQuery } from '../../../../../../../tools/hooks/useRepositoryIconsQuery';
@@ -38,7 +39,12 @@ export const IconSelector = ({ onChange }: IconSelectorProps) => {
     return <Loader />;
   }
 
-  const filteredItems = searchTerm ? data.filter((x) => x.url.includes(searchTerm)) : data;
+  const replaceCharacters = (value: string) =>
+    value.toLowerCase().replaceAll(' ', '').replaceAll('-', '');
+
+  const filteredItems = searchTerm
+    ? data.filter((x) => replaceCharacters(x.url).includes(replaceCharacters(searchTerm)))
+    : data;
   const slicedFilteredItems = filteredItems.slice(0, ICON_PICKER_SLICE_LIMIT);
   const isTruncated =
     slicedFilteredItems.length > 0 && slicedFilteredItems.length !== filteredItems.length;
@@ -46,9 +52,13 @@ export const IconSelector = ({ onChange }: IconSelectorProps) => {
   return (
     <Popover width={310}>
       <Popover.Target>
-        <ActionIcon className={classes.actionIcon} size={36} variant="default">
+        <Button
-          <IconSearch size={20} />
+          className={classes.actionIcon}
-        </ActionIcon>
+          variant="default"
+          leftIcon={<IconSearch size={20} />}
+        >
+          Icon Picker
+        </Button>
       </Popover.Target>
       <Popover.Dropdown>
         <Stack pt={4}>
@@ -76,7 +86,6 @@ export const IconSelector = ({ onChange }: IconSelectorProps) => {
             {isTruncated && (
               <Stack spacing="xs" pr={15}>
                 <Divider mt={35} mx="xl" />
-                <IconFlame className={classes.flameIcon} size={40} opacity={0.6} strokeWidth={1} />
                 <Title order={6} color="dimmed" align="center">
                   Search is limited to {ICON_PICKER_SLICE_LIMIT} icons
                 </Title>

src/components/Dashboard/Modals/EditService/Tabs/BehaviourTab/BehaviourTab.tsx

@@ -15,13 +15,17 @@ export const BehaviourTab = ({ form }: BehaviourTabProps) => {
       <TextInput
         icon={<IconClick size={16} />}
         label="On click url"
-        placeholder="Override the default service url when clicking on the service"
+        description="Overrides the service URL when clicking on the service"
+        placeholder="URL that should be opened instead when clicking on the service"
         variant="default"
         mb="md"
         {...form.getInputProps('behaviour.onClickUrl')}
       />
 
-      <Switch label="Open in new tab" {...form.getInputProps('behaviour.isOpeningNewTab')} />
+      <Switch
+        label="Open in new tab"
+        {...form.getInputProps('behaviour.isOpeningNewTab', { type: 'checkbox' })}
+      />
     </Tabs.Panel>
   );
 };

src/components/Dashboard/Modals/EditService/Tabs/GeneralTab/GeneralTab.tsx

@@ -1,32 +1,46 @@
-import { Tabs, TextInput } from '@mantine/core';
+import { Group, Tabs, Text, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconCursorText, IconLink } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { ServiceType } from '../../../../../../types/service';
+import { EditServiceModalTab } from '../type';
 
 interface GeneralTabProps {
   form: UseFormReturnType<ServiceType, (values: ServiceType) => ServiceType>;
+  openTab: (tab: EditServiceModalTab) => void;
 }
 
-export const GeneralTab = ({ form }: GeneralTabProps) => {
+export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
   const { t } = useTranslation('');
   return (
     <Tabs.Panel value="general" pt="lg">
       <TextInput
         icon={<IconCursorText size={16} />}
         label="Service name"
+        description="Used for displaying the service on the dashboard"
         placeholder="My example service"
         variant="default"
         mb="md"
-        required
+        withAsterisk
         {...form.getInputProps('name')}
       />
       <TextInput
         icon={<IconLink size={16} />}
         label="Service url"
+        description={
+          <Group spacing={3}>
+            <Text>
+              URL that will be opened when clicking on the service. Can be overwritten using
+            </Text>
+            <Text onClick={() => openTab('behaviour')} variant="link">
+              on click URL
+            </Text>
+            <Text>when using external URLs to enhance security.</Text>
+          </Group>
+        }
         placeholder="https://google.com"
         variant="default"
-        required
+        withAsterisk
         {...form.getInputProps('url')}
       />
     </Tabs.Panel>

src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -62,11 +62,9 @@ export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
 
   return (
     <>
-      <TextExplanation />
-      <Space h="sm" />
-
       <Select
-        label="Configure this service for the following integration"
+        label="Integration configuration"
+        description="Treats this service as the selected integration and provides you with per-service configuration"
         placeholder="Select your desired configuration"
         itemComponent={SelectItemComponent}
         data={data}

src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/TextExplanation/TextExplanation.tsx

@@ -1,10 +0,0 @@
-import { Text } from '@mantine/core';
-
-export const TextExplanation = () => {
-  return (
-    <Text color="dimmed">
-      You can optionally connect your services using integrations. Integration elements on your
-      dashboard will communicate to your services using the configuration below.
-    </Text>
-  );
-};

src/components/Dashboard/Modals/EditService/Tabs/NetworkTab/NetworkTab.tsx

@@ -14,6 +14,7 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
     <Tabs.Panel value="network" pt="lg">
       <Switch
         label="Enable status checker"
+        description="Sends a simple HTTP / HTTPS request to check if your service is online"
         mb="md"
         defaultChecked={form.values.network.enabledStatusChecker}
         {...form.getInputProps('network.enabledStatusChecker')}
@@ -22,6 +23,7 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
         <MultiSelect
           required
           label="HTTP status codes"
+          description="Determines what response codes are allowed for this service to be 'Online'"
           data={StatusCodes}
           clearable
           searchable

src/components/Dashboard/Modals/EditService/Tabs/type.ts

@@ -0,0 +1 @@
+export type EditServiceModalTab = 'general' | 'behaviour' | 'network' | 'appereance' | 'integration';

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -42,7 +42,8 @@ export const AvailableElementTypes = ({
                     okStatus: [],
                   },
                   behaviour: {
-                    isOpeningNewTab: false,
+                    isOpeningNewTab: true,
+                    onClickUrl: '',
                   },
                   area: {
                     type: 'wrapper',

src/types/service.ts

@@ -11,7 +11,7 @@ export interface ServiceType extends TileBaseType {
 }
 
 interface ServiceBehaviourType {
-  onClickUrl?: string;
+  onClickUrl: string;
   isOpeningNewTab: boolean;
 }