add button and test

src/billing/ConsolidatedSpendReport.test.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { Billing, BillingContract } from 'src/libs/ajax/billing/Billing';
 import { AggregatedWorkspaceSpendData, SpendReport } from 'src/libs/ajax/billing/billing-models';
 import { reportError } from 'src/libs/error';
-import { spendReportStore } from 'src/libs/state';
+import { getTerraUser, spendReportStore } from 'src/libs/state';
 import { renderWithAppContexts } from 'src/testing/test-utils';
 import { WorkspaceWrapper } from 'src/workspaces/utils';
 
@@ -31,6 +31,19 @@ jest.mock(
   })
 );
 
+type StateExports = typeof import('src/libs/state');
+jest.mock(
+  'src/libs/state',
+  (): StateExports => ({
+    ...jest.requireActual('src/libs/state'),
+    getTerraUser: jest.fn(),
+  })
+);
+
+asMockedFn(getTerraUser).mockReturnValue({
+  email: '[email protected]',
+});
+
 const spendReport: SpendReport = {
   spendSummary: {
     cost: '1.20',
@@ -208,7 +221,7 @@ const workspaces = [
       billingAccount: 'billingAccounts/00102A-34B56C-78DEFB',
       bucketName: 'fc-01111a11-20b2-3033-4044-77c0c7c77777',
       cloudPlatform: 'Gcp',
-      createdBy: 'user1@gmail.com',
+      createdBy: 'user2@gmail.com',
       createdDate: '2024-08-10T13:50:36.984Z',
       googleProject: 'terra-dev-fe98dcb8',
       googleProjectNumber: '123045678090',
@@ -312,6 +325,20 @@ describe('ConsolidatedSpendReport', () => {
     expect(screen.getAllByText('N/A')).not.toBeNull();
   });
 
+  it('filters to user-created workspaces', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    getCrossBillingSpendReport.mockResolvedValue(spendReport);
+
+    // Act
+    await act(async () => renderWithAppContexts(<ConsolidatedSpendReport workspaces={workspaces} />));
+    await user.click(screen.getByLabelText('Only show workspaces created by me'));
+
+    // Assert
+    expect(screen.getByText('workspace2')).not.toBeNull();
+    expect(screen.queryByText('workspace3')).toBeNull();
+  });
+
   it('displays a helpful error if the query fails', async () => {
     // Arrange
     const getCrossBillingSpendReport = jest.fn().mockRejectedValue(new Error('MyTestError'));

src/billing/ConsolidatedSpendReport.tsx

@@ -7,7 +7,7 @@ import { DateRangeFilter } from 'src/billing/Filter/DateRangeFilter';
 import { SearchFilter } from 'src/billing/Filter/SearchFilter';
 import { parseCurrencyIfNeeded } from 'src/billing/utils';
 import { BillingProject } from 'src/billing-core/models';
-import { ButtonOutline, fixedSpinnerOverlay } from 'src/components/common';
+import { ButtonOutline, Checkbox, fixedSpinnerOverlay } from 'src/components/common';
 import { ariaSort, HeaderRenderer } from 'src/components/table';
 import { Billing } from 'src/libs/ajax/billing/Billing';
 import {
@@ -20,7 +20,7 @@ import { reportError } from 'src/libs/error';
 import Events, { extractBillingDetails } from 'src/libs/events';
 import * as Nav from 'src/libs/nav';
 import { memoWithName, useCancellation } from 'src/libs/react-utils';
-import { SpendReportStore, spendReportStore } from 'src/libs/state';
+import { getTerraUser, SpendReportStore, spendReportStore } from 'src/libs/state';
 import * as Style from 'src/libs/style';
 import * as Utils from 'src/libs/utils';
 import { GoogleWorkspace, GoogleWorkspaceInfo, WorkspaceWrapper } from 'src/workspaces/utils';
@@ -181,8 +181,10 @@ export const ConsolidatedSpendReport = (props: ConsolidatedSpendReportProps): Re
     direction: 'desc',
   });
   const [allWorkspaces, setAllWorkspaces] = useState<WorkspaceWrapper[]>(props.workspaces);
+  const [filterToCreated, setFilterToCreated] = useState(false);
 
   const [itemsPerPage, setItemsPerPage] = useState(250);
+  const userEmail = getTerraUser().email;
 
   const signal = useCancellation();
 
@@ -344,14 +346,16 @@ export const ConsolidatedSpendReport = (props: ConsolidatedSpendReportProps): Re
               };
               return newStore;
             });
-            setOwnedWorkspaces(updatedWorkspaces);
+            setOwnedWorkspaces(
+              updatedWorkspaces.filter((workspace) => (filterToCreated ? workspace.createdBy === userEmail : true))
+            );
           }
         });
       }
     };
     initialize();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signal, spendReportLengthInDays, allWorkspaces, itemsPerPage]);
+  }, [signal, spendReportLengthInDays, allWorkspaces, itemsPerPage, filterToCreated]);
 
   return (
     <>
@@ -393,6 +397,16 @@ export const ConsolidatedSpendReport = (props: ConsolidatedSpendReportProps): Re
             style={{ gridRowStart: 1, gridColumnStart: 2, margin: '1.35rem' }}
             onChange={setSearchValue}
           />
+          <div style={{ gridRowStart: 2, gridColumnStart: 1, marginTop: '-2rem' }}>
+            <Checkbox
+              checked={filterToCreated}
+              aria-label='Only show workspaces created by me'
+              onChange={() => {
+                setFilterToCreated(!filterToCreated);
+              }}
+            />
+            <span style={{ marginLeft: '0.5rem' }}>Only show workspaces created by me</span>
+          </div>
           {ownedWorkspaces.length >= itemsPerPage && (
             <ButtonOutline
               aria-label='Show all workspaces'