Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve design in edit service modal

Browse Source
This commit is contained in:
Manuel Ruwe
2022-12-06 20:48:35 +01:00
parent d7bec26ee2
commit b28547777f
11 changed files with 112 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/Dashboard/Modals/EditService/EditServiceModal.tsx
View File

@@ -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 {
IconAccessPoint,
IconAdjustments,
IconBrush,
IconClick,
IconDeviceFloppy,
IconDoorExit,
IconPlug,
} from '@tabler/icons';
import { IconAccessPoint, IconAdjustments, IconBrush, IconClick, 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
leftIcon={<IconDoorExit size={20} />}
px={50}
variant="light"
color="gray"
onClick={tryCloseModal}
>
<Button 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>

1
src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/AppereanceTab.tsx
View File

@@ -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

21
src/components/Dashboard/Modals/EditService/Tabs/AppereanceTab/IconSelector/IconSelector.tsx
View File

@@ -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">
<IconSearch size={20} />
</ActionIcon>
<Button
className={classes.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>

8
src/components/Dashboard/Modals/EditService/Tabs/BehaviourTab/BehaviourTab.tsx
View File

@@ -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>
);
};

22
src/components/Dashboard/Modals/EditService/Tabs/GeneralTab/GeneralTab.tsx
View File

@@ -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>

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

@@ -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}

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

@@ -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>
);
};

2
src/components/Dashboard/Modals/EditService/Tabs/NetworkTab/NetworkTab.tsx
View File

@@ -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

1
src/components/Dashboard/Modals/EditService/Tabs/type.ts Normal file
View File

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

3
src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx
View File

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

2
src/types/service.ts
View File

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