@commercetools-frontend/experimental-components 0.0.2 → 0.1.0

package/src/features/picker/shared/hooks/use-current-option.spec.js

@@ -1,125 +0,0 @@
-import PropTypes from 'prop-types';
-import { graphql } from 'msw';
-import gql from 'graphql-tag';
-import { ApolloProvider } from '@apollo/client';
-import { waitFor } from '@commercetools-frontend/application-shell/test-utils';
-import { createApolloClient } from '@commercetools-frontend/application-shell';
-import { setupServer } from 'msw/node';
-import { renderHook } from '@testing-library/react-hooks';
-import { Product } from '@commercetools-local/test-data';
-import useCurrentOption from './use-current-option';
-
-const GetProductQuery = gql`
-  query GetProductQuery($id: String) {
-    product(id: $id) {
-      id
-      key
-      masterData {
-        current {
-          nameAllLocales {
-            locale
-            value
-          }
-        }
-      }
-    }
-  }
-`;
-const product = Product.presets.happyCowMilk().buildGraphql();
-
-const mockServer = setupServer(
-  graphql.query('GetProductQuery', (req, res, ctx) =>
-    res(
-      ctx.data({
-        product,
-      })
-    )
-  )
-);
-
-afterEach(() => {
-  mockServer.resetHandlers();
-});
-
-beforeAll(() => mockServer.listen());
-
-afterAll(() => mockServer.close());
-
-const convertQueryResultToOption = ({ product: { id, key, masterData } }) => {
-  const localizedName = masterData.current.nameAllLocales.find(
-    ({ locale }) => locale === 'en'
-  ).value;
-
-  return {
-    label: localizedName,
-    value: id,
-    name: localizedName,
-    key,
-  };
-};
-
-const render = async (props) => {
-  const apolloClient = createApolloClient();
-  const Wrapper = ({ children }) => (
-    <ApolloProvider client={apolloClient}>{children}</ApolloProvider>
-  );
-  Wrapper.propTypes = {
-    children: PropTypes.element.isRequired,
-  };
-
-  const { result, waitForNextUpdate } = renderHook(
-    () => useCurrentOption(props),
-    {
-      wrapper: Wrapper,
-    }
-  );
-
-  await waitForNextUpdate();
-
-  return { result };
-};
-
-describe('useCurrentOption', () => {
-  it('should return loaded item as an option', async () => {
-    const { result } = await render({
-      id: product.id,
-      convertQueryResultToOption,
-      query: GetProductQuery,
-    });
-
-    await waitFor(() =>
-      expect(result.current).toStrictEqual({
-        loading: false,
-        data: {
-          value: product.id,
-          label: 'Happy Cow Milk',
-          name: 'Happy Cow Milk',
-          key: 'happy-cow-milk-key',
-        },
-        error: undefined,
-      })
-    );
-  });
-
-  it('should return error if loading failed', async () => {
-    mockServer.use(
-      graphql.query('GetProductQuery', (req, res, ctx) =>
-        res.once(ctx.status(503))
-      )
-    );
-
-    const { result } = await render({
-      id: product.id,
-      convertQueryResultToOption,
-      query: GetProductQuery,
-    });
-
-    await waitFor(() =>
-      expect(result.current).toStrictEqual({
-        loading: false,
-        data: undefined,
-        error: expect.any(Error),
-      })
-    );
-  });
-});

package/src/features/picker/shared/hooks/use-handlers.js

@@ -1,42 +0,0 @@
-import { useCallback, useState } from 'react';
-import { useEventCallback, useTracking } from '../../../../internal-index';
-
-const useHandlers = (onChange, getTrackingEvent) => {
-  const { track } = useTracking();
-  const [inputValue, setInputValue] = useState();
-
-  const handleInputChange = useCallback((changedValue) => {
-    setInputValue(changedValue);
-  }, []);
-
-  const handleChange = useEventCallback(
-    (event) => {
-      const doTrack = () => {
-        const trackingEvent = getTrackingEvent(inputValue, event.target.value);
-        if (trackingEvent) {
-          const { action, category, label } = trackingEvent;
-          track(action, category, label);
-        }
-      };
-
-      if (event.target.value) {
-        doTrack();
-      }
-
-      const eventWithExtractedValue = {
-        ...event,
-        target: {
-          ...event.target,
-          value: event.target.value?.value,
-        },
-      };
-
-      onChange(eventWithExtractedValue);
-    },
-    [onChange, getTrackingEvent, inputValue, track]
-  );
-
-  return [handleInputChange, handleChange];
-};
-
-export default useHandlers;

