✨ Remove unset icon, use local form instead of API

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

@@ -7,80 +7,75 @@ import {
   Grid,
   Group,
   Stack,
-  Text,
   TextInput,
   ThemeIcon,
   Title,
+  Tooltip,
 } from '@mantine/core';
 import { IconDeviceFloppy, TablerIcon } from '@tabler/icons';
-import { ReactNode, useState } from 'react';
+import { useState } from 'react';
 
 interface GenericSecretInputProps {
   label: string;
   value: string;
-  secretIsPresent: boolean;
-  unsetIcon: TablerIcon;
   setIcon: TablerIcon;
+  onClickUpdateButton: (value: string | undefined) => void;
 }
 
 export const GenericSecretInput = ({
   label,
   value,
-  secretIsPresent,
   setIcon,
-  unsetIcon,
+  onClickUpdateButton,
 }: GenericSecretInputProps) => {
   const { classes } = useStyles();
-  const [dirty, setDirty] = useState(false);
 
-  const IconComponent = secretIsPresent ? setIcon : unsetIcon;
+  const Icon = setIcon;
+
+  const [fieldValue, setFieldValue] = useState<string>(value);
 
   return (
     <Card withBorder>
       <Grid>
         <Grid.Col className={classes.alignSelfCenter} xs={12} md={6}>
           <Group spacing="sm">
-            <ThemeIcon color={secretIsPresent ? 'green' : 'red'} variant="light">
-              <IconComponent size={16} />
+            <ThemeIcon color="green" variant="light">
+              <Icon size={18} />
             </ThemeIcon>
             <Stack spacing={0}>
               <Title className={classes.subtitle} order={6}>
                 {label}
               </Title>
-              <Text size="xs" color="dimmed">
-                {secretIsPresent
-                  ? 'Secret is defined in the configuration'
-                  : 'Secret has not been defined'}
-              </Text>
             </Stack>
           </Group>
         </Grid.Col>
         <Grid.Col xs={12} md={6}>
           <Flex gap={10} justify="end" align="end">
-            {secretIsPresent ? (
-              <>
-                <Button variant="subtle" color="gray" px="xl">
-                  Clear Secret
-                </Button>
-                <TextInput
-                  type="password"
-                  placeholder="Leave empty"
-                  description={`Update secret${dirty ? ' (unsaved)' : ''}`}
-                  rightSection={
-                    <ActionIcon disabled={!dirty}>
-                      <IconDeviceFloppy size={18} />
-                    </ActionIcon>
-                  }
-                  defaultValue={value}
-                  onChange={() => setDirty(true)}
-                  withAsterisk
-                />
-              </>
-            ) : (
-              <Button variant="light" px="xl">
-                Define secret
-              </Button>
-            )}
+            <Button
+              onClick={() => {
+                setFieldValue('');
+                onClickUpdateButton(undefined);
+              }}
+              variant="subtle"
+              color="gray"
+              px="xl"
+            >
+              Clear Secret
+            </Button>
+            <TextInput
+              onChange={(event) => setFieldValue(event.currentTarget.value)}
+              rightSection={
+                <Tooltip label="Update this secret" withinPortal>
+                  <ActionIcon onClick={() => onClickUpdateButton(fieldValue)}>
+                    <IconDeviceFloppy width={20} strokeWidth={1.2} />
+                  </ActionIcon>
+                </Tooltip>
+              }
+              value={fieldValue}
+              type="password"
+              placeholder="no value is set"
+              withAsterisk
+            />
           </Flex>
         </Grid.Col>
       </Grid>

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

@@ -1,6 +1,6 @@
 import { Stack } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
-import { IconKey, IconKeyOff } from '@tabler/icons';
+import { IconKey } from '@tabler/icons';
 import {
   IntegrationField,
   integrationFieldDefinitions,
@@ -49,11 +49,13 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
         if (!definition) {
           return (
             <GenericSecretInput
+              onClickUpdateButton={(value) => {
+                form.setFieldValue(`integration.properties.${index}.value`, value);
+              }}
               key={`input-${property}`}
               label={`${property} (potentionally unmapped)`}
               secretIsPresent={isPresent}
               setIcon={IconKey}
-              unsetIcon={IconKeyOff}
               {...form.getInputProps(`integration.properties.${index}.value`)}
             />
           );
@@ -61,12 +63,14 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
 
         return (
           <GenericSecretInput
+            onClickUpdateButton={(value) => {
+              form.setFieldValue(`integration.properties.${index}.value`, value);
+            }}
             key={`input-${definition.label}`}
             label={definition.label}
             value=""
             secretIsPresent={isPresent}
             setIcon={definition.icon}
-            unsetIcon={definition.iconUnset}
             {...form.getInputProps(`integration.properties.${index}.value`)}
           />
         );

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

@@ -21,6 +21,10 @@ export const IntegrationTab = ({ form }: IntegrationTabProps) => {
       {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>

src/types/service.ts

@@ -1,12 +1,4 @@
-import {
-  IconKey,
-  IconKeyOff,
-  IconLockOff,
-  IconPassword,
-  IconUser,
-  IconUserOff,
-  TablerIcon,
-} from '@tabler/icons';
+import { IconKey, IconPassword, IconUser, TablerIcon } from '@tabler/icons';
 import { TileBaseType } from './tile';
 
 export interface ServiceType extends TileBaseType {
@@ -62,7 +54,7 @@ export type ConfigServiceIntegrationType = Omit<ServiceIntegrationType, 'propert
 export type ServiceIntegrationPropertyType = {
   type: 'private' | 'public';
   field: IntegrationField;
-  value?: string | null;
+  value?: string | undefined;
   isDefined: boolean;
 };
 
@@ -89,7 +81,6 @@ export const integrationFieldProperties: {
 export type IntegrationFieldDefinitionType = {
   type: 'private' | 'public';
   icon: TablerIcon;
-  iconUnset: TablerIcon;
   label: string;
 };
 
@@ -99,19 +90,16 @@ export const integrationFieldDefinitions: {
   apiKey: {
     type: 'private',
     icon: IconKey,
-    iconUnset: IconKeyOff,
     label: 'API Key',
   },
   username: {
     type: 'public',
     icon: IconUser,
-    iconUnset: IconUserOff,
     label: 'Username',
   },
   password: {
     type: 'private',
     icon: IconPassword,
-    iconUnset: IconLockOff,
     label: 'Password',
   },
 };