🎨 Rename "services" to "apps" in entire project

2025-11-17 02:31:18 +01:00 · 2022-12-18 22:27:01 +01:00
parent 1e0a90f2ac
commit 661c05bc50
69 changed files with 661 additions and 495 deletions
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
@@ -0,0 +1,77 @@
+import {
+  Button,
+  Card,
+  createStyles,
+  Flex,
+  Grid,
+  Group,
+  PasswordInput,
+  Stack,
+  ThemeIcon,
+  Title,
+} from '@mantine/core';
+import { TablerIcon } from '@tabler/icons';
+import { useState } from 'react';
+
+interface GenericSecretInputProps {
+  label: string;
+  value: string;
+  setIcon: TablerIcon;
+  onClickUpdateButton: (value: string | undefined) => void;
+}
+
+export const GenericSecretInput = ({
+  label,
+  value,
+  setIcon,
+  onClickUpdateButton,
+  ...props
+}: GenericSecretInputProps) => {
+  const { classes } = useStyles();
+
+  const Icon = setIcon;
+
+  const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(false);
+
+  return (
+    <Card withBorder>
+      <Grid>
+        <Grid.Col className={classes.alignSelfCenter} xs={12} md={6}>
+          <Group spacing="sm">
+            <ThemeIcon color="green" variant="light">
+              <Icon size={18} />
+            </ThemeIcon>
+            <Stack spacing={0}>
+              <Title className={classes.subtitle} order={6}>
+                {label}
+              </Title>
+            </Stack>
+          </Group>
+        </Grid.Col>
+        <Grid.Col xs={12} md={6}>
+          <Flex gap={10} justify="end" align="end">
+            <Button variant="subtle" color="gray" px="xl">
+              Clear Secret
+            </Button>
+            {displayUpdateField === true ? (
+              <PasswordInput placeholder="new secret" width={200} {...props} />
+            ) : (
+              <Button onClick={() => setDisplayUpdateField(true)} variant="light">
+                Set Secret
+              </Button>
+            )}
+          </Flex>
+        </Grid.Col>
+      </Grid>
+    </Card>
+  );
+};
+
+const useStyles = createStyles(() => ({
+  subtitle: {
+    lineHeight: 1.1,
+  },
+  alignSelfCenter: {
+    alignSelf: 'center',
+  },
+}));
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
@@ -0,0 +1,125 @@
+/* eslint-disable @next/next/no-img-element */
+import { Group, Select, SelectItem, Text } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { useTranslation } from 'next-i18next';
+import { forwardRef } from 'react';
+import {
+  IntegrationField,
+  integrationFieldDefinitions,
+  integrationFieldProperties,
+  AppIntegrationPropertyType,
+  AppIntegrationType,
+  AppType,
+} from '../../../../../../../../types/app';
+
+interface IntegrationSelectorProps {
+  form: UseFormReturnType<AppType, (item: AppType) => AppType>;
+}
+
+export const IntegrationSelector = ({ form }: IntegrationSelectorProps) => {
+  const { t } = useTranslation('');
+
+  // TODO: read this out from integrations dynamically.
+  const data: SelectItem[] = [
+    {
+      value: 'sabnzbd',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/sabnzbd.png',
+      label: 'SABnzbd',
+    },
+    {
+      value: 'deluge',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/deluge.png',
+      label: 'Deluge',
+    },
+    {
+      value: 'transmission',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/transmission.png',
+      label: 'Transmission',
+    },
+    {
+      value: 'qbittorrent',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/qbittorrent.png',
+      label: 'qBittorrent',
+    },
+    {
+      value: 'jellyseerr',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/jellyseerr.png',
+      label: 'Jellyseerr',
+    },
+    {
+      value: 'overseerr',
+      image: 'https://cdn.jsdelivr.net/gh/walkxhub/dashboard-icons/png/overseerr.png',
+      label: 'Overseerr',
+    },
+  ].filter((x) => Object.keys(integrationFieldProperties).includes(x.value));
+
+  const getNewProperties = (value: string | null): AppIntegrationPropertyType[] => {
+    if (!value) return [];
+    const integrationType = value as AppIntegrationType['type'];
+    if (integrationType === null) {
+      return [];
+    }
+
+    const requiredProperties = Object.entries(integrationFieldDefinitions).filter(([k, v]) => {
+      const val = integrationFieldProperties[integrationType['type']];
+      return val.includes(k as IntegrationField);
+    })!;
+    return requiredProperties.map(([k, value]) => ({
+      type: value.type,
+      field: k as IntegrationField,
+      value: undefined,
+      isDefined: false,
+    }));
+  };
+
+  const inputProps = form.getInputProps('integration.type');
+
+  return (
+    <Select
+      label="Integration configuration"
+      description="Treats this app as the selected integration and provides you with per-app configuration"
+      placeholder="Select your desired configuration"
+      itemComponent={SelectItemComponent}
+      data={data}
+      maxDropdownHeight={400}
+      clearable
+      variant="default"
+      mb="md"
+      icon={
+        form.values.integration?.type && (
+          <img
+            src={data.find((x) => x.value === form.values.integration?.type)?.image}
+            alt="test"
+            width={20}
+            height={20}
+          />
+        )
+      }
+      onChange={(value) => {
+        form.setFieldValue('integration.properties', getNewProperties(value));
+        console.log(`changed to value ${value}`);
+        inputProps.onChange(value);
+      }}
+      {...inputProps}
+    />
+  );
+};
+
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  image: string;
+  label: string;
+}
+
+const SelectItemComponent = forwardRef<HTMLDivElement, ItemProps>(
+  ({ image, label, ...others }: ItemProps, ref) => (
+    <div ref={ref} {...others}>
+      <Group noWrap>
+        <img src={image} alt="integration icon" width={20} height={20} />
+
+        <div>
+          <Text size="sm">{label}</Text>
+        </div>
+      </Group>
+    </div>
+  )
+);
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
@@ -0,0 +1,81 @@
+import { Stack } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { IconKey } from '@tabler/icons';
+import {
+  IntegrationField,
+  integrationFieldDefinitions,
+  integrationFieldProperties,
+  AppIntegrationPropertyType,
+  AppType,
+} from '../../../../../../../../types/app';
+import { GenericSecretInput } from '../InputElements/GenericSecretInput';
+
+interface IntegrationOptionsRendererProps {
+  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
+}
+
+export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererProps) => {
+  const selectedIntegration = form.values.integration?.type;
+
+  if (!selectedIntegration) return null;
+
+  const displayedProperties = integrationFieldProperties[selectedIntegration];
+
+  return (
+    <Stack spacing="xs" mb="md">
+      {displayedProperties.map((property, index) => {
+        const [_, definition] = Object.entries(integrationFieldDefinitions).find(
+          ([key]) => property === key
+        )!;
+
+        let indexInFormValue =
+          form.values.integration?.properties.findIndex((p) => p.field === property) ?? -1;
+        if (indexInFormValue === -1) {
+          const type = Object.entries(integrationFieldDefinitions).find(
+            ([k, v]) => k === property
+          )![1].type;
+          const newProperty: AppIntegrationPropertyType = {
+            type,
+            field: property as IntegrationField,
+            isDefined: false,
+          };
+          form.insertListItem('integration.properties', newProperty);
+          indexInFormValue = form.values.integration!.properties.length;
+        }
+        const formValue = form.values.integration?.properties[indexInFormValue];
+
+        const isPresent = formValue?.isDefined;
+
+        if (!definition) {
+          return (
+            <GenericSecretInput
+              onClickUpdateButton={(value) => {
+                form.setFieldValue(`integration.properties.${index}.value`, value);
+              }}
+              key={`input-${property}`}
+              label={`${property} (potentionally unmapped)`}
+              secretIsPresent={isPresent}
+              setIcon={IconKey}
+              value={formValue.value}
+              {...form.getInputProps(`integration.properties.${index}.value`)}
+            />
+          );
+        }
+
+        return (
+          <GenericSecretInput
+            onClickUpdateButton={(value) => {
+              form.setFieldValue(`integration.properties.${index}.value`, value);
+            }}
+            key={`input-${definition.label}`}
+            label={definition.label}
+            value=""
+            secretIsPresent={isPresent}
+            setIcon={definition.icon}
+            {...form.getInputProps(`integration.properties.${index}.value`)}
+          />
+        );
+      })}
+    </Stack>
+  );
+};
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
@@ -0,0 +1,41 @@
+import { Alert, Divider, Tabs, Text } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { IconAlertTriangle } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { AppType } from '../../../../../../types/app';
+import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';
+import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer';
+
+interface IntegrationTabProps {
+  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
+}
+
+export const IntegrationTab = ({ form }: IntegrationTabProps) => {
+  const { t } = useTranslation('');
+  const hasIntegrationSelected = form.values.integration?.type;
+
+  return (
+    <Tabs.Panel value="integration" pt="lg">
+      <IntegrationSelector form={form} />
+
+      {hasIntegrationSelected && (
+        <>
+          <Divider label="Integration Configuration" labelPosition="center" mt="xl" mb="md" />
+          <Text size="sm" color="dimmed" mb="lg">
+            To update a secret, enter a value and click the save button. To remove a secret, use the
+            clear button.
+          </Text>
+          <IntegrationOptionsRenderer form={form} />
+          <Alert icon={<IconAlertTriangle />} color="yellow">
+            <Text>
+              Please note that Homarr removes secrets from the configuration for security reasons.
+              Thus, you can only either define or unset any credentials. Your credentials act as the
+              main access for your integrations and you should <b>never</b> share them with anybody
+              else. Make sure to <b>store and manage your secrets safely</b>.
+            </Text>
+          </Alert>
+        </>
+      )}
+    </Tabs.Panel>
+  );
+};