Add empty state for Dashboard widget

Author: kshmidt-digma

src/components/Dashboard/SlowQueries/SlowQueries.stories.tsx

@@ -89,3 +89,16 @@ export const Default: Story = {
     }
   }
 };
+
+export const Empty: Story = {
+  args: {
+    data: {
+      data: {
+        totalCount: 0,
+        entries: []
+      },
+      type: "SlowQuery",
+      error: null
+    }
+  }
+};

src/components/Dashboard/SlowQueries/index.tsx

@@ -9,6 +9,7 @@ import { Pagination } from "../../common/Pagination";
 import { Toggle } from "../../common/Toggle";
 import { ToggleValue } from "../../common/Toggle/types";
 import { Tooltip } from "../../common/Tooltip";
+import { LightBulbSmallCrossedIcon } from "../../common/icons/LightBulbSmallCrossedIcon";
 import { SnailIcon } from "../../common/icons/SnailIcon";
 import { WarningCircleLargeIcon } from "../../common/icons/WarningCircleLargeIcon";
 import { actions } from "../actions";
@@ -190,7 +191,12 @@ export const SlowQueries = (props: SlowQueriesProps) => {
               {error}
             </s.ErrorMessage>
           ) : (
-            <span>No data</span>
+            <>
+              <s.EmptyStateIconContainer>
+                <LightBulbSmallCrossedIcon color={"currentColor"} size={72} />
+              </s.EmptyStateIconContainer>
+              <span>No data</span>
+            </>
           )}
         </s.EmptyStateContainer>
       ) : (

src/components/Dashboard/SlowQueries/styles.ts

@@ -113,8 +113,34 @@ export const EmptyStateContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 8px;
   font-size: 14px;
   flex-grow: 1;
+  color: #dadada;
+`;
+
+export const EmptyStateIconContainer = styled.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  color: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#fbfdff";
+      case "dark":
+      case "dark-jetbrains":
+        return "#9b9b9b";
+    }
+  }};
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#d0d6eb";
+      case "dark":
+      case "dark-jetbrains":
+        return "#323334";
+    }
+  }};
 `;
 
 export const ErrorMessage = styled.span`