✨ Add mantine context modals

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

@@ -0,0 +1,37 @@
+import { Alert, Divider, Tabs, Text } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { IconAlertTriangle } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
+import { ServiceType } from '../../../../../../types/service';
+import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';
+import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer';
+
+interface IntegrationTabProps {
+  form: UseFormReturnType<ServiceType, (values: ServiceType) => ServiceType>;
+}
+
+export const IntegrationTab = ({ form }: IntegrationTabProps) => {
+  const { t } = useTranslation('');
+  const hasIntegrationSelected = form.values.integration !== null;
+
+  return (
+    <Tabs.Panel value="integration" pt="lg">
+      <IntegrationSelector form={form} />
+
+      {hasIntegrationSelected && (
+        <>
+          <Divider label="Integration Configuration" labelPosition="center" mt="xl" mb="md" />
+          <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>
+  );
+};