✨ Add visual hint for defined and undefined credentials

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

@@ -9,15 +9,21 @@ import {
   Stack,
   ThemeIcon,
   Title,
+  Text,
+  Badge,
+  Tooltip,
 } from '@mantine/core';
-import { TablerIcon } from '@tabler/icons';
+import { IconLock, TablerIcon } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+import { AppIntegrationPropertyAccessabilityType } from '../../../../../../../../types/app';
 
 interface GenericSecretInputProps {
   label: string;
   value: string;
   setIcon: TablerIcon;
+  secretIsPresent: boolean;
+  type: AppIntegrationPropertyAccessabilityType;
   onClickUpdateButton: (value: string | undefined) => void;
 }
 
@@ -25,6 +31,8 @@ export const GenericSecretInput = ({
   label,
   value,
   setIcon,
+  secretIsPresent,
+  type,
   onClickUpdateButton,
   ...props
 }: GenericSecretInputProps) => {
@@ -36,17 +44,61 @@ export const GenericSecretInput = ({
   const { t } = useTranslation(['layout/modals/add-app', 'common']);
 
   return (
-    <Card withBorder>
+    <Card p="xs" withBorder>
       <Grid>
         <Grid.Col className={classes.alignSelfCenter} xs={12} md={6}>
           <Group spacing="sm">
-            <ThemeIcon color="green" variant="light">
+            <ThemeIcon color={secretIsPresent ? 'green' : 'red'} variant="light" size="lg">
               <Icon size={18} />
             </ThemeIcon>
             <Stack spacing={0}>
-              <Title className={classes.subtitle} order={6}>
-                {t(label)}
-              </Title>
+              <Group spacing="xs">
+                <Title className={classes.subtitle} order={6}>
+                  {t(label)}
+                </Title>
+
+                <Group spacing="xs">
+                  {secretIsPresent ? (
+                    <Badge className={classes.textTransformUnset} color="green" variant="dot">
+                      {t('integration.type.defined')}
+                    </Badge>
+                  ) : (
+                    <Badge className={classes.textTransformUnset} color="red" variant="dot">
+                      {t('integration.type.undefined')}
+                    </Badge>
+                  )}
+                  {type === 'private' ? (
+                    <Tooltip
+                      label={t('integration.type.explanationPrivate')}
+                      width={200}
+                      multiline
+                      withinPortal
+                      withArrow
+                    >
+                      <Badge className={classes.textTransformUnset} color="orange" variant="dot">
+                      {t('integration.type.private')}
+                      </Badge>
+                    </Tooltip>
+                  ) : (
+                    <Tooltip
+                      label={t('integration.type.explanationPublic')}
+                      width={200}
+                      multiline
+                      withinPortal
+                      withArrow
+                    >
+                      <Badge className={classes.textTransformUnset} color="red" variant="dot">
+                      {t('integration.type.public')}
+                      </Badge>
+                    </Tooltip>
+                  )}
+                </Group>
+              </Group>
+              <Text size="xs" color="dimmed">
+                {type === 'private'
+                  ? 'Private: Once saved, you cannot read out this value again'
+                  : 'Public: Can be read out repeatedly'}
+              </Text>
             </Stack>
           </Group>
         </Grid.Col>
@@ -80,4 +132,7 @@ const useStyles = createStyles(() => ({
   alignSelfCenter: {
     alignSelf: 'center',
   },
+  textTransformUnset: {
+    textTransform: 'inherit',
+  },
 }));

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

@@ -45,6 +45,7 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
         const formValue = form.values.integration?.properties[indexInFormValue];
 
         const isPresent = formValue?.isDefined;
+        const accessabilityType = formValue?.type;
 
         if (!definition) {
           return (
@@ -57,6 +58,7 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
               secretIsPresent={isPresent}
               setIcon={IconKey}
               value={formValue.value}
+              type={accessabilityType}
               {...form.getInputProps(`integration.properties.${index}.value`)}
             />
           );
@@ -72,6 +74,7 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
             value=""
             secretIsPresent={isPresent}
             setIcon={definition.icon}
+            type={accessabilityType}
             {...form.getInputProps(`integration.properties.${index}.value`)}
           />
         );