playwright tests update

package.json

@@ -127,18 +127,18 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-runtime": "^7.24.3",
     "@babel/runtime": "^7.24.4",
-    "@chromatic-com/storybook": "^1.3.3",
+    "@chromatic-com/storybook": "^1.3.4",
     "@emotion/jest": "^11.11.0",
     "@playwright/test": "^1.43.1",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/addon-themes": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-themes": "^8.0.10",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-webpack5": "^8.0.9",
-    "@storybook/test": "^8.0.9",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-webpack5": "^8.0.10",
+    "@storybook/test": "^8.0.10",
     "@svgr/cli": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
@@ -180,7 +180,7 @@
     "rimraf": "^5.0.5",
     "sass": "^1.75.0",
     "sass-loader": "^13.3.2",
-    "storybook": "^8.0.9",
+    "storybook": "^8.0.10",
     "style-loader": "^3.3.3",
     "ts-jest": "^29.1.2",
     "util": "^0.12.5",

src/components/Atomic/TableNew/Table.tsx

@@ -25,19 +25,20 @@ const Table: FC<Props> = (props) => {
         defaultSelectedRowIds,
         defaultSortBy,
         enablePagination,
-        height,
-        hideHeader,
-        i18n,
-        id,
         getCellProps,
         getColumnProps,
         getRowProps,
         globalSearch,
+        height,
+        hideHeader,
+        i18n,
+        id,
         onRowsSelect,
         paginationPortalTargetId,
         paginationProps,
         primaryAttribute,
         rowHeight,
+        showFilterButton,
         unselectRowsToken,
     } = { ...defaultProps, ...props }
 
@@ -207,7 +208,7 @@ const Table: FC<Props> = (props) => {
                     }}
                     preGlobalFilteredRows={preGlobalFilteredRows}
                     setGlobalFilter={setGlobalFilter}
-                    showFilterButton={props.showFilterButton}
+                    showFilterButton={showFilterButton}
                 />
             )}
             <div

src/components/Atomic/TableNew/Table.types.ts

@@ -58,4 +58,5 @@ export const defaultProps = {
     getRowProps: () => ({}),
     globalSearch: true,
     rowHeight: DEFAULT_ROW_HEIGHT,
+    showFilterButton: true,
 }

src/stories/Layout/LeftPanel.stories.jsx

@@ -42,7 +42,7 @@ Default.args = {}
 
 const TemplateActive = (args) => (
     <div style={{ display: 'flex', margin: -10 }}>
-        <div style={{ padding: 10 }}>
+        <div style={{ padding: 10, display: 'flex', width: 300 }}>
             <div id='header-icon-collapse-portal-target' style={{ display: 'none' }}></div>
             <LeftPanel
                 {...args}
@@ -55,7 +55,7 @@ const TemplateActive = (args) => (
                 }
             />
         </div>
-        <div style={{ padding: 10 }}>
+        <div style={{ padding: 10, display: 'flex', width: 300 }}>
             <div id='header-icon-collapse-portal-target'></div>
             <LeftPanel
                 {...args}

src/stories/Modal/ShareDeviceModal.stories.jsx

@@ -13,8 +13,8 @@ export default {
 const Template = (args) => {
     const [show, setShow] = useState(true)
     const [shared, setShared] = useState([
-        { name: 'Ondrej Tomcik', email: '[email protected]', image: 'https://placekitten.com/40/40' },
-        { name: 'Martin Maderič', email: '[email protected]', image: 'https://placekitten.com/40/40' },
+        { name: 'Ondrej Tomcik', email: '[email protected]', image: 'https://picsum.photos/id/338/40/40' },
+        { name: 'Martin Maderič', email: '[email protected]', image: 'https://picsum.photos/id/349/40/40' },
     ])
 
     return (

tests/components.spec.ts

@@ -96,9 +96,16 @@ const testMethod = async (page: Page, group: string, name: string, view: string)
 
     await page.waitForSelector('#preview-loader', { state: 'detached', timeout: 90000 })
 
+    // use fullscreen mode for storybook
     await page.click("button[aria-label='Shortcuts']")
     await page.click('a#list-item-F')
 
+    // close Storybook notification on bottom left side
+    const button = await page.$('a[href="/?path=/settings/whats-new"] button')
+    if (button) {
+        await button.click()
+    }
+
     // secure interval for animations
     await page.waitForTimeout(5000)
     await page.locator('#storybook-preview-iframe').focus()