✨ Add new input design for secrets

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

@@ -1,18 +1,16 @@
 import {
-  ActionIcon,
   Button,
   Card,
   createStyles,
   Flex,
   Grid,
   Group,
+  PasswordInput,
   Stack,
-  TextInput,
   ThemeIcon,
   Title,
-  Tooltip,
 } from '@mantine/core';
-import { IconDeviceFloppy, TablerIcon } from '@tabler/icons';
+import { TablerIcon } from '@tabler/icons';
 import { useState } from 'react';
 
 interface GenericSecretInputProps {
@@ -27,12 +25,13 @@ export const GenericSecretInput = ({
   value,
   setIcon,
   onClickUpdateButton,
+  ...props
 }: GenericSecretInputProps) => {
   const { classes } = useStyles();
 
   const Icon = setIcon;
 
-  const [fieldValue, setFieldValue] = useState<string>(value);
+  const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(false);
 
   return (
     <Card withBorder>
@@ -51,31 +50,16 @@ export const GenericSecretInput = ({
         </Grid.Col>
         <Grid.Col xs={12} md={6}>
           <Flex gap={10} justify="end" align="end">
-            <Button
+            <Button variant="subtle" color="gray" px="xl">
-              onClick={() => {
-                setFieldValue('');
-                onClickUpdateButton(undefined);
-              }}
-              variant="subtle"
-              color="gray"
-              px="xl"
-            >
               Clear Secret
             </Button>
-            <TextInput
+            {displayUpdateField === true ? (
-              onChange={(event) => setFieldValue(event.currentTarget.value)}
+              <PasswordInput placeholder="new secret" width={200} {...props} />
-              rightSection={
+            ) : (
-                <Tooltip label="Update this secret" withinPortal>
+              <Button onClick={() => setDisplayUpdateField(true)} variant="light">
-                  <ActionIcon onClick={() => onClickUpdateButton(fieldValue)}>
+                Set Secret
-                    <IconDeviceFloppy width={20} strokeWidth={1.2} />
+              </Button>
-                  </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

@@ -56,6 +56,7 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
               label={`${property} (potentionally unmapped)`}
               secretIsPresent={isPresent}
               setIcon={IconKey}
+              value={formValue.value}
               {...form.getInputProps(`integration.properties.${index}.value`)}
             />
           );