Wire up new tags API to settings page

https://issues.redhat.com/browse/COST-3307

src/api/settings.ts

@@ -28,12 +28,18 @@ export const enum SettingsType {
   awsCategoryKeys = 'awsCategoryKeys',
   awsCategoryKeysEnable = 'awsCategoryKeysEnable',
   awsCategoryKeysDisable = 'awsCategoryKeysDisable',
+  tags = 'tags',
+  tagsEnable = 'tagsEnable',
+  tagsDisable = 'tagsDisable',
 }
 
 export const SettingsTypePaths: Partial<Record<SettingsType, string>> = {
   [SettingsType.awsCategoryKeys]: 'settings/aws_category_keys/',
   [SettingsType.awsCategoryKeysEnable]: 'settings/aws_category_keys/enable/',
   [SettingsType.awsCategoryKeysDisable]: 'settings/aws_category_keys/disable/',
+  [SettingsType.tags]: 'settings/tags',
+  [SettingsType.tagsEnable]: 'settings/tags/enable/',
+  [SettingsType.tagsDisable]: 'settings/tags/disable/',
 };
 
 export function fetchSettings(settingsType: SettingsType, query: string) {

src/routes/settings/costCategory/costCategory.tsx

@@ -66,8 +66,8 @@ const CostCategory: React.FC<CostCategoryProps> = ({ canWrite }) => {
 
   const getPagination = (isDisabled = false, isBottom = false) => {
     const count = settings?.meta ? settings.meta.count : 0;
-    const limit = settings?.meta?.limit ? settings.meta.limit : baseQuery.limit; // Todo: API doesn't provide limit
-    const offset = settings?.meta?.offset ? settings.meta.offset : baseQuery.offset; // Todo: API doesn't provide offset
+    const limit = settings?.meta ? settings.meta.limit : baseQuery.limit;
+    const offset = settings?.meta ? settings.meta.offset : baseQuery.offset;
     const page = Math.trunc(offset / limit + 1);
 
     return (
@@ -180,7 +180,7 @@ const CostCategory: React.FC<CostCategoryProps> = ({ canWrite }) => {
   };
 
   const handleOnSetPage = pageNumber => {
-    const newQuery = queryUtils.handleOnSetPage(query, settings, pageNumber);
+    const newQuery = queryUtils.handleOnSetPage(query, settings, pageNumber, true);
     setQuery(newQuery);
   };
 
@@ -206,7 +206,6 @@ const CostCategory: React.FC<CostCategoryProps> = ({ canWrite }) => {
   const categories = getCategories();
   const isDisabled = categories.length === 0;
 
-  // Note: Providers are fetched via the AccountSettings component used by all routes
   if (settingsError) {
     return <NotAvailable />;
   }

src/routes/settings/costCategory/costCategoryTable.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 import { DataTable } from 'routes/components/dataTable';
+import { styles } from 'routes/components/dataTable/dataTable.styles';
 import type { RouterComponentProps } from 'utils/router';
 import { withRouter } from 'utils/router';
 
@@ -28,12 +29,6 @@ interface CostCategoryState {
 
 type CostCategoryProps = CostCategoryOwnProps;
 
-export const CostCategoryColumnIds = {
-  infrastructure: 'infrastructure',
-  monthOverMonth: 'monthOverMonth',
-  supplementary: 'supplementary',
-};
-
 class CostCategoryBase extends React.Component<CostCategoryProps, CostCategoryState> {
   public state: CostCategoryState = {
     columns: [],
@@ -68,14 +63,15 @@ class CostCategoryBase extends React.Component<CostCategoryProps, CostCategorySt
         name: '', // Selection column
       },
       {
-        orderBy: 'key', // Todo: update sort name
+        orderBy: 'key',
         name: intl.formatMessage(messages.detailsResourceNames, { value: 'name' }),
         ...(categories.length && { isSortable: true }),
       },
       {
         orderBy: 'enabled',
         name: intl.formatMessage(messages.detailsResourceNames, { value: 'status' }),
         ...(categories.length && { isSortable: true }),
+        style: styles.lastItemColumn,
       },
     ];
 
@@ -92,6 +88,7 @@ class CostCategoryBase extends React.Component<CostCategoryProps, CostCategorySt
             ) : (
               <Label>{intl.formatMessage(messages.disabled)}</Label>
             ),
+            style: styles.lastItem,
           },
         ],
         item,