package/src/features/picker/shared/hooks/use-load-options.js

@@ -1,63 +0,0 @@
-import { useApolloClient } from '@apollo/client';
-import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants';
-import { getPrefixSearchBounds, isUUID } from '../../../../internal-index';
-
-import { useCallback } from 'react';
-
-const constructPrefixSearchPredicate = (
-  prefixSearchFields = [],
-  lowerBound,
-  upperBound
-) => {
-  const constructPrefixSearchExpression = (field) => {
-    const path = field.split('.');
-    const [finalValueInPath, ...remainPathInReverse] = path.slice().reverse();
-    const comparison = `${finalValueInPath} >= "${lowerBound}" and ${finalValueInPath} < "${upperBound}"`;
-    if (remainPathInReverse.length) {
-      return remainPathInReverse.reduce(
-        (nestedPath, nextPath) => `${nextPath}(${nestedPath})`,
-        comparison
-      );
-    }
-    return comparison;
-  };
-  return prefixSearchFields.map(constructPrefixSearchExpression).join(' or ');
-};
-
-const useLoadOptions = ({ query, variables, prefixSearchFields }) => {
-  const client = useApolloClient();
-
-  const loadOptions = useCallback(
-    (inputValue = '') => {
-      const where = do {
-        if (inputValue.length) {
-          if (isUUID(inputValue)) `id = "${inputValue}"`;
-          else {
-            const [lowerBound, upperBound] = getPrefixSearchBounds(inputValue);
-            constructPrefixSearchPredicate(
-              prefixSearchFields,
-              lowerBound,
-              upperBound
-            );
-          }
-        }
-      };
-      return client.query({
-        query,
-        variables: {
-          where,
-          ...variables,
-        },
-        context: {
-          target: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM,
-        },
-        fetchPolicy: 'network-only',
-      });
-    },
-    [client, query, variables, prefixSearchFields]
-  );
-
-  return loadOptions;
-};
-
-export default useLoadOptions;

package/src/features/picker/shared/hooks/use-load-options.spec.js

@@ -1,63 +0,0 @@
-import { ApolloProvider } from '@apollo/client';
-import { renderHook } from '@testing-library/react-hooks';
-import PropTypes from 'prop-types';
-import { IntlProvider } from 'react-intl';
-import useLoadOptions from './use-load-options';
-
-jest.mock(
-  '@commercetools-frontend/experimental-components/src/hooks/use-format-localized-field-to-string',
-  () => () => jest.fn()
-);
-
-const render = (renderHookCallback, { query = () => Promise.resolve() }) => {
-  const Wrapper = ({ children }) => (
-    <ApolloProvider client={{ query }}>
-      <IntlProvider locale="en">{children}</IntlProvider>
-    </ApolloProvider>
-  );
-  Wrapper.propTypes = {
-    children: PropTypes.element.isRequired,
-  };
-
-  return renderHook(renderHookCallback, {
-    wrapper: Wrapper,
-  });
-};
-
-it('should load options with full text id search', async () => {
-  const query = jest.fn(() => Promise.resolve());
-  const { result } = render(() => useLoadOptions({ query: {} }), {
-    query,
-  });
-  const loadOptions = result.current;
-
-  const id = '085b9ede-9b52-4f08-b848-b868aa6c9880';
-  await loadOptions(id);
-
-  expect(query.mock.calls[0][0].variables.where).toBe(`id = "${id}"`);
-});
-
-it.each`
-  prefixSearchFields                       | inputValue | predicate
-  ${['name.en', 'key']}                    | ${'s'}     | ${'name(en >= "s" and en < "t") or key >= "s" and key < "t"'}
-  ${['masterData.current.name.en', 'key']} | ${'s'}     | ${'masterData(current(name(en >= "s" and en < "t"))) or key >= "s" and key < "t"'}
-  ${['name.en']}                           | ${'s'}     | ${'name(en >= "s" and en < "t")'}
-  ${['key']}                               | ${'s'}     | ${'key >= "s" and key < "t"'}
-  ${[]}                                    | ${'s'}     | ${''}
-`(
-  'should load options with prefix search using $prefixSearchFields search fields',
-  async ({ prefixSearchFields, inputValue, predicate }) => {
-    const query = jest.fn(() => Promise.resolve());
-    const { result } = render(
-      () => useLoadOptions({ query: {}, prefixSearchFields }),
-      {
-        query,
-      }
-    );
-
-    const loadOptions = result.current;
-
-    await loadOptions(inputValue);
-    expect(query.mock.calls[0][0].variables.where).toBe(predicate);
-  }
-);

package/src/features/picker/shared/hooks/use-product-type-options.js

@@ -1,190 +0,0 @@
-import { useCallback } from 'react';
-import { useApolloClient, useQuery } from '@apollo/client/react';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import {
-  GRAPHQL_TARGETS,
-  MC_API_PROXY_TARGETS,
-} from '@commercetools-frontend/constants';
-import {
-  actions as sdkActions,
-  useAsyncDispatch,
-} from '@commercetools-frontend/sdk';
-import { FetchIndicesExist } from '../../../pim-indexer/components/pim-indexer-provider/fetch-indices-exist.pim-indexer.graphql';
-import {
-  isUUID,
-  GetProductTypesQuery,
-  getPrefixSearchBounds,
-  setToArray,
-} from '../../../../internal-index';
-
-const useExecuteGraphQLRequest = () => {
-  const apolloClient = useApolloClient();
-  return useCallback(
-    (query, variables, context, fetchPolicy) => {
-      return apolloClient.query({
-        query,
-        variables,
-        context,
-        fetchPolicy,
-      });
-    },
-    [apolloClient]
-  );
-};
-
-const createSearchProductsFromPIMAction = (searchTerm, projectKey) =>
-  sdkActions.post({
-    mcApiProxyTarget: MC_API_PROXY_TARGETS.PIM_SEARCH,
-    uri: `/${projectKey}/search/product-types`,
-    payload: {
-      query: {
-        wildcard: {
-          field: 'name',
-          value: `*${searchTerm}*`,
-          caseInsensitive: true,
-        },
-      },
-      limit: 10,
-      offset: 0,
-    },
-  });
-
-const useFetchProductTypesFromPIM = ({ dataLocale, projectKey }) => {
-  const dispatch = useAsyncDispatch();
-  const executeGraphQLRequest = useExecuteGraphQLRequest();
-  const fetchProductTypesFromPim = useCallback(
-    async (searchTerm) => {
-      const result = await dispatch(
-        createSearchProductsFromPIMAction(searchTerm, projectKey)
-      );
-      const ids = result?.hits?.map((hit) => hit.id) ?? [];
-      // Avoid sending any requests if it's clear that nothing is found
-      if (ids.length === 0) {
-        return {
-          data: { productType: { results: [] } },
-          loading: false,
-        };
-      }
-      const variables = {
-        // ids of recentFilters is a Set so we transform it to array
-        where: setToArray(ids),
-      };
-      return executeGraphQLRequest(GetProductTypesQuery, variables, {
-        target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-      });
-    },
-    [dispatch, executeGraphQLRequest, projectKey]
-  );
-
-  return fetchProductTypesFromPim;
-};
-
-/**
- *
- * @param reversedPath string[]
- * e.g [name, current, masterData], which is the reverse path of a Product
- * @param predicate
- * predicate expression, e.g `en="Hej"`
- *
- * @return nestedExpression string
- * e.g masterData(current(name(en="Hej")))
- */
-const constructNestedExpression = (reversedPath, predicate) => {
-  if (reversedPath.length > 0) {
-    return reversedPath.reduce(
-      (nextNestedValue, nestedSelection) =>
-        `${nestedSelection}(${nextNestedValue})`,
-      predicate
-    );
-  }
-  return predicate;
-};
-
-const constructPrefixSearchPredicate = (
-  prefixSearchFields,
-  lowerBound,
-  upperBound
-) => {
-  const constructPrefixSearchExpression = (field) => {
-    const parts = field.split('.');
-    const [valueToNest, ...reversedPathToNestedValue] = parts.slice().reverse();
-    const predicateExpression = `${valueToNest} >= "${lowerBound}" and ${valueToNest} < "${upperBound}"`;
-    return constructNestedExpression(
-      reversedPathToNestedValue,
-      predicateExpression
-    );
-  };
-  return prefixSearchFields.map(constructPrefixSearchExpression).join(' or ');
-};
-
-const constructWherePredicate = (inputValue, prefixSearchFields) => {
-  const wherePredicate = do {
-    if (inputValue.length) {
-      if (isUUID(inputValue)) `id = "${inputValue}"`;
-      else {
-        const [lowerBound, upperBound] = getPrefixSearchBounds(inputValue);
-        constructPrefixSearchPredicate(
-          prefixSearchFields,
-          lowerBound,
-          upperBound
-        );
-      }
-    }
-  };
-
-  return wherePredicate;
-};
-
-const useFetchProductTypessFromCTP = ({ prefixSearchFields }) => {
-  const executeGraphQLRequest = useExecuteGraphQLRequest();
-  return useCallback(
-    (inputValue = '') => {
-      const where = constructWherePredicate(inputValue, prefixSearchFields);
-      return executeGraphQLRequest(
-        GetProductTypesQuery,
-        { where },
-        { target: MC_API_PROXY_TARGETS.COMMERCETOOLS_PLATFORM },
-        'network-only'
-      );
-    },
-    [prefixSearchFields, executeGraphQLRequest]
-  );
-};
-
-export const usePimStatus = () => {
-  const { data } = useQuery(FetchIndicesExist, {
-    context: { target: GRAPHQL_TARGETS.PIM_INDEXER },
-    fetchPolicy: 'cache-and-network',
-  });
-  return {
-    data,
-    isProjectIndexed: Boolean(
-      data?.indicesExist?.productTypes?.searchableIndexExists
-    ),
-  };
-};
-
-const useProductTypeOptions = ({ prefixSearchFields }) => {
-  const { isProjectIndexed } = usePimStatus();
-  const { dataLocale, projectKey } = useApplicationContext((context) => ({
-    dataLocale: context.dataLocale,
-    projectKey: context.project?.key,
-  }));
-
-  const fetchProductTypesFromPim = useFetchProductTypesFromPIM({
-    dataLocale,
-    projectKey,
-  });
-  const fetchProductTypessFromCTP = useFetchProductTypessFromCTP({
-    prefixSearchFields,
-  });
-
-  return {
-    isProjectIndexed,
-    loadProductTypes: isProjectIndexed
-      ? fetchProductTypesFromPim
-      : fetchProductTypessFromCTP,
-  };
-};
-
-export default useProductTypeOptions;

