Add stories for agent keys (#125407) (#125489)

* Add story for agent keys table

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit d2a5c3d5f4)

Co-authored-by: Giorgos Bamparopoulos <georgios.bamparopoulos@elastic.co>

x-pack/plugins/apm/public/components/app/settings/agent_keys/agent_keys_table.stories.tsx

@@ -0,0 +1,79 @@
+/*
+ * 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 { Meta, Story } from '@storybook/react';
+import React, { ComponentProps } from 'react';
+import { CoreStart } from '../../../../../../../../src/core/public';
+import { createKibanaReactContext } from '../../../../../../../../src/plugins/kibana_react/public';
+import type { ApmPluginContextValue } from '../../../../context/apm_plugin/apm_plugin_context';
+import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context';
+import { AgentKeysTable } from './agent_keys_table';
+import { ApiKey } from '../../../../../../security/common/model';
+
+type Args = ComponentProps<typeof AgentKeysTable>;
+
+const coreMock = {
+  http: {
+    get: async () => {
+      return { fallBackToTransactions: false };
+    },
+  },
+  notifications: { toasts: { add: () => {} } },
+  uiSettings: { get: () => ({}) },
+} as unknown as CoreStart;
+
+const KibanaReactContext = createKibanaReactContext(coreMock);
+
+const agentKeys: ApiKey[] = [
+  {
+    id: 'M96XSX4BQcLuJqE2VX29',
+    name: 'apm_api_key1',
+    creation: 1641912161726,
+    invalidated: false,
+    username: 'elastic',
+    realm: 'reserved',
+    expiration: 0,
+    metadata: { application: 'apm' },
+  },
+
+  {
+    id: 'Nd6XSX4BQcLuJqE2eH2A',
+    name: 'apm_api_key2',
+    creation: 1641912170624,
+    invalidated: false,
+    username: 'elastic',
+    realm: 'reserved',
+    expiration: 0,
+    metadata: { application: 'apm' },
+  },
+];
+
+const stories: Meta<Args> = {
+  title: 'app/Settings/AgentKeys/AgentKeysTable',
+  component: AgentKeysTable,
+  decorators: [
+    (StoryComponent) => {
+      return (
+        <KibanaReactContext.Provider>
+          <MockApmPluginContextWrapper
+            value={{ core: coreMock } as unknown as ApmPluginContextValue}
+          >
+            <StoryComponent />
+          </MockApmPluginContextWrapper>
+        </KibanaReactContext.Provider>
+      );
+    },
+  ],
+};
+export default stories;
+
+export const ExampleData: Story<Args> = (args) => {
+  return <AgentKeysTable {...args} />;
+};
+
+ExampleData.args = {
+  agentKeys,
+};

x-pack/plugins/apm/public/components/app/settings/agent_keys/create_agent_key.stories.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 { Meta, Story } from '@storybook/react';
+import React, { ComponentProps } from 'react';
+import { CreateAgentKeyFlyout } from './create_agent_key';
+import { CreateApiKeyResponse } from '../../../../../common/agent_key_types';
+
+type Args = ComponentProps<typeof CreateAgentKeyFlyout>;
+
+const stories: Meta<Args> = {
+  title: 'app/Settings/AgentKeys/CreateAgentKeyFlyout',
+  component: CreateAgentKeyFlyout,
+};
+export default stories;
+
+export const Example: Story<Args> = (args) => {
+  return <CreateAgentKeyFlyout {...args} />;
+};
+
+Example.args = {
+  onCancel: () => {},
+  onSuccess: (agentKey: CreateApiKeyResponse) => {},
+  onError: (keyName: string, message: string) => {},
+};

x-pack/plugins/apm/public/components/app/settings/agent_keys/prompts/api_keys_not_enabled.stories.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 { Story } from '@storybook/react';
+import React from 'react';
+import { ApiKeysNotEnabled } from './api_keys_not_enabled';
+
+const stories = {
+  title: 'app/Settings/AgentKeys/prompts/ApiKeysNotEnabled',
+  component: ApiKeysNotEnabled,
+};
+export default stories;
+
+export const Example: Story = () => {
+  return <ApiKeysNotEnabled />;
+};

x-pack/plugins/apm/public/components/app/settings/agent_keys/prompts/permission_denied.stories.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 { Story } from '@storybook/react';
+import React from 'react';
+import { PermissionDenied } from './permission_denied';
+
+const stories = {
+  title: 'app/Settings/AgentKeys/prompts/PermissionDenied',
+  component: PermissionDenied,
+};
+export default stories;
+
+export const Example: Story = (args) => {
+  return <PermissionDenied {...args} />;
+};