From 5ac3d084dc9d62132a3ca0b7dd497463f1d4b326 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Thu, 4 May 2023 12:19:09 -0400 Subject: [PATCH 1/2] Rename handle methods to better match property names --- .../views/details/awsDetails/awsDetails.tsx | 28 +++++++-------- .../details/awsDetails/detailsHeader.tsx | 4 +-- .../details/azureDetails/azureDetails.tsx | 24 ++++++------- .../components/breakdown/breakdownBase.tsx | 12 +++---- .../views/details/gcpDetails/gcpDetails.tsx | 24 ++++++------- .../views/details/ibmDetails/ibmDetails.tsx | 24 ++++++------- .../views/details/ociDetails/ociDetails.tsx | 24 ++++++------- .../ocpBreakdown/optimizationsBreakdown.tsx | 16 ++++----- .../views/details/ocpDetails/ocpDetails.tsx | 28 +++++++-------- .../views/details/rhelDetails/rhelDetails.tsx | 24 ++++++------- src/routes/views/explorer/explorer.tsx | 34 ++++++++++--------- src/routes/views/overview/overview.tsx | 8 ++--- src/routes/views/utils/handles.ts | 16 ++++----- 13 files changed, 134 insertions(+), 132 deletions(-) diff --git a/src/routes/views/details/awsDetails/awsDetails.tsx b/src/routes/views/details/awsDetails/awsDetails.tsx index e0dfa47dc..fb9fc21db 100644 --- a/src/routes/views/details/awsDetails/awsDetails.tsx +++ b/src/routes/views/details/awsDetails/awsDetails.tsx @@ -21,13 +21,13 @@ import { NotAvailable } from 'routes/state/notAvailable'; import { ExportModal } from 'routes/views/components/export'; import { getGroupByCostCategory, getGroupByOrgValue, getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCostTypeSelected, - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCostTypeSelected, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers'; import { getRouteForQuery } from 'routes/views/utils/query'; @@ -199,8 +199,8 @@ class AwsDetails extends React.Component { isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -239,7 +239,7 @@ class AwsDetails extends React.Component { isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} selectedItems={selectedItems} @@ -273,8 +273,8 @@ class AwsDetails extends React.Component { itemsTotal={itemsTotal} onBulkSelected={this.handleBulkSelected} onExportClicked={this.handleExportModalOpen} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination(isDisabled)} query={query} selectedItems={selectedItems} @@ -393,8 +393,8 @@ class AwsDetails extends React.Component { costType={costType} currency={currency} groupBy={groupById} - onCostTypeSelected={value => handleCostTypeSelected(query, router, value)} - onCurrencySelected={value => handleCurrencySelected(query, router, value)} + onCostTypeSelected={value => handleOnCostTypeSelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onGroupBySelected={this.handleGroupBySelected} report={report} /> diff --git a/src/routes/views/details/awsDetails/detailsHeader.tsx b/src/routes/views/details/awsDetails/detailsHeader.tsx index 0e4522c15..c99bf26bc 100644 --- a/src/routes/views/details/awsDetails/detailsHeader.tsx +++ b/src/routes/views/details/awsDetails/detailsHeader.tsx @@ -62,7 +62,7 @@ const resourcePathsType = ResourcePathsType.aws; const tagPathsType = TagPathsType.aws; class DetailsHeaderBase extends React.Component { - private handleCostTypeSelected = (value: string) => { + private handleOnCostTypeSelected = (value: string) => { const { onCostTypeSelected } = this.props; if (onCostTypeSelected) { @@ -115,7 +115,7 @@ class DetailsHeaderBase extends React.Component { tagPathsType={tagPathsType} />
- +
{showContent && ( diff --git a/src/routes/views/details/azureDetails/azureDetails.tsx b/src/routes/views/details/azureDetails/azureDetails.tsx index 7049be75b..1a688ad7c 100644 --- a/src/routes/views/details/azureDetails/azureDetails.tsx +++ b/src/routes/views/details/azureDetails/azureDetails.tsx @@ -19,12 +19,12 @@ import { NotAvailable } from 'routes/state/notAvailable'; import { ExportModal } from 'routes/views/components/export'; import { getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers'; import { getRouteForQuery } from 'routes/views/utils/query'; @@ -186,8 +186,8 @@ class AzureDetails extends React.Component isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -216,7 +216,7 @@ class AzureDetails extends React.Component isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} selectedItems={selectedItems} @@ -243,8 +243,8 @@ class AzureDetails extends React.Component itemsTotal={itemsTotal} onBulkSelected={this.handleBulkSelected} onExportClicked={this.handleExportModalOpen} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination(isDisabled)} query={query} selectedItems={selectedItems} @@ -352,7 +352,7 @@ class AzureDetails extends React.Component handleCurrencySelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onGroupBySelected={this.handleGroupBySelected} report={report} /> diff --git a/src/routes/views/details/components/breakdown/breakdownBase.tsx b/src/routes/views/details/components/breakdown/breakdownBase.tsx index ac6448dd2..f137ff662 100644 --- a/src/routes/views/details/components/breakdown/breakdownBase.tsx +++ b/src/routes/views/details/components/breakdown/breakdownBase.tsx @@ -15,9 +15,9 @@ import { NoData } from 'routes/state/noData'; import { NoProviders } from 'routes/state/noProviders'; import { NotAvailable } from 'routes/state/notAvailable'; import { - handleCostDistributionSelected, - handleCostTypeSelected, - handleCurrencySelected, + handleOnCostDistributionSelected, + handleOnCostTypeSelected, + handleOnCurrencySelected, } from 'routes/views/utils/handles'; import { hasCurrentMonthData } from 'routes/views/utils/providers'; import { FetchStatus } from 'store/common'; @@ -303,9 +303,9 @@ class BreakdownBase extends React.Component { description={description} detailsURL={detailsURL} groupBy={groupBy} - onCostDistributionSelected={value => handleCostDistributionSelected(query, router, value)} - onCostTypeSelected={value => handleCostTypeSelected(query, router, value)} - onCurrencySelected={value => handleCurrencySelected(query, router, value)} + onCostDistributionSelected={value => handleOnCostDistributionSelected(query, router, value)} + onCostTypeSelected={value => handleOnCostTypeSelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} query={query} report={report} showCostDistribution={showCostDistribution} diff --git a/src/routes/views/details/gcpDetails/gcpDetails.tsx b/src/routes/views/details/gcpDetails/gcpDetails.tsx index 226cab9bf..5733eabfb 100644 --- a/src/routes/views/details/gcpDetails/gcpDetails.tsx +++ b/src/routes/views/details/gcpDetails/gcpDetails.tsx @@ -19,12 +19,12 @@ import { NotAvailable } from 'routes/state/notAvailable'; import { ExportModal } from 'routes/views/components/export'; import { getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers'; import { getRouteForQuery } from 'routes/views/utils/query'; @@ -186,8 +186,8 @@ class GcpDetails extends React.Component { isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -215,7 +215,7 @@ class GcpDetails extends React.Component { isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} selectedItems={selectedItems} @@ -242,8 +242,8 @@ class GcpDetails extends React.Component { itemsTotal={itemsTotal} onBulkSelected={this.handleBulkSelected} onExportClicked={this.handleExportModalOpen} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination(isDisabled)} query={query} selectedItems={selectedItems} @@ -341,7 +341,7 @@ class GcpDetails extends React.Component { handleCurrencySelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onGroupBySelected={this.handleGroupBySelected} report={report} /> diff --git a/src/routes/views/details/ibmDetails/ibmDetails.tsx b/src/routes/views/details/ibmDetails/ibmDetails.tsx index 59dbc6be5..66cdbb862 100644 --- a/src/routes/views/details/ibmDetails/ibmDetails.tsx +++ b/src/routes/views/details/ibmDetails/ibmDetails.tsx @@ -19,12 +19,12 @@ import { NotAvailable } from 'routes/state/notAvailable'; import { ExportModal } from 'routes/views/components/export'; import { getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { hasCurrentMonthData } from 'routes/views/utils/providers'; import { filterProviders } from 'routes/views/utils/providers'; @@ -187,8 +187,8 @@ class IbmDetails extends React.Component { isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -217,7 +217,7 @@ class IbmDetails extends React.Component { isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} selectedItems={selectedItems} @@ -244,8 +244,8 @@ class IbmDetails extends React.Component { itemsTotal={itemsTotal} onBulkSelected={this.handleBulkSelected} onExportClicked={this.handleExportModalOpen} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination(isDisabled)} query={query} selectedItems={selectedItems} @@ -343,7 +343,7 @@ class IbmDetails extends React.Component { handleCurrencySelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onGroupBySelected={this.handleGroupBySelected} report={report} /> diff --git a/src/routes/views/details/ociDetails/ociDetails.tsx b/src/routes/views/details/ociDetails/ociDetails.tsx index cac51b54f..6d4ea0ef9 100644 --- a/src/routes/views/details/ociDetails/ociDetails.tsx +++ b/src/routes/views/details/ociDetails/ociDetails.tsx @@ -19,12 +19,12 @@ import { NotAvailable } from 'routes/state/notAvailable'; import { ExportModal } from 'routes/views/components/export'; import { getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers'; import { getRouteForQuery } from 'routes/views/utils/query'; @@ -186,8 +186,8 @@ class OciDetails extends React.Component { isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -216,7 +216,7 @@ class OciDetails extends React.Component { isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} selectedItems={selectedItems} @@ -243,8 +243,8 @@ class OciDetails extends React.Component { itemsTotal={itemsTotal} onBulkSelected={this.handleBulkSelected} onExportClicked={this.handleExportModalOpen} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination(isDisabled)} query={query} selectedItems={selectedItems} @@ -352,7 +352,7 @@ class OciDetails extends React.Component { handleCurrencySelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onGroupBySelected={this.handleGroupBySelected} report={report} /> diff --git a/src/routes/views/details/ocpBreakdown/optimizationsBreakdown.tsx b/src/routes/views/details/ocpBreakdown/optimizationsBreakdown.tsx index 50cc9d433..1497c0669 100644 --- a/src/routes/views/details/ocpBreakdown/optimizationsBreakdown.tsx +++ b/src/routes/views/details/ocpBreakdown/optimizationsBreakdown.tsx @@ -15,7 +15,7 @@ import { NotAvailable } from 'routes/state/notAvailable'; import { OptimizationsTable, OptimizationsToolbar } from 'routes/views/components/optimizations'; import { styles } from 'routes/views/optimizations/optimizations.styles'; import { getGroupById, getGroupByValue } from 'routes/views/utils/groupBy'; -import { handleFilterAdded, handleFilterRemoved, handleSort } from 'routes/views/utils/handles'; +import { handleOnFilterAdded, handleOnFilterRemoved, handleOnSort } from 'routes/views/utils/handles'; import { getOrderById, getOrderByValue } from 'routes/views/utils/orderBy'; import { getRouteForQuery } from 'routes/views/utils/query'; import { createMapStateToProps, FetchStatus } from 'store/common'; @@ -95,8 +95,8 @@ class OptimizationsBreakdownBase extends React.Component this.handlePerPageSelect(perPage)} - onSetPage={(event, pageNumber) => this.handleSetPage(pageNumber)} + onPerPageSelect={(event, perPage) => this.handleOnPerPageSelect(perPage)} + onSetPage={(event, pageNumber) => this.handleOnSetPage(pageNumber)} page={page} perPage={limit} titles={{ @@ -117,7 +117,7 @@ class OptimizationsBreakdownBase extends React.Component handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} /> @@ -136,15 +136,15 @@ class OptimizationsBreakdownBase extends React.Component handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination(isDisabled)} query={query} /> ); }; - private handlePerPageSelect = (perPage: number) => { + private handleOnPerPageSelect = (perPage: number) => { const { query, router } = this.props; const newQuery = { @@ -155,7 +155,7 @@ class OptimizationsBreakdownBase extends React.Component { + private handleOnSetPage = (pageNumber: number) => { const { query, report, router } = this.props; const limit = report && report.meta && report.meta.limit ? report.meta.limit : baseQuery.limit; diff --git a/src/routes/views/details/ocpDetails/ocpDetails.tsx b/src/routes/views/details/ocpDetails/ocpDetails.tsx index 6f5189f17..79b9d63c1 100644 --- a/src/routes/views/details/ocpDetails/ocpDetails.tsx +++ b/src/routes/views/details/ocpDetails/ocpDetails.tsx @@ -23,13 +23,13 @@ import type { ColumnManagementModalOption } from 'routes/views/details/component import { ColumnManagementModal, initHiddenColumns } from 'routes/views/details/components/columnManagement'; import { getGroupById, getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCostDistributionSelected, - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCostDistributionSelected, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers'; import { getRouteForQuery } from 'routes/views/utils/query'; @@ -235,8 +235,8 @@ class OcpDetails extends React.Component { isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -269,7 +269,7 @@ class OcpDetails extends React.Component { isLoading={reportFetchStatus === FetchStatus.inProgress} isRosFeatureEnabled={isRosFeatureEnabled} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} selectedItems={selectedItems} @@ -297,8 +297,8 @@ class OcpDetails extends React.Component { onBulkSelected={this.handleBulkSelected} onColumnManagementClicked={this.handleColumnManagementModalOpen} onExportClicked={this.handleExportModalOpen} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} onPlatformCostsChanged={this.handlePlatformCostsChanged} pagination={this.getPagination(isDisabled)} query={query} @@ -433,8 +433,8 @@ class OcpDetails extends React.Component { costDistribution={costDistribution} currency={currency} groupBy={groupById} - onCostDistributionSelected={value => handleCostDistributionSelected(query, router, value)} - onCurrencySelected={value => handleCurrencySelected(query, router, value)} + onCostDistributionSelected={value => handleOnCostDistributionSelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onGroupBySelected={this.handleGroupBySelected} report={report} /> diff --git a/src/routes/views/details/rhelDetails/rhelDetails.tsx b/src/routes/views/details/rhelDetails/rhelDetails.tsx index e1bb15662..5e863c73b 100644 --- a/src/routes/views/details/rhelDetails/rhelDetails.tsx +++ b/src/routes/views/details/rhelDetails/rhelDetails.tsx @@ -22,12 +22,12 @@ import type { ColumnManagementModalOption } from 'routes/views/details/component import { ColumnManagementModal, initHiddenColumns } from 'routes/views/details/components/columnManagement'; import { getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { filterProviders, hasCurrentMonthData } from 'routes/views/utils/providers'; import { getRouteForQuery } from 'routes/views/utils/query'; @@ -229,8 +229,8 @@ class RhelDetails extends React.Component { isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -260,7 +260,7 @@ class RhelDetails extends React.Component { isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending) => handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} selectedItems={selectedItems} @@ -288,8 +288,8 @@ class RhelDetails extends React.Component { onBulkSelected={this.handleBulkSelected} onColumnManagementClicked={this.handleColumnManagementModalOpen} onExportClicked={this.handleExportModalOpen} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination()} query={query} selectedItems={selectedItems} @@ -400,7 +400,7 @@ class RhelDetails extends React.Component { handleCurrencySelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onGroupBySelected={this.handleGroupBySelected} report={report} /> diff --git a/src/routes/views/explorer/explorer.tsx b/src/routes/views/explorer/explorer.tsx index 3cb558007..5381344e4 100644 --- a/src/routes/views/explorer/explorer.tsx +++ b/src/routes/views/explorer/explorer.tsx @@ -24,14 +24,14 @@ import type { DateRangeType } from 'routes/views/utils/dateRange'; import { getDateRangeFromQuery, getDateRangeTypeDefault } from 'routes/views/utils/dateRange'; import { getGroupByCostCategory, getGroupById, getGroupByOrgValue, getGroupByTagKey } from 'routes/views/utils/groupBy'; import { - handleCostDistributionSelected, - handleCostTypeSelected, - handleCurrencySelected, - handleFilterAdded, - handleFilterRemoved, - handlePerPageSelect, - handleSetPage, - handleSort, + handleOnCostDistributionSelected, + handleOnCostTypeSelected, + handleOnCurrencySelected, + handleOnFilterAdded, + handleOnFilterRemoved, + handleOnPerPageSelect, + handleOnSetPage, + handleOnSort, } from 'routes/views/utils/handles'; import { filterProviders, hasData } from 'routes/views/utils/providers'; import { getRouteForQuery } from 'routes/views/utils/query'; @@ -238,8 +238,8 @@ class Explorer extends React.Component { isCompact={!isBottom} isDisabled={isDisabled} itemCount={count} - onPerPageSelect={(event, perPage) => handlePerPageSelect(query, router, perPage)} - onSetPage={(event, pageNumber) => handleSetPage(query, router, report, pageNumber)} + onPerPageSelect={(event, perPage) => handleOnPerPageSelect(query, router, perPage)} + onSetPage={(event, pageNumber) => handleOnSetPage(query, router, report, pageNumber)} page={page} perPage={limit} titles={{ @@ -279,7 +279,9 @@ class Explorer extends React.Component { isAllSelected={isAllSelected} isLoading={reportFetchStatus === FetchStatus.inProgress} onSelected={this.handleSelected} - onSort={(sortType, isSortAscending, date: string) => handleSort(query, router, sortType, isSortAscending, date)} + onSort={(sortType, isSortAscending, date: string) => + handleOnSort(query, router, sortType, isSortAscending, date) + } perspective={perspective} query={query} report={report} @@ -511,12 +513,12 @@ class Explorer extends React.Component { ? `${tagPrefix}${groupByTagKey}` : groupById } - onCostDistributionSelected={value => handleCostDistributionSelected(query, router, value)} - onCostTypeSelected={value => handleCostTypeSelected(query, router, value)} - onCurrencySelected={value => handleCurrencySelected(query, router, value)} + onCostDistributionSelected={value => handleOnCostDistributionSelected(query, router, value)} + onCostTypeSelected={value => handleOnCostTypeSelected(query, router, value)} + onCurrencySelected={value => handleOnCurrencySelected(query, router, value)} onDatePickerSelected={this.handleDatePickerSelected} - onFilterAdded={filter => handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} onGroupBySelected={this.handleGroupBySelected} onPerspectiveClicked={this.handlePerspectiveClick} perspective={perspective} diff --git a/src/routes/views/overview/overview.tsx b/src/routes/views/overview/overview.tsx index d8afa1156..62114721d 100644 --- a/src/routes/views/overview/overview.tsx +++ b/src/routes/views/overview/overview.tsx @@ -262,7 +262,7 @@ class OverviewBase extends React.Component { if (currentItem === InfrastructurePerspective.aws || currentItem === InfrastructurePerspective.awsOcp) { return (
- +
); } @@ -272,7 +272,7 @@ class OverviewBase extends React.Component { private getCurrency = () => { const { currency } = this.props; - return ; + return ; }; private getCurrentTab = () => { @@ -579,7 +579,7 @@ class OverviewBase extends React.Component { } }; - private handleCostTypeSelected = () => { + private handleOnCostTypeSelected = () => { const { query, router } = this.props; const newQuery = { @@ -588,7 +588,7 @@ class OverviewBase extends React.Component { router.navigate(this.getRouteForQuery(newQuery), { replace: true }); }; - private handleCurrencySelected = () => { + private handleOnCurrencySelected = () => { const { router, query } = this.props; const newQuery = { diff --git a/src/routes/views/utils/handles.ts b/src/routes/views/utils/handles.ts index 9f8c76926..dd33cf225 100644 --- a/src/routes/views/utils/handles.ts +++ b/src/routes/views/utils/handles.ts @@ -12,7 +12,7 @@ export const handleSelected = (query: Query, router: RouteComponentProps, value: router.navigate(getRouteForQuery(newQuery, router.location, reset), { replace: true }); // Don't reset pagination }; -export const handleCurrencySelected = ( +export const handleOnCurrencySelected = ( query: Query, router: RouteComponentProps, value: string, @@ -21,7 +21,7 @@ export const handleCurrencySelected = ( handleSelected(query, router, value, reset); }; -export const handleCostTypeSelected = ( +export const handleOnCostTypeSelected = ( query: Query, router: RouteComponentProps, value: string, @@ -30,7 +30,7 @@ export const handleCostTypeSelected = ( handleSelected(query, router, value, reset); }; -export const handleCostDistributionSelected = ( +export const handleOnCostDistributionSelected = ( query: Query, router: RouteComponentProps, value: string, @@ -43,17 +43,17 @@ export const handleCostDistributionSelected = ( handleSelected(newQuery, router, value, reset); }; -export const handleFilterAdded = (query: Query, router: RouteComponentProps, filter: Filter) => { +export const handleOnFilterAdded = (query: Query, router: RouteComponentProps, filter: Filter) => { const filteredQuery = addFilterToQuery(query, filter); router.navigate(getRouteForQuery(filteredQuery, router.location, true), { replace: true }); }; -export const handleFilterRemoved = (query: Query, router: RouteComponentProps, filter: Filter) => { +export const handleOnFilterRemoved = (query: Query, router: RouteComponentProps, filter: Filter) => { const filteredQuery = removeFilterFromQuery(query, filter); router.navigate(getRouteForQuery(filteredQuery, router.location, true), { replace: true }); }; -export const handlePerPageSelect = (query: Query, router: RouteComponentProps, perPage: number) => { +export const handleOnPerPageSelect = (query: Query, router: RouteComponentProps, perPage: number) => { const newQuery = { ...JSON.parse(JSON.stringify(query)) }; newQuery.filter = { ...query.filter, @@ -63,7 +63,7 @@ export const handlePerPageSelect = (query: Query, router: RouteComponentProps, p router.navigate(filteredQuery, { replace: true }); }; -export const handleSetPage = (query: Query, router: RouteComponentProps, report, pageNumber) => { +export const handleOnSetPage = (query: Query, router: RouteComponentProps, report, pageNumber) => { const limit = report && report.meta && report.meta.filter && report.meta.filter.limit ? report.meta.filter.limit : 10; const offset = pageNumber * limit - limit; @@ -76,7 +76,7 @@ export const handleSetPage = (query: Query, router: RouteComponentProps, report, router.navigate(filteredQuery, { replace: true }); }; -export const handleSort = ( +export const handleOnSort = ( query: Query, router: RouteComponentProps, sortType: string, From 7a798243f64c45739b4c55bf0701fc4bbe05c799 Mon Sep 17 00:00:00 2001 From: Dan Labrecque Date: Thu, 4 May 2023 12:20:08 -0400 Subject: [PATCH 2/2] Close optimizations drawer if filtering, pagination, or sort is applied --- .../optimizations/optimizationsTable.tsx | 26 +++++++++++++---- .../optimizations/optimizationsToolbar.tsx | 29 +++++++++++++++---- .../views/optimizations/optimizations.tsx | 25 +++++++++------- 3 files changed, 60 insertions(+), 20 deletions(-) diff --git a/src/routes/views/components/optimizations/optimizationsTable.tsx b/src/routes/views/components/optimizations/optimizationsTable.tsx index 3ab63380e..28e0628df 100644 --- a/src/routes/views/components/optimizations/optimizationsTable.tsx +++ b/src/routes/views/components/optimizations/optimizationsTable.tsx @@ -25,6 +25,7 @@ interface OptimizationsTableOwnProps extends RouterComponentProps { } interface OptimizationsTableState { + currentRow?: number; columns?: any[]; rows?: any[]; } @@ -147,14 +148,29 @@ class OptimizationsTableBase extends React.Component { - const { openOptimizationsDrawer } = this.props; - const { rows } = this.state; + const { closeOptimizationsDrawer, isOpen, openOptimizationsDrawer } = this.props; + const { currentRow, rows } = this.state; + + this.setState({ currentRow: rowIndex }, () => { + if (currentRow === rowIndex && isOpen) { + closeOptimizationsDrawer(); + } else { + openOptimizationsDrawer(rows[rowIndex].optimization); + } + }); + }; - openOptimizationsDrawer(rows[rowIndex].optimization); + private handleOnSort = (value: string, isSortAscending: boolean) => { + const { closeOptimizationsDrawer, onSort } = this.props; + + closeOptimizationsDrawer(); + if (onSort) { + onSort(value, isSortAscending); + } }; public render() { - const { isLoading, onSort } = this.props; + const { isLoading } = this.props; const { columns, rows } = this.state; return ( @@ -162,7 +178,7 @@ class OptimizationsTableBase extends React.Component diff --git a/src/routes/views/components/optimizations/optimizationsToolbar.tsx b/src/routes/views/components/optimizations/optimizationsToolbar.tsx index a9810beea..3723202ab 100644 --- a/src/routes/views/components/optimizations/optimizationsToolbar.tsx +++ b/src/routes/views/components/optimizations/optimizationsToolbar.tsx @@ -8,6 +8,7 @@ import { connect } from 'react-redux'; import { DataToolbar } from 'routes/views/components/dataToolbar'; import type { Filter } from 'routes/views/utils/filter'; import { createMapStateToProps } from 'store/common'; +import { uiActions } from 'store/ui'; interface OptimizationsToolbarOwnProps { isDisabled?: boolean; @@ -25,7 +26,7 @@ interface OptimizationsToolbarStateProps { } interface OptimizationsToolbarDispatchProps { - // TBD... + closeOptimizationsDrawer: typeof uiActions.closeOptimizationsDrawer; } interface OptimizationsToolbarState { @@ -60,8 +61,26 @@ export class OptimizationsToolbarBase extends React.Component option.key !== 'project'); }; + private handleOnFilterAdded = (filter: Filter) => { + const { closeOptimizationsDrawer, onFilterAdded } = this.props; + + closeOptimizationsDrawer(); + if (onFilterAdded) { + onFilterAdded(filter); + } + }; + + private handleOnFilterRemoved = (filter: Filter) => { + const { closeOptimizationsDrawer, onFilterRemoved } = this.props; + + closeOptimizationsDrawer(); + if (onFilterRemoved) { + onFilterRemoved(filter); + } + }; + public render() { - const { isDisabled, itemsPerPage, itemsTotal, onFilterAdded, onFilterRemoved, pagination, query } = this.props; + const { isDisabled, itemsPerPage, itemsTotal, pagination, query } = this.props; const { categoryOptions } = this.state; return ( @@ -70,8 +89,8 @@ export class OptimizationsToolbarBase extends React.Component this.handlePerPageSelect(perPage)} - onSetPage={(event, pageNumber) => this.handleSetPage(pageNumber)} + onPerPageSelect={(event, perPage) => this.handleOnPerPageSelect(perPage)} + onSetPage={(event, pageNumber) => this.handleOnSetPage(pageNumber)} page={page} perPage={limit} titles={{ @@ -116,7 +118,7 @@ class Optimizations extends React.Component handleSort(query, router, sortType, isSortAscending)} + onSort={(sortType, isSortAscending) => handleOnSort(query, router, sortType, isSortAscending)} report={report} reportQueryString={reportQueryString} /> @@ -136,16 +138,16 @@ class Optimizations extends React.Component handleFilterAdded(query, router, filter)} - onFilterRemoved={filter => handleFilterRemoved(query, router, filter)} + onFilterAdded={filter => handleOnFilterAdded(query, router, filter)} + onFilterRemoved={filter => handleOnFilterRemoved(query, router, filter)} pagination={this.getPagination(isDisabled)} query={query} /> ); }; - private handlePerPageSelect = (perPage: number) => { - const { query, router } = this.props; + private handleOnPerPageSelect = (perPage: number) => { + const { closeOptimizationsDrawer, query, router } = this.props; const newQuery = { ...JSON.parse(JSON.stringify(query)), @@ -153,10 +155,11 @@ class Optimizations extends React.Component { - const { query, report, router } = this.props; + private handleOnSetPage = (pageNumber: number) => { + const { closeOptimizationsDrawer, query, report, router } = this.props; const limit = report && report.meta && report.meta.limit ? report.meta.limit : baseQuery.limit; const offset = pageNumber * limit - limit; @@ -168,6 +171,7 @@ class Optimizations extends React.Component { @@ -243,6 +247,7 @@ const mapStateToProps = createMapStateToProps