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,

src/components/Dashboard/Tiles/Apps/AppPing.tsx

@@ -19,7 +19,7 @@ export const AppPing = ({ app }: AppPingProps) => {
     queryKey: ['ping', { id: app.id, name: app.name }],
     queryFn: async () => {
       const response = await fetch(`/api/modules/ping?url=${encodeURI(app.url)}`);
-      const isOk = app.network.okStatus.includes(response.status);
+      const isOk = app.network.statusCodes.includes(response.status.toString());
       return {
         status: response.status,
         state: isOk ? 'online' : 'down',
@@ -60,5 +60,3 @@ export const AppPing = ({ app }: AppPingProps) => {
     </motion.div>
   );
 };
-
-type PingState = 'loading' | 'down' | 'online';

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -36,7 +36,13 @@ export const AppTile = ({ className, app }: AppTileProps) => {
           className="dashboard-tile-app"
         >
           <Box hidden={false}>
-            <Title order={5} size="md" ta="center" lineClamp={1} className={cx(classes.appName, 'dashboard-tile-app-title')}>
+            <Title
+              order={5}
+              size="md"
+              ta="center"
+              lineClamp={1}
+              className={cx(classes.appName, 'dashboard-tile-app-title')}
+            >
               {app.name}
             </Title>
           </Box>

src/components/Dashboard/Tiles/GenericTileMenu.tsx

@@ -24,9 +24,9 @@ export const GenericTileMenu = ({
   }
 
   return (
-    <Menu withinPortal withArrow position="right-start">
+    <Menu withinPortal withArrow position="right">
       <Menu.Target>
-        <ActionIcon pos="absolute" top={4} right={4}>
+        <ActionIcon size="md" radius="md" variant="light" pos="absolute" top={8} right={8}>
           <IconDots />
         </ActionIcon>
       </Menu.Target>

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -10,9 +10,7 @@ export default function CustomizationSettings() {
   return (
     <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
       <Stack mt="xs" mb="md" spacing="xs">
-        <Text color="dimmed">
-          {t('text')}
-        </Text>
+        <Text color="dimmed">{t('text')}</Text>
         <CustomizationSettingsAccordeon />
       </Stack>
     </ScrollArea>

src/components/Settings/Customization/Meta/LogoImageChanger.tsx

@@ -8,7 +8,9 @@ export const LogoImageChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');
   const updateConfig = useConfigStore((x) => x.updateConfig);
   const { config, name: configName } = useConfigContext();
-  const [logoImageSrc, setLogoImageSrc] = useState(config?.settings.customization.logoImageUrl ?? '/imgs/logo/logo.png');
+  const [logoImageSrc, setLogoImageSrc] = useState(
+    config?.settings.customization.logoImageUrl ?? '/imgs/logo/logo.png'
+  );
 
   if (!configName) return null;
 

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -1,18 +1,20 @@
+import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
+import { useHotkeys, useWindowEvent } from '@mantine/hooks';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
 import axios from 'axios';
 import Consola from 'consola';
-import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
-import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
-import { useHotkeys } from '@mantine/hooks';
-import { hideNotification, showNotification } from '@mantine/notifications';
 import { useConfigContext } from '../../../../../config/provider';
 import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
 
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
-import { AddElementAction } from '../AddElementAction/AddElementAction';
 import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
 import { useCardStyles } from '../../../useCardStyles';
+import { AddElementAction } from '../AddElementAction/AddElementAction';
+
+const beforeUnloadEventText = 'Exit the edit mode to save your changes';
 
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
@@ -27,7 +29,17 @@ export const ToggleEditModeAction = () => {
   const { config } = useConfigContext();
   const { classes } = useCardStyles(true);
 
-  useHotkeys([['ctrl+E', toggleEditMode]]);
+  useHotkeys([['mod+E', toggleEditMode]]);
+
+  useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
+    if (enabled) {
+      // eslint-disable-next-line no-param-reassign
+      event.returnValue = beforeUnloadEventText;
+      return beforeUnloadEventText;
+    }
+
+    return undefined;
+  });
 
   const toggleButtonClicked = () => {
     toggleEditMode();