package/src/features/picker/shared/hooks/use-product-type-options.spec.js

@@ -1,151 +0,0 @@
-import { hooks } from '@commercetools-frontend/application-shell/test-utils';
-import { buildGraphqlList } from '@commercetools-test-data/core';
-import { ProductType } from '@commercetools-local/test-data';
-import useProductTypeOptions from './use-product-type-options';
-import { graphql, rest } from 'msw';
-import { setupServer } from 'msw/node';
-
-const mcGraphqlApi = graphql.link('*/graphql');
-
-const mockServer = setupServer(
-  mcGraphqlApi.query('FetchIndicesExist', (req, res, ctx) =>
-    res(
-      ctx.data({
-        indicesExist: {
-          products: {
-            searchableIndexExists: false,
-            newInProgress: false,
-          },
-          productTypes: {
-            searchableIndexExists: false,
-            newInProgress: false,
-          },
-        },
-      })
-    )
-  ),
-  mcGraphqlApi.query('GetProductTypesQuery', (req, res, ctx) => {
-    const { where } = req.body.variables;
-    const foundProductTypes =
-      where === 'id in ("91ca7360-48d6-4b07-a03c-3360383ae6c0")'
-        ? [
-            ProductType.random()
-              .id('91ca7360-48d6-4b07-a03c-3360383ae6c0')
-              .name('Product Type found via PIM'),
-          ]
-        : [
-            ProductType.random()
-              .id('"ad1b5f7f-97b2-4164-a460-0730272e970c"')
-              .name('Product Type found via CTP'),
-          ];
-
-    return res(
-      ctx.data({
-        productTypes: buildGraphqlList(foundProductTypes, {
-          name: 'ProductTypes',
-          total: foundProductTypes.length,
-        }),
-      })
-    );
-  }),
-  rest.post(
-    'http://localhost:8080/proxy/pim-search/test-with-big-data/search/product-types',
-    (req, res, ctx) => {
-      return res(
-        ctx.json({
-          total: 1,
-          offset: 0,
-          limit: 10,
-          hits: [
-            {
-              id: '91ca7360-48d6-4b07-a03c-3360383ae6c0',
-              version: 1,
-              relevance: 1.0,
-            },
-          ],
-          facets: null,
-          suggestions: null,
-        })
-      );
-    }
-  )
-);
-afterEach(() => mockServer.resetHandlers());
-beforeAll(() => {
-  console.config.addSilencedWarning(/Failed to intercept a GraphQL request/i);
-  mockServer.listen({ onUnhandledRequest: 'warn' });
-});
-afterAll(() => mockServer.close());
-
-const render = async () => {
-  const prefixSearchFields = ['name'];
-  return hooks.renderHook(() => useProductTypeOptions({ prefixSearchFields }));
-};
-
-describe('useProductTypeOptions', () => {
-  it('should fetch using CTP for non indexed projects', async () => {
-    const { result, waitFor } = await render();
-    await waitFor(() => expect(result.current.isProjectIndexed).toBe(false));
-    await hooks.act(async () => {
-      try {
-        const response = await result.current.loadProductTypes('a');
-        expect(response.data).toMatchInlineSnapshot(`
-        Object {
-          "productTypes": Object {
-            "__typename": "ProductTypesQueryResult",
-            "results": Array [
-              Object {
-                "__typename": "ProductTypeDefinition",
-                "id": "\\"ad1b5f7f-97b2-4164-a460-0730272e970c\\"",
-                "name": "Product Type found via CTP",
-              },
-            ],
-          },
-        }
-      `);
-      } catch (e) {
-        console.log({ e });
-      }
-    });
-  });
-
-  it('should fetch using PIM for indexed projects', async () => {
-    mockServer.use(
-      mcGraphqlApi.query('FetchIndicesExist', (req, res, ctx) =>
-        res(
-          ctx.data({
-            indicesExist: {
-              products: {
-                searchableIndexExists: false,
-                newInProgress: false,
-              },
-              productTypes: {
-                searchableIndexExists: true,
-                newInProgress: false,
-              },
-            },
-          })
-        )
-      )
-    );
-    const { result, waitFor } = await render();
-    await waitFor(() => expect(result.current.isProjectIndexed).toBe(true));
-    await hooks.act(async () => {
-      const response = await result.current.loadProductTypes('a');
-      expect(response.data).toMatchInlineSnapshot(`
-        Object {
-          "productTypes": Object {
-            "__typename": "ProductTypesQueryResult",
-            "results": Array [
-              Object {
-                "__typename": "ProductTypeDefinition",
-                "id": "91ca7360-48d6-4b07-a03c-3360383ae6c0",
-                "name": "Product Type found via PIM",
-              },
-            ],
-          },
-        }
-      `);
-    });
-  });
-});

