Add names to Groups

Signed-off-by: kielosz <kielosz@gmail.com>

plugins/cost-insights-common/src/types/Group.ts

@@ -19,4 +19,5 @@
  */
 export type Group = {
   id: string;
+  name?: string;
 };

plugins/cost-insights/src/components/CostInsightsTabs/CostInsightsTabs.test.tsx

@@ -32,6 +32,7 @@ const mockGroups: Group[] = [
   },
   {
     id: 'test-group-3',
+    name: 'Test Group 3',
   },
 ];
 
@@ -76,7 +77,7 @@ describe('<CostInsightsTabs />', () => {
     );
     await userEvent.click(rendered.getByTestId('cost-insights-groups-tab'));
     mockGroups.forEach(group =>
-      expect(rendered.getByText(group.id)).toBeInTheDocument(),
+      expect(rendered.getByText(group.name ?? group.id)).toBeInTheDocument(),
     );
   });
 });

plugins/cost-insights/src/components/CostInsightsTabs/CostInsightsTabs.tsx

@@ -100,7 +100,7 @@ export const CostInsightsTabs = ({ groups }: CostInsightsTabsProps) => {
             data-testid={g.id}
             onClick={updateGroupFilterAndCloseMenu(g)}
           >
-            {g.id}
+            {g.name ?? g.id}
           </MenuItem>
         ))}
       </Menu>

plugins/cost-insights/src/example/client.ts

@@ -52,7 +52,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
 
   async getUserGroups(userId: string): Promise<Group[]> {
     const groups: Group[] = await this.request({ userId }, [
-      { id: 'pied-piper' },
+      { id: 'group-a', name: 'Group A' },
+      { id: 'group-b', name: 'Group B' },
     ]);
 
     return groups;