@oanda/labs-instruments-table-widget 1.0.23 → 1.0.24

package/src/InstrumentsTableWidget/components/Filters/Filters.tsx

@@ -9,7 +9,7 @@ import { useLocale } from '@oanda/mono-i18n';
 import React, { useState } from 'react';
 import { useDebounceCallback } from 'usehooks-ts';
 
-import type { FiltersProps } from './types';
+import type { AssetClassLabels, FiltersProps } from './types';
 
 export const Filters = ({
   assetClassOptions,
@@ -62,7 +62,7 @@ export const Filters = ({
             }
             setSelectedOption={(option) => {
               setAssetClass([option.id]);
-              onAssetClassChange([option.id]);
+              onAssetClassChange([option.id as AssetClassLabels]);
               setSearchInputValue('');
               onSearchChange('');
             }}

package/src/InstrumentsTableWidget/components/Filters/types.ts

@@ -1,7 +1,11 @@
 import type { SelectOption } from '@oanda/labs-widget-common';
 
+import type { AssetClassName } from '../../../gql/types/graphql';
+
+export type AssetClassLabels = AssetClassName | 'ALL';
+
 export interface FiltersProps {
-  onAssetClassChange: (assetClass: string[]) => void;
+  onAssetClassChange: (assetClass: AssetClassLabels[]) => void;
   onSearchChange: (searchPattern: string) => void;
   isAssetClassFilterEnabled?: boolean;
   isInstrumentSearchEnabled?: boolean;

package/src/InstrumentsTableWidget/config.ts

@@ -1,6 +1,9 @@
 import type { HeaderColumns } from '@oanda/labs-widget-common';
 import { DataRecordType } from '@oanda/labs-widget-common';
 
+import { AssetClassName } from '../gql/types/graphql';
+import type { AssetClassLabels } from './components/Filters/types';
+
 type HeaderRecordType =
   | DataRecordType.INSTRUMENT
   | DataRecordType.SELL
@@ -44,13 +47,15 @@ const headerConfig: Record<
   },
 };
 
-const assetClassLabels: Record<string, string> = {
-  CURRENCY: 'currency',
-  COMMODITIES: 'commodity',
-  RATES: 'bond',
-  CRYPTOCURRENCY: 'crypto',
-  EQUITY_SHARES: 'share_sfds',
-  INDICES: 'index',
+const assetClassLabels: Record<AssetClassLabels, string> = {
+  ALL: 'all',
+  [AssetClassName.Currency]: 'currency',
+  [AssetClassName.Commodities]: 'commodity',
+  [AssetClassName.Rates]: 'bond',
+  [AssetClassName.Cryptocurrency]: 'crypto',
+  [AssetClassName.EquityShares]: 'share_cfds',
+  [AssetClassName.Etfs]: 'etf_cfds',
+  [AssetClassName.Indices]: 'index',
 };
 
 const getHeaderConfig = (activeColumns: DataRecordType[]): HeaderColumns[] => {

package/src/InstrumentsTableWidget/types.ts

@@ -1,6 +1,10 @@
 import type { DataRecordType, WidgetConfig } from '@oanda/labs-widget-common';
 
-import type { Division, InstrumentDataSource } from '../gql/types/graphql';
+import type {
+  AssetClassName,
+  Division,
+  InstrumentDataSource,
+} from '../gql/types/graphql';
 
 export enum PriceType {
   Raw = 'raw',
@@ -12,7 +16,7 @@ export interface InstrumentsTableConfig extends WidgetConfig {
   instruments?: string[];
   division: Division;
   columns?: DataRecordType[];
-  assetClasses?: string[];
+  assetClasses?: AssetClassName[];
   isAssetClassFilterEnabled?: boolean;
   isInstrumentSearchEnabled?: boolean;
   recordsPerPage?: number;
@@ -24,7 +28,7 @@ export interface MainProps {
   instruments?: string[];
   division: Division;
   columns?: DataRecordType[];
-  assetClasses?: string[];
+  assetClasses?: AssetClassName[];
   isAssetClassFilterEnabled?: boolean;
   isInstrumentSearchEnabled?: boolean;
   recordsPerPage?: number;

package/src/gql/resolveInstrumentsWithFilters.ts

@@ -3,7 +3,7 @@ import { gql } from '@apollo/client';
 export const resolveInstrumentsWithFilters = gql`
   query resolveInstrumentsWithFilters(
     $division: Division!
-    $assetClass: [String]
+    $assetClass: [AssetClassName]
     $dataSource: InstrumentDataSource
     $instruments: [String]
     $searchPattern: String

package/src/gql/types/gql.ts

@@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n':
+  '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n':
     types.ResolveInstrumentsWithFiltersDocument,
 };
 
@@ -35,8 +35,8 @@ export function graphql(source: string): unknown;
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'
-): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [String]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'];
+  source: '\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'
+): (typeof documents)['\n  query resolveInstrumentsWithFilters(\n    $division: Division!\n    $assetClass: [AssetClassName]\n    $dataSource: InstrumentDataSource\n    $instruments: [String]\n    $searchPattern: String\n    $count: Int\n    $offset: Int\n  ) {\n    resolveInstrumentsWithFilters(\n      division: $division\n      assetClass: $assetClass\n      dataSource: $dataSource\n      instruments: $instruments\n      searchPattern: $searchPattern\n      count: $count\n      offset: $offset\n    ) {\n      instruments {\n        name\n        displayName\n      }\n      totalCount\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

package/src/gql/types/graphql.ts

@@ -40,6 +40,7 @@ export enum AssetClassName {
   Cryptocurrency = 'CRYPTOCURRENCY',
   Currency = 'CURRENCY',
   EquityShares = 'EQUITY_SHARES',
+  Etfs = 'ETFS',
   Indices = 'INDICES',
   Rates = 'RATES',
 }
@@ -251,7 +252,7 @@ export type QueryResolveInstrumentsByDivisionArgs = {
 };
 
 export type QueryResolveInstrumentsWithFiltersArgs = {
-  assetClass?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+  assetClass?: InputMaybe<Array<InputMaybe<AssetClassName>>>;
   count?: InputMaybe<Scalars['Int']['input']>;
   dataSource?: InputMaybe<InstrumentDataSource>;
   division: Division;
@@ -439,8 +440,7 @@ export enum VolatilityChartTimeUnit {
 export type ResolveInstrumentsWithFiltersQueryVariables = Exact<{
   division: Division;
   assetClass?: InputMaybe<
-    | Array<InputMaybe<Scalars['String']['input']>>
-    | InputMaybe<Scalars['String']['input']>
+    Array<InputMaybe<AssetClassName>> | InputMaybe<AssetClassName>
   >;
   dataSource?: InputMaybe<InstrumentDataSource>;
   instruments?: InputMaybe<
@@ -497,7 +497,7 @@ export const ResolveInstrumentsWithFiltersDocument = {
             kind: 'ListType',
             type: {
               kind: 'NamedType',
-              name: { kind: 'Name', value: 'String' },
+              name: { kind: 'Name', value: 'AssetClassName' },
             },
           },
         },

package/src/translations/sources/en.json

@@ -8,6 +8,7 @@
   "currency": "Currency",
   "daily_percent_change": "Daily % Change",
   "data_unavailable": "Data unavailable",
+  "etf_cfds": "ETF CFDs",
   "index": "Index",
   "instrument": "Instrument",
   "instrument_name": "Instrument name",
@@ -15,7 +16,7 @@
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "search": "Search",
   "sell": "Sell",
-  "share_sfds": "Share CFDs",
+  "share_cfds": "Share CFDs",
   "spread": "Spread",
   "today_high": "Today High",
   "today_low": "Today Low"

package/test/Main.test.tsx

@@ -9,7 +9,11 @@ import {
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { Division, InstrumentDataSource } from '../src/gql/types/graphql';
+import {
+  AssetClassName,
+  Division,
+  InstrumentDataSource,
+} from '../src/gql/types/graphql';
 import { Main } from '../src/InstrumentsTableWidget/Main';
 import {
   mockErrorQuery,
@@ -47,7 +51,7 @@ describe('Main component', () => {
             <Main
               isAssetClassFilterEnabled
               isInstrumentSearchEnabled
-              assetClasses={['FX', 'BONDS']}
+              assetClasses={[AssetClassName.Etfs, AssetClassName.Currency]}
               dataSource={InstrumentDataSource.V20}
               division={Division.Oc}
               instruments={['EUR_USD', 'GBP_USD']}
@@ -67,7 +71,7 @@ describe('Main component', () => {
           <MockLayoutProvider>
             <Main
               isAssetClassFilterEnabled
-              assetClasses={['FX', 'BONDS']}
+              assetClasses={[AssetClassName.Etfs, AssetClassName.Currency]}
               dataSource={InstrumentDataSource.V20}
               division={Division.Oc}
               instruments={['EUR_USD', 'GBP_USD']}