Add global error filters

.storybook/preview.tsx

@@ -41,9 +41,6 @@ const preview: Preview = {
       );
     }
   ],
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" }
-  },
   globalTypes: {
     theme: {
       name: "Theme",

package.json

@@ -11,6 +11,7 @@
     "test": "jest",
     "test:coverage": "jest --coverage",
     "storybook": "storybook dev -p 6006",
+    "start": "npm run storybook",
     "build-storybook": "storybook build",
     "build:dashboard:dev": "webpack --config webpack.dev.ts --env app=dashboard",
     "build:documentation:dev": "webpack --config webpack.dev.ts --env app=documentation",
@@ -31,8 +32,7 @@
     "build:prod": "webpack --config webpack.prod.ts",
     "build:prod:web": "webpack --config webpack.prod.ts --env platform=Web",
     "precommit": "lint-staged",
-    "prepare": "husky",
-    "start": "npm run storybook"
+    "prepare": "husky"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
@@ -57,16 +57,16 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.2",
-    "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-a11y": "^8.3.5",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.4",
-    "@storybook/addon-interactions": "^8.3.4",
-    "@storybook/addon-links": "^8.3.4",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.4",
-    "@storybook/react": "^8.3.4",
-    "@storybook/react-webpack5": "^8.3.4",
-    "@storybook/test": "^8.3.4",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@storybook/test": "^8.3.5",
     "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.13",
     "@types/react": "^18.0.27",
@@ -95,7 +95,7 @@
     "lint-staged": "^15.2.10",
     "postcss-styled-syntax": "^0.6.4",
     "prettier": "^2.8.3",
-    "storybook": "^8.3.4",
+    "storybook": "^8.3.5",
     "storybook-addon-remix-react-router": "^3.0.1",
     "style-loader": "^3.3.1",
     "stylelint": "^16.9.0",

src/components/Assets/AssetTypeList/AssetTypeList.stories.tsx

@@ -21,6 +21,7 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
+    onAssetCountChange: fn(),
     setRefresher: fn()
   },
   play: () => {
@@ -67,6 +68,7 @@ export const Default: Story = {
 
 export const Empty: Story = {
   args: {
+    onAssetCountChange: fn(),
     setRefresher: fn()
   },
   play: () => {
@@ -84,6 +86,7 @@ export const Empty: Story = {
 
 export const EmptyWithParents: Story = {
   args: {
+    onAssetCountChange: fn(),
     setRefresher: fn()
   },
   play: () => {

src/components/Assets/AssetsFilter/styles.ts

@@ -1,39 +1,6 @@
 import styled from "styled-components";
-import { grayScale } from "../../common/App/v2colors";
 import { Select } from "../../common/v3/Select";
 
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-  border-radius: 4px;
-  background: ${({ theme }) => theme.colors.surface.primary};
-  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 29%);
-  font-size: 14px;
-  color: ${grayScale[400]};
-`;
-
-export const Header = styled.div`
-  color: ${({ theme }) => theme.colors.select.menu.text.primary};
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-`;
-
-export const FilterCategoryName = styled.div`
-  display: flex;
-  padding: 4px;
-  color: ${grayScale[400]};
-`;
-
-export const Footer = styled.div`
-  padding: 8px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
 export const StyledSelect = styled(Select)`
   background: ${({ theme }) => theme.colors.surface.brandDark};
 `;

src/components/Dashboard/MetricsReport/Header/index.tsx

@@ -18,6 +18,7 @@ import { TableIcon } from "../../../common/icons/16px/TableIcon";
 import { TreemapIcon } from "../../../common/icons/16px/TreemapIcon";
 import { ChevronIcon } from "../../../common/icons/20px/ChevronIcon";
 import { Direction } from "../../../common/icons/types";
+import { ToggleValue } from "../../../common/Toggle/types";
 import { NewIconButton } from "../../../common/v3/NewIconButton";
 import { Tooltip } from "../../../common/v3/Tooltip";
 import { actions } from "../../actions";
@@ -218,13 +219,13 @@ export const Header = ({ onGoBack }: HeaderProps) => {
     setPeriodInDays(newValue);
   };
 
-  const handleViewModeChanged = (value: string) => {
+  const handleViewModeChanged = (value: ToggleValue) => {
     sendUserActionTrackingEvent(trackingEvents.VIEW_MODE_CHANGED, { value });
     const newViewMode = value as ReportViewMode;
     setViewMode(newViewMode);
   };
 
-  const handleTimeModeChanged = (value: string) => {
+  const handleTimeModeChanged = (value: ToggleValue) => {
     sendUserActionTrackingEvent(trackingEvents.TIME_MODE_CHANGED, { value });
     const newTimeMode = value as ReportTimeMode;
     setTimeMode(newTimeMode);
@@ -239,7 +240,7 @@ export const Header = ({ onGoBack }: HeaderProps) => {
   const title =
     viewLevel === "endpoints"
       ? `${selectedService ?? ""} Service`
-      : "Services with Issues map";
+      : "Issues Map";
   const titleSuffix = viewLevel === "endpoints" ? " Endpoints" : "";
   const tooltipTitle = `${title} ${titleSuffix}`;
 

src/components/Dashboard/MetricsReport/Table/index.tsx

@@ -134,7 +134,7 @@ export const Table = ({
       }
     }),
     columnHelper.accessor((row) => row, {
-      header: "Critical issues",
+      header: "Issues",
       id: "issues",
       cell: (info) => {
         const value = info.getValue();

src/components/Errors/GlobalErrorsList/GlobalErrorsFilters/GlobalErrorsFilters.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { GlobalErrorsFilters } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof GlobalErrorsFilters> = {
+  title: "Errors/GlobalErrorsList/GlobalErrorsFilters",
+  component: GlobalErrorsFilters,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {};