[APM] Filters are not prefilled when the custom link flyout is opened…

… from a transaction page. (#61650) * open flyout with filters prefilled * addressing pr comments * addressing pr comments Co-authored-by: Elastic Machine <[email protected]>
elastic · Apr 1, 2020 · 7975765 · 7975765
1 parent aab5a0c
commit 7975765
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 23 deletions.
diff --git a/...public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FiltersSection.tsx b/...public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/FiltersSection.tsx
@@ -116,7 +116,7 @@ export const FiltersSection = ({
             </EuiFlexItem>
             <EuiFlexItem>
               <EuiFieldText
-                data-test-subj={`value-${idx}`}
+                data-test-subj={`${key}.value`}
                 fullWidth
                 placeholder={i18n.translate(
                   'xpack.apm.settings.customizeUI.customLink.flyOut.filters.defaultOption.value',

diff --git a/...gins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/index.tsx b/...gins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CustomLinkFlyout/index.tsx
@@ -14,10 +14,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
-import {
-  CustomLink,
-  Filter
-} from '../../../../../../../../../../plugins/apm/common/custom_link/custom_link_types';
+import { Filter } from '../../../../../../../../../../plugins/apm/common/custom_link/custom_link_types';
 import { useApmPluginContext } from '../../../../../../hooks/useApmPluginContext';
 import { FiltersSection } from './FiltersSection';
 import { FlyoutFooter } from './FlyoutFooter';
@@ -28,27 +25,32 @@ import { Documentation } from './Documentation';
 
 interface Props {
   onClose: () => void;
-  customLinkSelected?: CustomLink;
   onSave: () => void;
   onDelete: () => void;
+  defaults?: {
+    url?: string;
+    label?: string;
+    filters?: Filter[];
+  };
+  customLinkId?: string;
 }
 
+const filtersEmptyState: Filter[] = [{ key: '', value: '' }];
+
 export const CustomLinkFlyout = ({
   onClose,
-  customLinkSelected,
   onSave,
-  onDelete
+  onDelete,
+  defaults,
+  customLinkId
 }: Props) => {
   const { toasts } = useApmPluginContext().core.notifications;
   const [isSaving, setIsSaving] = useState(false);
 
-  const [label, setLabel] = useState(customLinkSelected?.label || '');
-  const [url, setUrl] = useState(customLinkSelected?.url || '');
-  const selectedFilters = customLinkSelected?.filters;
+  const [label, setLabel] = useState(defaults?.label || '');
+  const [url, setUrl] = useState(defaults?.url || '');
   const [filters, setFilters] = useState(
-    selectedFilters?.length
-      ? selectedFilters
-      : ([{ key: '', value: '' }] as Filter[])
+    defaults?.filters?.length ? defaults.filters : filtersEmptyState
   );
 
   const isFormValid = !!label && !!url;
@@ -61,7 +63,7 @@ export const CustomLinkFlyout = ({
     event.preventDefault();
     setIsSaving(true);
     await saveCustomLink({
-      id: customLinkSelected?.id,
+      id: customLinkId,
       label,
       url,
       filters,
@@ -131,7 +133,7 @@ export const CustomLinkFlyout = ({
             onClose={onClose}
             isSaving={isSaving}
             onDelete={onDelete}
-            customLinkId={customLinkSelected?.id}
+            customLinkId={customLinkId}
           />
         </EuiFlyout>
       </form>

diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
@@ -55,7 +55,8 @@ export const CustomLinkOverview = () => {
       {isFlyoutOpen && (
         <CustomLinkFlyout
           onClose={onCloseFlyout}
-          customLinkSelected={customLinkSelected}
+          defaults={customLinkSelected}
+          customLinkId={customLinkSelected?.id}
           onSave={() => {
             onCloseFlyout();
             refetch();

diff --git a/...gacy/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx b/...gacy/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.tsx
@@ -7,10 +7,7 @@
 import { EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { FunctionComponent, useMemo, useState } from 'react';
-import {
-  CustomLink as CustomLinkType,
-  Filter
-} from '../../../../../../../plugins/apm/common/custom_link/custom_link_types';
+import { Filter } from '../../../../../../../plugins/apm/common/custom_link/custom_link_types';
 import { Transaction } from '../../../../../../../plugins/apm/typings/es_schemas/ui/transaction';
 import {
   ActionMenu,
@@ -68,7 +65,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = ({
         { key: 'service.environment', value: transaction?.service.environment },
         { key: 'transaction.name', value: transaction?.transaction.name },
         { key: 'transaction.type', value: transaction?.transaction.type }
-      ] as Filter[],
+      ].filter((filter): filter is Filter => typeof filter.value === 'string'),
     [transaction]
   );
 
@@ -100,7 +97,7 @@ export const TransactionActionMenu: FunctionComponent<Props> = ({
     <>
       {isCustomLinkFlyoutOpen && (
         <CustomLinkFlyout
-          customLinkSelected={{ filters: { ...filters } } as CustomLinkType}
+          defaults={{ filters }}
           onClose={toggleCustomLinkFlyout}
           onSave={() => {
             toggleCustomLinkFlyout();

diff --git a/...pm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx b/...pm/public/components/shared/TransactionActionMenu/__test__/TransactionActionMenu.test.tsx
@@ -17,6 +17,7 @@ import * as hooks from '../../../../hooks/useFetcher';
 import { LicenseContext } from '../../../../context/LicenseContext';
 import { License } from '../../../../../../../../plugins/licensing/common/license';
 import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
+import * as apmApi from '../../../../services/rest/createCallApmApi';
 
 const renderTransaction = async (transaction: Record<string, any>) => {
   const rendered = render(
@@ -142,6 +143,12 @@ describe('TransactionActionMenu component', () => {
   });
 
   describe('Custom links', () => {
+    beforeAll(() => {
+      spyOn(apmApi, 'callApmApi').and.returnValue({});
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
     it('doesnt show custom links when license is not valid', () => {
       const license = new License({
         signature: 'test signature',
@@ -250,5 +257,53 @@ describe('TransactionActionMenu component', () => {
       });
       expectTextsInDocument(component, ['Custom Links']);
     });
+    it('opens flyout with filters prefilled', () => {
+      const license = new License({
+        signature: 'test signature',
+        license: {
+          expiryDateInMillis: 0,
+          mode: 'gold',
+          status: 'active',
+          type: 'gold',
+          uid: '1'
+        }
+      });
+      const component = render(
+        <LicenseContext.Provider value={license}>
+          <MockApmPluginContextWrapper>
+            <TransactionActionMenu
+              transaction={
+                Transactions.transactionWithMinimalData as Transaction
+              }
+            />
+          </MockApmPluginContextWrapper>
+        </LicenseContext.Provider>
+      );
+      act(() => {
+        fireEvent.click(component.getByText('Actions'));
+      });
+      expectTextsInDocument(component, ['Custom Links']);
+      act(() => {
+        fireEvent.click(component.getByText('Create custom link'));
+      });
+      expectTextsInDocument(component, ['Create link']);
+      const getFilterKeyValue = (key: string) => {
+        return {
+          [(component.getAllByText(key)[0] as HTMLOptionElement)
+            .text]: (component.getAllByTestId(
+            `${key}.value`
+          )[0] as HTMLInputElement).value
+        };
+      };
+      expect(getFilterKeyValue('service.name')).toEqual({
+        'service.name': 'opbeans-go'
+      });
+      expect(getFilterKeyValue('transaction.name')).toEqual({
+        'transaction.name': 'GET /api/products/:id/customers'
+      });
+      expect(getFilterKeyValue('transaction.type')).toEqual({
+        'transaction.type': 'request'
+      });
+    });
   });
 });