chore: Remove items dependency and react based on loading state

cloudscape-design · Oct 23, 2024 · fe18d37 · fe18d37
1 parent 9fcb634
commit fe18d37
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 22 deletions.
diff --git a/...rnal/hooks/use-table-interaction-metrics/__tests__/use-table-interaction-metrics.test.tsx b/...rnal/hooks/use-table-interaction-metrics/__tests__/use-table-interaction-metrics.test.tsx
@@ -16,12 +16,11 @@ import {
 import { renderHook } from '../../../../__tests__/render-hook';
 import { mockPerformanceMetrics } from '../../../analytics/__tests__/mocks';
 
-type RenderProps = Partial<UseTableInteractionMetricsProps<any>>;
+type RenderProps = Partial<UseTableInteractionMetricsProps>;
 
 const defaultProps = {
  getComponentConfiguration: () => ({}),
  getComponentIdentifier: () => 'My resources',
- items: [],
  itemCount: 10,
  loading: undefined,
  instanceIdentifier: undefined,

diff --git a/src/internal/hooks/use-table-interaction-metrics/index.ts b/src/internal/hooks/use-table-interaction-metrics/index.ts
@@ -15,27 +15,25 @@ to be the cause of the current loading state.
 */
 const USER_ACTION_TIME_LIMIT = 1_000;
 
-export interface UseTableInteractionMetricsProps<T> {
+export interface UseTableInteractionMetricsProps {
  elementRef: React.RefObject<HTMLElement>;
  instanceIdentifier: string | undefined;
  loading: boolean | undefined;
- items: readonly T[];
  itemCount: number;
  getComponentIdentifier: () => string | undefined;
  getComponentConfiguration: () => JSONObject;
  interactionMetadata: () => string;
 }
 
-export function useTableInteractionMetrics<T>({
+export function useTableInteractionMetrics({
  elementRef,
  itemCount,
  instanceIdentifier,
  getComponentIdentifier,
  getComponentConfiguration,
  loading = false,
  interactionMetadata,
- items,
-}: UseTableInteractionMetricsProps<T>) {
+}: UseTableInteractionMetricsProps) {
  const taskInteractionId = useRandomId();
  const tableInteractionAttributes = useDOMAttribute(
  elementRef,
@@ -82,19 +80,15 @@ export function useTableInteractionMetrics<T>({
  instanceIdentifier,
  noOfResourcesInTable: metadata.current.itemCount,
  });
- }
- }, [instanceIdentifier, loading, taskInteractionId]);
 
- useEffectOnUpdate(() => {
- if (!loading) {
  ComponentMetrics.componentUpdated({
  taskInteractionId,
  componentName: 'table',
- actionType: (capturedUserAction.current || lastUserAction.current?.name) ?? '',
+ actionType: capturedUserAction.current ?? '',
  componentConfiguration: metadata.current.getComponentConfiguration(),
  });
  }
- }, [items, taskInteractionId, loading]);
+ }, [instanceIdentifier, loading, taskInteractionId]);
 
  return {
  tableInteractionAttributes,

diff --git a/src/table/internal.tsx b/src/table/internal.tsx
@@ -241,11 +241,10 @@ const InternalTable = React.forwardRef(
  };
  };
 
- const { setLastUserAction, tableInteractionAttributes } = useTableInteractionMetrics<T>({
+ const { setLastUserAction, tableInteractionAttributes } = useTableInteractionMetrics({
  elementRef: tableRefObject,
  loading,
  instanceIdentifier: analyticsMetadata?.instanceIdentifier,
- items,
  itemCount: items.length,
  getComponentIdentifier: getHeaderText,
  getComponentConfiguration,
@@ -282,7 +281,6 @@ const InternalTable = React.forwardRef(
  onSelectionChange,
  ariaLabels,
  loading,
- setLastUserAction,
  });
  const isRowSelected = (row: TableRow<T>) => row.type === 'data' && isItemSelected(row.item);
 

diff --git a/src/table/selection/use-selection.ts b/src/table/selection/use-selection.ts
@@ -20,7 +20,7 @@ type SelectionOptions<T> = Pick<
  | 'selectedItems'
  | 'selectionType'
  | 'trackBy'
-> & { setLastUserAction?: (name: string) => void };
+>;
 
 export function useSelection<T>(options: SelectionOptions<T>): {
  isItemSelected: (item: T) => boolean;
@@ -39,7 +39,6 @@ function useSingleSelection<T>({
  selectedItems = [],
  selectionType,
  trackBy,
- setLastUserAction,
 }: SelectionOptions<T>) {
  // The name assigned to all controls to combine them in a single group.
  const selectionControlName = useUniqueId();
@@ -54,7 +53,6 @@ function useSingleSelection<T>({
 
  const handleToggleItem = (item: T) => {
  if (!isItemDisabled(item) && !isItemSelected(item)) {
- setLastUserAction?.('selection');
  fireNonCancelableEvent(onSelectionChange, { selectedItems: [item] });
  }
  };
@@ -84,7 +82,6 @@ function useMultiSelection<T>({
  selectedItems = [],
  selectionType,
  trackBy,
- setLastUserAction,
 }: SelectionOptions<T>) {
  // The name assigned to all controls to combine them in a single group.
  const selectionControlName = useUniqueId();
@@ -154,7 +151,6 @@ function useMultiSelection<T>({
  const handleToggleAll = () => {
  const newSelectedItems = allEnabledItemsSelected ? deselectItems(items) : selectItems(items);
  fireNonCancelableEvent(onSelectionChange, { selectedItems: newSelectedItems });
- setLastUserAction?.('selection');
  };
 
  const handleToggleItem = (item: T) => {
@@ -163,7 +159,6 @@ function useMultiSelection<T>({
  const selectedItems = isItemSelected(item) ? deselectItems(requestedItems) : selectItems(requestedItems);
  fireNonCancelableEvent(onSelectionChange, { selectedItems });
  setLastClickedItem(item);
- setLastUserAction?.('selection');
  }
  };