package/src/features/pim-indexer/components/index.js

@@ -1,5 +0,0 @@
-export { default as PimIndexerProvider } from './pim-indexer-provider';
-
-export { default as WithPimIndexer } from './with-pim-indexer';
-
-export { default as PimIndexerContext } from './pim-indexer-context';

package/src/features/pim-indexer/components/pim-indexer-context/index.js

@@ -1 +0,0 @@
-export { default } from './pim-indexer-context';

package/src/features/pim-indexer/components/pim-indexer-context/pim-indexer-context.js

@@ -1,28 +0,0 @@
-import { createContext } from 'react';
-
-/**
- * @typedef {object} TPimIndexer
- * @property {boolean} isLoading
- * @property {boolean} isPimIndexerUnreachable
- * @property {boolean} isProjectIndexedByPim
- * @property {boolean} isProjectBeingIndexedByPim
- * @property {function} attemptToRefreshProducts
- * @property {function} indexProject
- */
-
-/** @type TPimIndexer */
-const defaultValue = {
-  isLoading: false,
-  isPimIndexerUnreachable: false,
-  isProjectIndexedByPim: false,
-  isProjectBeingIndexedByPim: false,
-  attemptToRefreshProducts: () => {},
-  indexProject: () => {},
-};
-
-/**
- * @type {import('react').Context<TPimIndexer>}
- */
-const PimIndexerContext = createContext(defaultValue);
-
-export default PimIndexerContext;

package/src/features/pim-indexer/components/pim-indexer-provider/fetch-indices-exist.pim-indexer.graphql

@@ -1,12 +0,0 @@
-query FetchIndicesExist {
-  indicesExist {
-    products {
-      searchableIndexExists
-      newInProgress
-    }
-    productTypes {
-      searchableIndexExists
-      newInProgress
-    }
-  }
-}