Add image size for no data in Alerts Table to avoid layout shift (#14…

…7706)

Fixes #138410

## Summary

I've added image size to avoid a layout shift in the empty state
component. Also added a storybook for that component.

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/empty_state.stories.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EmptyState as Component } from './empty_state';
+
+export default {
+  component: Component,
+  title: 'app/AlertTable',
+  argTypes: {
+    height: { type: 'select', options: ['short', 'tall'] },
+  },
+};
+
+export const EmptyState = {
+  args: {
+    height: 'tall',
+  },
+};

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/empty_state.tsx

@@ -45,7 +45,7 @@ export const EmptyState: React.FC<{ height?: keyof typeof heights }> = ({ height
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiImage size="200" alt="" url={icon} />
+                <EuiImage style={{ width: 200, height: 148 }} size="200" alt="" url={icon} />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>