From 3353d35a53f51ffd819c824aa90173d36eb77330 Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Fri, 16 Dec 2022 20:40:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20new=20input=20design=20for=20?=
 =?UTF-8?q?secrets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputElements/GenericSecretInput.tsx      | 40 ++++++-------------
 .../IntegrationOptionsRenderer.tsx            |  1 +
 2 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx b/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
index c7a5c6f82..a87b96d8b 100644
--- a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
+++ b/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
-              onClick={() => {
-                setFieldValue('');
-                onClickUpdateButton(undefined);
-              }}
-              variant="subtle"
-              color="gray"
-              px="xl"
-            >
+            <Button 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
-            />
+            {displayUpdateField === true ? (
+              <PasswordInput placeholder="new secret" width={200} {...props} />
+            ) : (
+              <Button onClick={() => setDisplayUpdateField(true)} variant="light">
+                Set Secret
+              </Button>
+            )}
           </Flex>
         </Grid.Col>
       </Grid>
diff --git a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx b/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
index a07880ffe..6f9883902 100644
--- a/src/components/Dashboard/Modals/EditService/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/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`)}
             />
           );