Backport label updates to 2.x (opensearch-project#936)

* Update label handling on frontend + Refactors (opensearch-project#931) * Update label display on frontend Signed-off-by: Simeon Widdis <[email protected]> * Clear type errors in added_integration.tsx Signed-off-by: Simeon Widdis <[email protected]> * Remove unused imports Signed-off-by: Simeon Widdis <[email protected]> * Add missing labels Signed-off-by: Simeon Widdis <[email protected]> * Autoformat the whole repository Signed-off-by: Simeon Widdis <[email protected]> * Revert large sample data changes Signed-off-by: Simeon Widdis <[email protected]> * Undo _import autoescape Signed-off-by: Simeon Widdis <[email protected]> --------- Signed-off-by: Simeon Widdis <[email protected]> * Fix one more missing label change (opensearch-project#934) * Update label display on frontend Signed-off-by: Simeon Widdis <[email protected]> * Clear type errors in added_integration.tsx Signed-off-by: Simeon Widdis <[email protected]> * Remove unused imports Signed-off-by: Simeon Widdis <[email protected]> * Add missing labels Signed-off-by: Simeon Widdis <[email protected]> * Autoformat the whole repository Signed-off-by: Simeon Widdis <[email protected]> * Revert large sample data changes Signed-off-by: Simeon Widdis <[email protected]> * Undo _import autoescape Signed-off-by: Simeon Widdis <[email protected]> * Modify snapshots Signed-off-by: Simeon Widdis <[email protected]> * Update label handling in table Signed-off-by: Simeon Widdis <[email protected]> --------- Signed-off-by: Simeon Widdis <[email protected]> * Empty commit to re-trigger CI Signed-off-by: Simeon Widdis <[email protected]> --------- Signed-off-by: Simeon Widdis <[email protected]> (cherry picked from commit d2fbb97)
amsiglan · Sep 28, 2023 · 61c6ea6 · 61c6ea6
1 parent 0ff8cbf
commit 61c6ea6
Show file tree

Hide file tree

Showing 70 changed files with 1,256 additions and 1,494 deletions.
diff --git a/auto_sync_commit_metadata.json b/auto_sync_commit_metadata.json
@@ -1,4 +1,4 @@
 {
-    "last_github_commit": "747baaeda4caf6160234b7d530aea2f2db7deb12",
-    "last_gitfarm_commit": "f82af0b20311aebe9bf63c32378f362014afa451"
+    "last_github_commit": "d2fbb979b444205e1aafe4fbcf560122e277b65b",
+    "last_gitfarm_commit": "8dac3fbc9f8179c4dea8a75f8457cd5c19f93127"
 }
diff --git a/...omponents/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap b/...omponents/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
@@ -227,11 +227,10 @@ exports[`Added Integration View Test Renders added integration view using dummy
                                 data-test-subj="deleteInstanceButton"
                                 iconType="trash"
                                 onClick={[Function]}
-                                size="l"
                               >
                                 <button
                                   aria-label="Delete"
-                                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty"
+                                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
                                   data-test-subj="deleteInstanceButton"
                                   disabled={false}
                                   onClick={[Function]}

diff --git a/...rations/components/__tests__/__snapshots__/available_integration_table_view.test.tsx.snap b/...rations/components/__tests__/__snapshots__/available_integration_table_view.test.tsx.snap
@@ -1073,95 +1073,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
                                     >
                                       <div
                                         className="euiBadgeGroup euiBadgeGroup--gutterExtraSmall"
-                                      >
-                                        <span
-                                          className="euiBadgeGroup__item"
-                                          key=".0"
-                                        >
-                                          <EuiBadge>
-                                            <EuiInnerText>
-                                              <span
-                                                className="euiBadge euiBadge--iconLeft"
-                                                style={
-                                                  Object {
-                                                    "backgroundColor": "#d3dae6",
-                                                    "color": "#000",
-                                                  }
-                                                }
-                                                title="communication"
-                                              >
-                                                <span
-                                                  className="euiBadge__content"
-                                                >
-                                                  <span
-                                                    className="euiBadge__text"
-                                                  >
-                                                    communication
-                                                  </span>
-                                                </span>
-                                              </span>
-                                            </EuiInnerText>
-                                          </EuiBadge>
-                                        </span>
-                                        <span
-                                          className="euiBadgeGroup__item"
-                                          key=".1"
-                                        >
-                                          <EuiBadge>
-                                            <EuiInnerText>
-                                              <span
-                                                className="euiBadge euiBadge--iconLeft"
-                                                style={
-                                                  Object {
-                                                    "backgroundColor": "#d3dae6",
-                                                    "color": "#000",
-                                                  }
-                                                }
-                                                title="http"
-                                              >
-                                                <span
-                                                  className="euiBadge__content"
-                                                >
-                                                  <span
-                                                    className="euiBadge__text"
-                                                  >
-                                                    http
-                                                  </span>
-                                                </span>
-                                              </span>
-                                            </EuiInnerText>
-                                          </EuiBadge>
-                                        </span>
-                                        <span
-                                          className="euiBadgeGroup__item"
-                                          key=".2"
-                                        >
-                                          <EuiBadge>
-                                            <EuiInnerText>
-                                              <span
-                                                className="euiBadge euiBadge--iconLeft"
-                                                style={
-                                                  Object {
-                                                    "backgroundColor": "#d3dae6",
-                                                    "color": "#000",
-                                                  }
-                                                }
-                                                title="logs"
-                                              >
-                                                <span
-                                                  className="euiBadge__content"
-                                                >
-                                                  <span
-                                                    className="euiBadge__text"
-                                                  >
-                                                    logs
-                                                  </span>
-                                                </span>
-                                              </span>
-                                            </EuiInnerText>
-                                          </EuiBadge>
-                                        </span>
-                                      </div>
+                                      />
                                     </EuiBadgeGroup>
                                   </div>
                                 </td>

diff --git a/...ponents/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap b/...ponents/integrations/components/__tests__/__snapshots__/integration_details.test.tsx.snap
@@ -78,95 +78,7 @@ exports[`Available Integration Table View Test Renders nginx integration table v
             <EuiBadgeGroup>
               <div
                 className="euiBadgeGroup euiBadgeGroup--gutterExtraSmall"
-              >
-                <span
-                  className="euiBadgeGroup__item"
-                  key=".0"
-                >
-                  <EuiBadge>
-                    <EuiInnerText>
-                      <span
-                        className="euiBadge euiBadge--iconLeft"
-                        style={
-                          Object {
-                            "backgroundColor": "#d3dae6",
-                            "color": "#000",
-                          }
-                        }
-                        title="communication"
-                      >
-                        <span
-                          className="euiBadge__content"
-                        >
-                          <span
-                            className="euiBadge__text"
-                          >
-                            communication
-                          </span>
-                        </span>
-                      </span>
-                    </EuiInnerText>
-                  </EuiBadge>
-                </span>
-                <span
-                  className="euiBadgeGroup__item"
-                  key=".1"
-                >
-                  <EuiBadge>
-                    <EuiInnerText>
-                      <span
-                        className="euiBadge euiBadge--iconLeft"
-                        style={
-                          Object {
-                            "backgroundColor": "#d3dae6",
-                            "color": "#000",
-                          }
-                        }
-                        title="http"
-                      >
-                        <span
-                          className="euiBadge__content"
-                        >
-                          <span
-                            className="euiBadge__text"
-                          >
-                            http
-                          </span>
-                        </span>
-                      </span>
-                    </EuiInnerText>
-                  </EuiBadge>
-                </span>
-                <span
-                  className="euiBadgeGroup__item"
-                  key=".2"
-                >
-                  <EuiBadge>
-                    <EuiInnerText>
-                      <span
-                        className="euiBadge euiBadge--iconLeft"
-                        style={
-                          Object {
-                            "backgroundColor": "#d3dae6",
-                            "color": "#000",
-                          }
-                        }
-                        title="logs"
-                      >
-                        <span
-                          className="euiBadge__content"
-                        >
-                          <span
-                            className="euiBadge__text"
-                          >
-                            logs
-                          </span>
-                        </span>
-                      </span>
-                    </EuiInnerText>
-                  </EuiBadge>
-                </span>
-              </div>
+              />
             </EuiBadgeGroup>
           </div>
         </EuiFlexItem>

diff --git a/public/components/integrations/components/added_integration.tsx b/public/components/integrations/components/added_integration.tsx
@@ -5,14 +5,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiBadge,
-  EuiButton,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiGlobalToastList,
   EuiHealth,
-  EuiIcon,
   EuiInMemoryTable,
   EuiLink,
   EuiOverlayMask,
@@ -64,7 +60,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
 
-  const badge = (status) => {
+  const badge = (status: string) => {
     switch (status) {
       case 'available':
         return <EuiHealth color="success">Active</EuiHealth>;
@@ -136,7 +132,6 @@ export function AddedIntegration(props: AddedIntegrationProps) {
                 <EuiButtonIcon
                   iconType="trash"
                   aria-label="Delete"
-                  size="l"
                   color="danger"
                   onClick={() => {
                     getModal();
@@ -173,7 +168,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
 
     const assets = data?.assets || [];
 
-    const renderAsset = (record) => {
+    const renderAsset = (record: any) => {
       switch (record.assetType) {
         case 'dashboard':
           return (
@@ -234,7 +229,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
       },
       filters: [
         {
-          type: 'field_value_selection',
+          type: 'field_value_selection' as const,
           field: 'assetType',
           name: 'Type',
           multiSelect: false,

diff --git a/public/components/integrations/components/available_integration_card_view.tsx b/public/components/integrations/components/available_integration_card_view.tsx
@@ -9,17 +9,11 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiSearchBar,
-  EuiButton,
   EuiFieldSearch,
-  EuiSwitch,
   EuiButtonGroup,
-  EuiBadgeGroup,
-  EuiBadge,
-  EuiToolTip,
 } from '@elastic/eui';
 import _ from 'lodash';
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import {
   AvailableIntegrationsCardViewProps,
   AvailableIntegrationType,
@@ -54,7 +48,7 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
     },
   ];
 
-  const onChangeIcons = (optionId) => {
+  const onChangeIcons = (optionId: string) => {
     setToggleIconIdSelected(optionId);
     if (optionId === '0') {
       props.setCardView(false);
@@ -82,7 +76,7 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
                   data-test-subj={`integration_card_${i.name.toLowerCase()}`}
                   titleElement="span"
                   onClick={() => (window.location.hash = `#/available/${i.name}`)}
-                  footer={badges(i.components)}
+                  footer={badges(i.labels ?? [])}
                 />
               </EuiFlexItem>
             );

diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/public/components/integrations/components/available_integration_overview_page.tsx
@@ -25,6 +25,7 @@ import { useToast } from '../../../../public/components/common/toast';
 import { HttpStart } from '../../../../../../src/core/public';
 
 export interface AvailableIntegrationType {
+  labels?: string[];
   name: string;
   description: string;
   assetUrl?: string | undefined;
@@ -117,8 +118,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
       setData(exists.data);
 
       let newItems = exists.data.hits
-        .flatMap((hit: { components: Array<{ name: string }> }) => hit.components)
-        .map((component: { name: string }) => component.name);
+        .flatMap((hit: { labels?: string[] }) => hit.labels ?? []);
       newItems = [...new Set(newItems)].sort().map((newItem) => {
         return {
           name: newItem,

diff --git a/public/components/integrations/components/available_integration_table.tsx b/public/components/integrations/components/available_integration_table.tsx
@@ -5,18 +5,11 @@
 
 import {
   EuiButtonGroup,
-  EuiFieldSearch,
-  EuiFilterButton,
-  EuiFilterGroup,
-  EuiFilterSelectItem,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
   EuiInMemoryTable,
   EuiLink,
   EuiPageContent,
-  EuiPopover,
-  EuiPopoverTitle,
   EuiSpacer,
   EuiTableFieldDataColumnType,
   EuiText,
@@ -44,7 +37,7 @@ export function AvailableIntegrationsTable(props: AvailableIntegrationsTableProp
 
   const [toggleIconIdSelected, setToggleIconIdSelected] = useState('0');
 
-  const onChangeIcons = (optionId) => {
+  const onChangeIcons = (optionId: string) => {
     setToggleIconIdSelected(optionId);
     if (optionId === '0') {
       props.setCardView(false);
@@ -73,7 +66,7 @@ export function AvailableIntegrationsTable(props: AvailableIntegrationsTableProp
       name: 'Description',
       sortable: true,
       truncateText: true,
-      render: (value, record) => (
+      render: (_value, record) => (
         <EuiText data-test-subj={`${record.name}IntegrationDescription`}>
           {_.truncate(record.description, { length: 100 })}
         </EuiText>
@@ -84,7 +77,7 @@ export function AvailableIntegrationsTable(props: AvailableIntegrationsTableProp
       name: 'Categories',
       sortable: true,
       truncateText: true,
-      render: (value, record) => badges(record.components),
+      render: (_value, record) => badges(record.labels ?? []),
     },
   ] as Array<EuiTableFieldDataColumnType<any>>;
 

diff --git a/public/components/integrations/components/integration_category_badge_group.tsx b/public/components/integrations/components/integration_category_badge_group.tsx
@@ -6,24 +6,24 @@
 import { EuiBadge, EuiBadgeGroup, EuiToolTip } from '@elastic/eui';
 import React from 'react';
 
-export const badges = (categories) => {
-  if (categories.length <= 3) {
+export const badges = (labels: string[]) => {
+  if (labels.length <= 3) {
     return (
       <EuiBadgeGroup>
-        {categories.map((cateogry) => {
-          return <EuiBadge>{cateogry.name}</EuiBadge>;
+        {labels.map((label) => {
+          return <EuiBadge>{label}</EuiBadge>;
         })}
       </EuiBadgeGroup>
     );
   } else {
-    const tooltip = `+${categories.length - 2} more`;
+    const tooltip = `+${labels.length - 2} more`;
     return (
       <EuiBadgeGroup>
-        <EuiBadge>{categories[0].name}</EuiBadge>
-        <EuiBadge>{categories[1].name}</EuiBadge>
+        <EuiBadge>{labels[0]}</EuiBadge>
+        <EuiBadge>{labels[1]}</EuiBadge>
         <EuiBadge>
           <EuiToolTip
-            content={categories.slice(2).map((item, index) => (index ? ', ' : '') + item.name)}
+            content={labels.slice(2).map((item: string, index: number) => (index ? ', ' : '') + item)}
           >
             <h4>{tooltip}</h4>
           </EuiToolTip>