Search bar fixes

.cypress/integration/9_integrations.spec.js

@@ -52,6 +52,22 @@ describe('Basic sanity test for integrations plugin', () => {
     cy.get('[data-test-subj="fields"]').click();
     cy.get('[data-test-subj="nginx-fields"]').should('exist')
   })
+
+  it('Uses the search of assets and fields tables', () => {
+    moveToAvailableNginxIntegration();
+    cy.get('input[type="search"]').eq(0).focus().type('ss4o{enter}');
+    cy.get('.euiTableRow').should('have.length', 1);//Filters correctly to the index pattern
+    cy.get('[data-test-subj="fields"]').click();
+    cy.get('input[type="search"]').eq(0).focus().clear().type('severity.observe')
+    cy.get('.euiTableRow').should('have.length', 2);//Filters correctly to the field name
+  })
+
+  it('Uses the filter of assets table', () => {
+    moveToAvailableNginxIntegration();
+    cy.get('.euiFilterGroup').trigger('mouseover').click();
+    cy.get('.euiFilterSelectItem').contains('visualization').click();
+    cy.get('.euiTableRow').should('have.length', 4);//Filters correctly to visualization types
+  })
 });
 
 describe('Tests the add nginx integration instance flow', () => {
@@ -75,6 +91,8 @@ describe('Tests the add nginx integration instance flow', () => {
   it('Navigates to installed integrations page and verifies that nginx-test exists', () => {
     moveToAddedIntegrations();
     cy.contains(testInstance).should('exist');
+    cy.get('input[type="search"]').eq(0).focus().type(`${testInstance}{enter}`);
+    cy.get('.euiTableRow').should('have.length', 1);//Filters correctly to the test integration instance
     cy.get(`[data-test-subj="${testInstance}IntegrationLink"]`).click();
   })
 

public/components/integrations/components/added_integration_table.tsx

@@ -139,12 +139,20 @@ export function AddedIntegrationsTable(props: AddedIntegrationsTableProps) {
     ],
   };
 
+  const entries = integrations.map((integration) => {
+    const id = integration.id;
+    const templateName = integration.templateName;
+    const creationDate = integration.creationDate;
+    const name = integration.name;
+    return { id, templateName, creationDate, name, data: { templateName, name } };
+  });
+
   return (
     <EuiPageContent data-test-subj="addedIntegrationsArea">
-      {integrations && integrations.length > 0 ? (
+      {entries && entries.length > 0 ? (
         <EuiInMemoryTable
           loading={props.loading}
-          items={integrations}
+          items={entries}
           itemId="id"
           columns={tableColumns}
           tableLayout="auto"

public/components/integrations/components/integration_assets_panel.tsx

@@ -45,7 +45,7 @@ export function IntegrationAssets(props: any) {
       truncateText: true,
       render: (value, record) => (
         <EuiText data-test-subj={`${record.id}IntegrationLink`}>
-          {_.truncate(record.attributes.title ? record.attributes.title : '(Unnamed)', {
+          {_.truncate(record.name, {
             length: 100,
           })}
         </EuiText>
@@ -54,7 +54,6 @@ export function IntegrationAssets(props: any) {
     {
       field: 'type',
       name: 'Type',
-      sortable: true,
       truncateText: true,
       render: (_value, record) => (
         <EuiText data-test-subj={`${record.type}IntegrationDescription`}>
@@ -64,16 +63,25 @@ export function IntegrationAssets(props: any) {
     },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 
+  const entries = assets?.savedObjects
+    ? assets.savedObjects
+        .filter((x: any) => x.type !== undefined)
+        .map((asset: any) => {
+          const name = asset.attributes.title ? asset.attributes.title : '(Unnamed)';
+          const type = asset.type;
+          const id = asset.id;
+          return { name, type, id, data: { name, type } };
+        })
+    : [];
+
   return (
     <EuiPanel data-test-subj={`${config.name}-assets`}>
       <PanelTitle title={'Assets'} />
       <EuiSpacer size="l" />
       <EuiInMemoryTable
         itemId="id"
         loading={false}
-        items={
-          assets?.savedObjects ? assets.savedObjects.filter((x: any) => x.type !== undefined) : []
-        }
+        items={entries}
         columns={tableColumns}
         pagination={{
           initialPageSize: 10,