Add favorites functionality to ITwinGrid table view

iTwin · Nov 22, 2024 · 7b582c0 · 7b582c0
1 parent 4f8a36e
commit 7b582c0
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 30 deletions.
diff --git a/packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinGrid.tsx b/packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinGrid.tsx
@@ -33,6 +33,29 @@ export type IndividualITwinStateHook = (
   }
 ) => Partial<ITwinTileProps>;
 
+export interface ITwinGridStrings {
+  /** Displayed for table favorites header. */
+  tableColumnFavorites: string;
+  /** Displayed for table name header. */
+  tableColumnName: string;
+  /** Displayed for table description header. */
+  tableColumnDescription: string;
+  /** Displayed for table lastModified header. */
+  tableColumnLastModified: string;
+  /** Displayed on table while loading data. */
+  tableLoadingData: string;
+  /** Badge text for trial iTwins */
+  trialBadge: string;
+  /** Badge text for inactive iTwins */
+  inactiveBadge: string;
+  /** Displayed after successful fetch, but no iTwins are returned. */
+  noITwins: string;
+  /** Displayed when the component is mounted but the accessToken is empty. */
+  noAuthentication: string;
+  /** Generic message displayed if an error occurs while fetching. */
+  error: string;
+}
+
 export interface ITwinGridProps {
   /** Access token that requires the `itwins:read` scope. Provide a function that returns the token to prevent the token from expiring. */
   accessToken?: string | (() => Promise<string>) | undefined;
@@ -54,26 +77,7 @@ export interface ITwinGridProps {
   /** Static props to apply over each tile, mainly used for tileProps, overrides ITwinGrid provided values */
   tileOverrides?: Partial<ITwinTileProps>;
   /** Strings displayed by the browser */
-  stringsOverrides?: {
-    /** Displayed for table name header. */
-    tableColumnName?: string;
-    /** Displayed for table description header. */
-    tableColumnDescription?: string;
-    /** Displayed for table lastModified header. */
-    tableColumnLastModified?: string;
-    /** Displayed on table while loading data. */
-    tableLoadingData?: string;
-    /** Badge text for trial iTwins */
-    trialBadge?: string;
-    /** Badge text for inactive iTwins */
-    inactiveBadge?: string;
-    /** Displayed after successful fetch, but no iTwins are returned. */
-    noITwins?: string;
-    /** Displayed when the component is mounted but the accessToken is empty. */
-    noAuthentication?: string;
-    /** Generic message displayed if an error occurs while fetching. */
-    error?: string;
-  };
+  stringsOverrides?: Partial<ITwinGridStrings>;
   /** Object that configures different overrides for the API.
    * @property `data`: Array of iTwins used in the grid.
    * @property `serverEnvironmentPrefix`: Either qa or dev.
@@ -113,6 +117,7 @@ export const ITwinGrid = ({
 
   const strings = _mergeStrings(
     {
+      tableColumnFavorites: "",
       tableColumnName: "iTwin Number",
       tableColumnDescription: "iTwin Name",
       tableColumnLastModified: "Last Modified",
@@ -147,6 +152,9 @@ export const ITwinGrid = ({
     iTwinActions,
     onThumbnailClick,
     strings,
+    iTwinFavorites,
+    addITwinToFavorites,
+    removeITwinFromFavorites,
   });
 
   const noResultsText = {

diff --git a/packages/modules/imodel-browser/src/containers/ITwinGrid/useITwinTableConfig.tsx b/packages/modules/imodel-browser/src/containers/ITwinGrid/useITwinTableConfig.tsx
@@ -2,8 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { SvgMore } from "@itwin/itwinui-icons-react";
-import { DropdownMenu } from "@itwin/itwinui-react";
+import { SvgMore, SvgStar, SvgStarHollow } from "@itwin/itwinui-icons-react";
+import { DropdownMenu, IconButton } from "@itwin/itwinui-react";
 import React from "react";
 import { useMemo } from "react";
 import { CellProps } from "react-table";
@@ -13,24 +13,24 @@ import {
   _buildManagedContextMenuOptions,
   ContextMenuBuilderItem,
 } from "../../utils/_buildMenuOptions";
+import { ITwinGridStrings } from "./ITwinGrid";
 
 export interface useITwinTableConfigProps {
   iTwinActions: ContextMenuBuilderItem<ITwinFull>[] | undefined;
   onThumbnailClick: ((iTwin: ITwinFull) => void) | undefined;
-  strings: {
-    tableColumnName: string;
-    tableColumnDescription: string;
-    tableColumnLastModified: string;
-    noITwins: string;
-    noAuthentication: string;
-    error: string;
-  };
+  strings: ITwinGridStrings;
+  iTwinFavorites: Set<string>;
+  addITwinToFavorites: (iTwinId: string) => Promise<void>;
+  removeITwinFromFavorites: (iTwinId: string) => Promise<void>;
 }
 
 export const useITwinTableConfig = ({
   iTwinActions,
   onThumbnailClick,
   strings,
+  iTwinFavorites,
+  addITwinToFavorites,
+  removeITwinFromFavorites,
 }: useITwinTableConfigProps) => {
   const onRowClick = (_: React.MouseEvent, row: any) => {
     const iTwin = row.original as ITwinFull;
@@ -45,6 +45,31 @@ export const useITwinTableConfig = ({
       {
         Header: "Table",
         columns: [
+          {
+            id: "Favorite",
+            Header: strings.tableColumnFavorites,
+            accessor: "id",
+            width: 70,
+            Cell: (props: CellProps<ITwinFull>) => {
+              const isFavorite = iTwinFavorites.has(props.value);
+              return (
+                <IconButton
+                  styleType="borderless"
+                  label={
+                    isFavorite ? "Remove from favorites" : "Add to favorites"
+                  }
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    isFavorite
+                      ? await removeITwinFromFavorites(props.value)
+                      : await addITwinToFavorites(props.value);
+                  }}
+                >
+                  {isFavorite ? <SvgStar /> : <SvgStarHollow />}
+                </IconButton>
+              );
+            },
+          },
           {
             id: "ITwinNumber",
             Header: strings.tableColumnName,
@@ -106,8 +131,12 @@ export const useITwinTableConfig = ({
       },
     ],
     [
+      addITwinToFavorites,
       iTwinActions,
+      iTwinFavorites,
+      removeITwinFromFavorites,
       strings.tableColumnDescription,
+      strings.tableColumnFavorites,
       strings.tableColumnLastModified,
       strings.tableColumnName,
     ]