[Index Management] Fix component template usage count sort (#147141)

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_list.test.ts

@@ -46,7 +46,16 @@ describe('<ComponentTemplateList />', () => {
       isManaged: false,
     };
 
-    const componentTemplates = [componentTemplate1, componentTemplate2];
+    const componentTemplate3: ComponentTemplateListItem = {
+      name: 'test_component_template_3',
+      hasMappings: true,
+      hasAliases: true,
+      hasSettings: true,
+      usedBy: ['test_index_template_1', 'test_index_template_2'],
+      isManaged: false,
+    };
+
+    const componentTemplates = [componentTemplate1, componentTemplate2, componentTemplate3];
 
     httpRequestsMockHelpers.setLoadComponentTemplatesResponse(componentTemplates);
 
@@ -63,6 +72,26 @@ describe('<ComponentTemplateList />', () => {
       });
     });
 
+    test('should sort "Usage count" column by number', async () => {
+      const { actions, table } = testBed;
+
+      // Sort ascending
+      await actions.clickTableColumnSortButton(1);
+
+      const { tableCellsValues: ascTableCellsValues } =
+        table.getMetaData('componentTemplatesTable');
+      const ascUsageCountValues = ascTableCellsValues.map((row) => row[2]);
+      expect(ascUsageCountValues).toEqual(['Not in use', '1', '2']);
+
+      // Sort descending
+      await actions.clickTableColumnSortButton(1);
+
+      const { tableCellsValues: descTableCellsValues } =
+        table.getMetaData('componentTemplatesTable');
+      const descUsageCountValues = descTableCellsValues.map((row) => row[2]);
+      expect(descUsageCountValues).toEqual(['2', '1', 'Not in use']);
+    });
+
     test('should reload the component templates data', async () => {
       const { component, actions } = testBed;
 

x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/component_template_list.helpers.ts

@@ -32,7 +32,7 @@ export type ComponentTemplateListTestBed = TestBed<ComponentTemplateTestSubjects
 };
 
 const createActions = (testBed: TestBed) => {
-  const { find } = testBed;
+  const { find, component } = testBed;
 
   /**
    * User Actions
@@ -42,7 +42,7 @@ const createActions = (testBed: TestBed) => {
   };
 
   const clickComponentTemplateAt = async (index: number) => {
-    const { component, table, router } = testBed;
+    const { table, router } = testBed;
     const { rows } = table.getMetaData('componentTemplatesTable');
     const componentTemplateLink = findTestSubject(
       rows[index].reactWrapper,
@@ -57,6 +57,13 @@ const createActions = (testBed: TestBed) => {
     });
   };
 
+  const clickTableColumnSortButton = async (index: number) => {
+    await act(async () => {
+      find('tableHeaderSortButton').at(index).simulate('click');
+    });
+    component.update();
+  };
+
   const clickDeleteActionAt = (index: number) => {
     const { table } = testBed;
 
@@ -70,6 +77,7 @@ const createActions = (testBed: TestBed) => {
     clickReloadButton,
     clickComponentTemplateAt,
     clickDeleteActionAt,
+    clickTableColumnSortButton,
   };
 };
 

x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/table.tsx

@@ -187,7 +187,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
         name: i18n.translate('xpack.idxMgmt.componentTemplatesList.table.isInUseColumnTitle', {
           defaultMessage: 'Usage count',
         }),
-        sortable: true,
+        sortable: ({ usedBy }: ComponentTemplateListItem) => usedBy.length,
         render: (usedBy: string[]) => {
           if (usedBy.length) {
             return usedBy.length;