Merge branch 'dev' into edit-mode-password

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -1,13 +1,14 @@
 import {
+  Accordion,
   ActionIcon,
   Anchor,
   Badge,
   Button,
   createStyles,
-  Divider,
   Grid,
   Group,
   HoverCard,
+  Kbd,
   Modal,
   Table,
   Text,
@@ -36,6 +37,7 @@ import { useConfigStore } from '../../../../config/store';
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore';
 import { useColorTheme } from '../../../../tools/color';
+import Tip from '../../../layout/Tip';
 import { usePrimaryGradient } from '../../../layout/useGradient';
 import Credits from '../../../Settings/Common/Credits';
 
@@ -51,6 +53,23 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
   const informations = useInformationTableItems(newVersionAvailable);
   const { t } = useTranslation(['common', 'layout/modals/about']);
 
+  const keybinds = [
+    { key: 'Mod + J', shortcut: 'Toggle light/dark mode' },
+    { key: 'Mod + K', shortcut: 'Focus on search bar' },
+    { key: 'Mod + B', shortcut: 'Open docker widget' },
+    { key: 'Mod + E', shortcut: 'Toggle Edit mode' },
+  ];
+  const rows = keybinds.map((element) => (
+    <tr key={element.key}>
+      <td>
+        <Kbd>{element.key}</Kbd>
+      </td>
+      <td>
+        <Text>{element.shortcut}</Text>
+      </td>
+    </tr>
+  ));
+
   return (
     <Modal
       onClose={() => closeModal()}
@@ -77,7 +96,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
         <Trans i18nKey="layout/modals/about:description" />
       </Text>
 
-      <Table mb="lg" striped highlightOnHover withBorder>
+      <Table mb="lg" highlightOnHover withBorder>
         <tbody>
           {informations.map((item, index) => (
             <tr key={index}>
@@ -101,8 +120,26 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
           ))}
         </tbody>
       </Table>
+      <Accordion mb={5} variant="contained" radius="md">
+        <Accordion.Item value="keybinds">
+          <Accordion.Control icon={<IconKey size={20} />}>
+            {t('layout/modals/about:keybinds')}
+          </Accordion.Control>
+          <Accordion.Panel>
+            <Table mb={5}>
+              <thead>
+                <tr>
+                  <th>{t('layout/modals/about:key')}</th>
+                  <th>{t('layout/modals/about:action')}</th>
+                </tr>
+              </thead>
+              <tbody>{rows}</tbody>
+            </Table>
+            <Tip>{t('layout/modals/about:tip')}</Tip>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
 
-      <Divider variant="dashed" mb="md" />
       <Title order={6} mb="xs" align="center">
         {t('layout/modals/about:contact')}
       </Title>

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/IconSelector.tsx

@@ -90,7 +90,8 @@ export const IconSelector = ({
         }
         variant="default"
         withAsterisk
-        dropdownComponent={(props: any) => <ScrollArea {...props} mah={400} />}
+        dropdownComponent={(props: any) => <ScrollArea {...props} mah={250} />}
+        dropdownPosition="bottom"
         required
         onChange={(event) => {
           if (allowAppNamePropagation) {

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

@@ -6,7 +6,6 @@ import {
   Grid,
   Group,
   PasswordInput,
-  Stack,
   ThemeIcon,
   Title,
   Text,
@@ -40,7 +39,7 @@ export const GenericSecretInput = ({
 
   const Icon = setIcon;
 
-  const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(false);
+  const [displayUpdateField, setDisplayUpdateField] = useState<boolean>(!secretIsPresent);
   const { t } = useTranslation(['layout/modals/add-app', 'common']);
 
   return (
@@ -51,26 +50,26 @@ export const GenericSecretInput = ({
             <ThemeIcon color={secretIsPresent ? 'green' : 'red'} variant="light" size="lg">
               <Icon size={18} />
             </ThemeIcon>
-            <Stack spacing={0}>
+            <Flex justify="start" align="start" direction="column">
               <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>
-                  )}
+                  <Badge
+                    className={classes.textTransformUnset}
+                    color={secretIsPresent ? 'green' : 'red'}
+                    variant="dot"
+                  >
+                    {secretIsPresent
+                      ? t('integration.type.defined')
+                      : t('integration.type.undefined')}
+                  </Badge>
                   {type === 'private' ? (
                     <Tooltip
                       label={t('integration.type.explanationPrivate')}
-                      width={200}
+                      width={400}
                       multiline
                       withinPortal
                       withArrow
@@ -82,7 +81,7 @@ export const GenericSecretInput = ({
                   ) : (
                     <Tooltip
                       label={t('integration.type.explanationPublic')}
-                      width={200}
+                      width={400}
                       multiline
                       withinPortal
                       withArrow
@@ -94,29 +93,20 @@ export const GenericSecretInput = ({
                   )}
                 </Group>
               </Group>
-              <Text size="xs" color="dimmed">
+              <Text size="xs" color="dimmed" w={400}>
                 {type === 'private'
                   ? 'Private: Once saved, you cannot read out this value again'
                   : 'Public: Can be read out repeatedly'}
               </Text>
-            </Stack>
+            </Flex>
           </Group>
         </Grid.Col>
         <Grid.Col xs={12} md={6}>
           <Flex gap={10} justify="end" align="end">
-            <Button
-              onClick={() => {
-                setDisplayUpdateField(false);
-                onClickUpdateButton(undefined);
-              }}
-              variant="subtle"
-              color="gray"
-              px="xl"
-            >
-              {t('integration.secrets.clear')}
-            </Button>
             {displayUpdateField === true ? (
               <PasswordInput
+                required
+                defaultValue={value}
                 placeholder="new secret"
                 styles={{ root: { width: 200 } }}
                 {...props}

src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx

@@ -10,6 +10,9 @@ interface NetworkTabProps {
 
 export const NetworkTab = ({ form }: NetworkTabProps) => {
   const { t } = useTranslation('layout/modals/add-app');
+  const acceptableStatusCodes = (form.values.network.statusCodes ?? ['200']).map((x) =>
+    x.toString()
+  );
   return (
     <Tabs.Panel value="network" pt="lg">
       <Switch
@@ -27,7 +30,7 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
           data={StatusCodes}
           clearable
           searchable
-          defaultValue={form.values.network.okStatus.map((x) => `${x}`)}
+          defaultValue={acceptableStatusCodes}
           variant="default"
           {...form.getInputProps('network.statusCodes')}
         />

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -95,7 +95,7 @@ export const AvailableElementTypes = ({
                   },
                   network: {
                     enabledStatusChecker: true,
-                    okStatus: [200],
+                    statusCodes: ['200'],
                   },
                   behaviour: {
                     isOpeningNewTab: true,