Homarr/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx

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