fix: fix storybook coverage task (#5256)

- Fixes storybook coverage command: the coverage directory path was
incorrect, but instead of failing `storybook:test --configuration=ci`,
it was hanging indefinitely.
- Switches back to `concurrently` to launch `storybook:static` and
`storybook:test` in parallel, which allows to use options to explicitly
kill `storybook:static` when `storybook:test` fails.
- Moves `storybook:test --configuration=ci` to its own command
`storybook:static:test`: used in the CI, and can be used locally to run
storybook tests without having to launch `storybook:dev` first.
- Creates command `storybook:coverage` and enables cache for this
command.
- Fixes Jest tests that were failing.
- Improves caching conditions for some tasks (for instance, no need to
invalidate Jest test cache if only Storybook story files were modified).

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { Section } from '@react-email/components';
 
 import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDatabaseConnection';
+import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
 import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard';
 import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
 import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
@@ -9,7 +10,6 @@ import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
-import { SettingsIntegrationDatabaseConnectionSummaryCard } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnectionSummaryCard';
 
 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
   const navigate = useNavigate();

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled';
+import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui';
+
+import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
+import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
+type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
+  databaseLogoUrl: string;
+  connectionId: string;
+  connectionName: string;
+  onRemove: () => void;
+  onEdit: () => void;
+};
+
+const StyledDatabaseLogoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: ${({ theme }) => theme.spacing(4)};
+  justify-content: center;
+  width: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledDatabaseLogo = styled.img`
+  height: 100%;
+`;
+
+export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
+  databaseLogoUrl,
+  connectionId,
+  connectionName,
+  onRemove,
+  onEdit,
+}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
+  const dropdownId =
+    'settings-integration-database-connection-summary-card-dropdown';
+
+  return (
+    <SettingsSummaryCard
+      title={
+        <>
+          <StyledDatabaseLogoContainer>
+            <StyledDatabaseLogo alt="" src={databaseLogoUrl} />
+          </StyledDatabaseLogoContainer>
+          {connectionName}
+        </>
+      }
+      rightComponent={
+        <>
+          <SettingsIntegrationDatabaseConnectionSyncStatus
+            connectionId={connectionId}
+          />
+          <Dropdown
+            dropdownId={dropdownId}
+            dropdownHotkeyScope={{ scope: dropdownId }}
+            clickableComponent={
+              <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+            }
+            dropdownComponents={
+              <DropdownMenu>
+                <DropdownMenuItemsContainer>
+                  <MenuItem
+                    LeftIcon={IconTrash}
+                    text="Remove"
+                    onClick={onRemove}
+                  />
+                  <MenuItem
+                    LeftIcon={IconPencil}
+                    text="Edit"
+                    onClick={onEdit}
+                  />
+                </DropdownMenuItemsContainer>
+              </DropdownMenu>
+            }
+          />
+        </>
+      }
+    />
+  );
+};