@commercetools-frontend/experimental-components 0.0.2

package/src/features/pim-indexer/components/pim-indexer-provider/fetch-pim-index-status.spec.js

@@ -0,0 +1,128 @@
+import { ReactReduxContext } from 'react-redux';
+import xhrMock from 'xhr-mock';
+import { createApolloClient } from '@commercetools-frontend/application-shell';
+import { renderAppWithRedux } from '@commercetools-frontend/application-shell/test-utils';
+import { createGraphqlMock } from '@commercetools-local/test-utils';
+import fetchPimIndexStatus from './fetch-pim-index-status';
+
+describe('fetchPimIndexStatus', () => {
+  beforeEach(() => xhrMock.setup());
+
+  afterEach(() => xhrMock.teardown());
+
+  const dispatchAction = () => {
+    let dispatch;
+    const apolloClient = createApolloClient();
+
+    renderAppWithRedux(
+      <div>
+        <ReactReduxContext.Consumer>
+          {({ store }) => {
+            dispatch = store.dispatch;
+            return null;
+          }}
+        </ReactReduxContext.Consumer>
+      </div>,
+      {
+        apolloClient,
+      }
+    );
+
+    return dispatch(fetchPimIndexStatus(apolloClient, 'test-with-big-data'));
+  };
+
+  describe('when project is indexed', () => {
+    beforeEach(() => {
+      xhrMock.use(
+        'HEAD',
+        'http://localhost:8080/proxy/pim-search/test-with-big-data/search/products',
+        (req, res) => res.status(200)
+      );
+    });
+
+    it('should return `indexed` status', async () => {
+      const status = await dispatchAction();
+
+      expect(status).toEqual({ status: 'indexed' });
+    });
+  });
+
+  describe('when project is unreachable', () => {
+    beforeEach(() => {
+      xhrMock.use(
+        'HEAD',
+        'http://localhost:8080/proxy/pim-search/test-with-big-data/search/products',
+        (req, res) => res.status(503)
+      );
+    });
+
+    it('should return `unreachable` status', async () => {
+      const status = await dispatchAction();
+
+      expect(status).toEqual({ status: 'unreachable' });
+    });
+  });
+
+  describe('when project is not indexed', () => {
+    beforeEach(() => {
+      // mock index query
+      xhrMock.use(
+        'HEAD',
+        'http://localhost:8080/proxy/pim-search/test-with-big-data/search/products',
+        (req, res) => res.status(404)
+      );
+
+      // mock index exists query
+      createGraphqlMock(xhrMock, {
+        fixtures: {
+          pimIndexer: {
+            indicesExist: {
+              products: {
+                searchableIndexExists: false,
+                newInProgress: false,
+              },
+              productTypes: {
+                searchableIndexExists: false,
+                newInProgress: false,
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it('should return `unindexed` status', async () => {
+      const status = await dispatchAction();
+
+      expect(status).toEqual({ status: 'unindexed' });
+    });
+  });
+
+  describe('when project is being indexed', () => {
+    beforeEach(() => {
+      xhrMock.use(
+        'HEAD',
+        'http://localhost:8080/proxy/pim-search/test-with-big-data/search/products',
+        (req, res) => res.status(404)
+      );
+
+      createGraphqlMock(xhrMock, {
+        fixtures: {
+          pimIndexer: {
+            products: 'indexed',
+            productTypes: 'indexing',
+          },
+        },
+      });
+    });
+
+    it('should return `indexing` status', async () => {
+      const status = await dispatchAction();
+      expect(status).toEqual({
+        status: 'indexing',
+        isIndexingProductTypes: true,
+        isIndexingProducts: false,
+      });
+    });
+  });
+});

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

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

package/src/features/pim-indexer/components/pim-indexer-provider/messages.js

@@ -0,0 +1,17 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  indexingSucceed: {
+    id: 'Products.PimIndexer.Notifications.indexingSucceed',
+    description:
+      'Message to be shown to user when PIM successfully finishes initial project indexing.',
+    defaultMessage:
+      'Indexing the project has been completed successfully. Refresh the page to start using the PIM search.',
+  },
+  indexingFailed: {
+    id: 'Products.PimIndexer.Notifications.indexingFailed',
+    description: 'Message to show to used in case PIM failed to index project',
+    defaultMessage:
+      'Indexing has failed. Please refresh the page and try again.',
+  },
+});

package/src/features/pim-indexer/components/pim-indexer-provider/pim-indexer-provider.jsx

@@ -0,0 +1,287 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { graphql, withApollo } from '@apollo/client/react/hoc';
+import flowRight from 'lodash.flowright';
+import { injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { withApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { GRAPHQL_TARGETS, DOMAINS } from '@commercetools-frontend/constants';
+import { injectNotifications } from '../../../../hocs';
+import fetchPimIndexStatus from './fetch-pim-index-status';
+import messages from './messages';
+import PimIndexerContext from '../pim-indexer-context';
+import {
+  RefreshProductIndices,
+  IndexProject,
+  GetIndexingProgress,
+} from './pim-indexer.pim-indexer.graphql';
+
+const pimIndexerRequestContext = {
+  target: GRAPHQL_TARGETS.PIM_INDEXER,
+};
+
+const isIndexingCompleted = (products, productTypes) =>
+  products.completed && productTypes.completed;
+
+const calculateProgress = (products, productTypes) =>
+  (products.percentCompleted + productTypes.percentCompleted) / 2;
+
+const getIndexingJobIds = ({ data: { products, productTypes } }) => ({
+  productsJobId: products?.indexingJobId || products?.existingIndexingJobId,
+  productTypesJobId:
+    productTypes?.indexingJobId || productTypes?.existingIndexingJobId,
+});
+
+export class PimIndexerProvider extends PureComponent {
+  static displayName = 'PimIndexerProvider';
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+
+    // connect
+    fetchPimIndexStatus: PropTypes.func.isRequired,
+    // injectNotifications
+    notifications: PropTypes.shape({
+      showNotification: PropTypes.func.isRequired,
+    }).isRequired,
+
+    // withApplicationContext
+    projectKey: PropTypes.string.isRequired,
+
+    // graphql
+    refreshProductIndicesByIds: PropTypes.func.isRequired,
+    indexProject: PropTypes.func.isRequired,
+
+    // withApollo
+    client: PropTypes.shape({
+      query: PropTypes.func.isRequired,
+    }).isRequired,
+
+    // injectIntl
+    intl: PropTypes.shape({ formatMessage: PropTypes.func.isRequired }),
+  };
+
+  state = {
+    isLoading: true,
+    isPimIndexerUnreachable: false,
+    isProjectIndexedByPim: false,
+    isProjectBeingIndexedByPim: false,
+  };
+
+  checkIfProjectIsIndexed = async () => {
+    const { status, isIndexingProducts, isIndexingProductTypes } =
+      await this.props.fetchPimIndexStatus(
+        this.props.client,
+        this.props.projectKey
+      );
+
+    if (status === 'indexing') {
+      this.monitorIndexingProgress({
+        isIndexingProducts,
+        isIndexingProductTypes,
+      });
+    } else {
+      this.setState({
+        isLoading: false,
+        isPimIndexerUnreachable: status === 'unreachable',
+        isProjectIndexedByPim: status === 'indexed',
+      });
+    }
+  };
+
+  componentDidMount = () => {
+    this.checkIfProjectIsIndexed();
+  };
+
+  componentWillUnmount() {
+    if (this.updateIndexingStatusTimerHandler)
+      clearTimeout(this.updateIndexingStatusTimerHandler);
+  }
+
+  attemptToRefreshProducts = (products) => {
+    if (this.state.isProjectIndexedByPim) {
+      return this.props.refreshProductIndicesByIds({
+        context: pimIndexerRequestContext,
+        variables: {
+          ids: products.map((product) => product.id),
+        },
+        // we are interested in `fetchPolicy=no-cache`, since refreshing the index on PIM-indexer
+        // returns us a shape of { id: `product-id`, __typeName: 'IndexedDocument' }, where `IndexedDocument`
+        // doesn't match the intended type that we are interested in from CTP.
+        // If we bypass that cache is updated through this mutation, we narrow `point of entry` to updating the cache for products list,
+        // which for now is `FetchProducts`
+        // Alternative approach to this would be to look into `dataIdFromObject` and amend product id with __typeName (IndexedDocument) if we
+        // would have been interested in caching this information in addition to using an `update` method provided from react-apollo itself
+        fetchPolicy: 'no-cache',
+      });
+    }
+    return Promise.resolve();
+  };
+
+  handleFailedIndexing = () => {
+    this.setState({
+      isProjectBeingIndexedByPim: false,
+      isProjectIndexedByPim: false,
+    });
+
+    this.props.notifications.showNotification({
+      kind: 'error',
+      domain: DOMAINS.SIDE,
+      text: this.props.intl.formatMessage(messages.indexingFailed),
+    });
+  };
+
+  getIndexingProgress = async () => {
+    const result = await this.props.client.query({
+      query: GetIndexingProgress,
+      context: pimIndexerRequestContext,
+      variables: {
+        productsJobId: this.state.productsJobId || '',
+        productTypesJobId: this.state.productTypesJobId || '',
+        shouldIncludeProducts: !!this.state.productsJobId,
+        shouldIncludeProductTypes: !!this.state.productTypesJobId,
+      },
+      fetchPolicy: 'network-only',
+    });
+
+    const completedStatus = {
+      percentCompleted: 100,
+      completed: true,
+    };
+
+    return {
+      products: result.data.products || completedStatus,
+      productTypes: result.data.productTypes || completedStatus,
+    };
+  };
+
+  handleFinishedIndexing = async () => {
+    try {
+      this.updateIndexingStatusTimerHandler = null;
+
+      const { status } = await this.props.fetchPimIndexStatus(
+        this.props.client,
+        this.props.projectKey
+      );
+
+      // There is a delay between indexing jobs reporting
+      // they are completed, and PIM realizing all the project is indexed.
+      // So, we have to wait to let PIM update project indexing status.
+      if (status === 'indexed') {
+        this.setState({
+          isProjectBeingIndexedByPim: false,
+          isProjectIndexedByPim: true,
+        });
+
+        this.props.notifications.showNotification(
+          {
+            kind: 'success',
+            domain: DOMAINS.SIDE,
+            text: this.props.intl.formatMessage(messages.indexingSucceed),
+          },
+          // because the indexing may take so long, the success notification
+          // may be dismissed without being seen by the user. Set `dismissAfter`
+          // to 0 to avoid that
+          { dismissAfter: 0 }
+        );
+      } else {
+        this.updateIndexingStatusTimerHandler = setTimeout(
+          this.handleFinishedIndexing,
+          5000
+        );
+      }
+    } catch (e) {
+      this.handleFailedIndexing();
+    }
+  };
+
+  updateIndexingStatus = async () => {
+    try {
+      const { products, productTypes } = await this.getIndexingProgress();
+      const isCompleted = isIndexingCompleted(products, productTypes);
+      const indexingProgress = calculateProgress(products, productTypes);
+
+      this.setState({ indexingProgress });
+
+      if (!isCompleted) {
+        this.updateIndexingStatusTimerHandler = setTimeout(
+          this.updateIndexingStatus,
+          5000
+        );
+      } else {
+        this.setState({
+          indexingProgress: 100,
+        });
+        this.handleFinishedIndexing();
+      }
+    } catch (e) {
+      this.handleFailedIndexing();
+    }
+  };
+
+  monitorIndexingProgress = async ({
+    isIndexingProducts,
+    isIndexingProductTypes,
+  }) => {
+    if (this.state.isProjectBeingIndexedByPim) return;
+
+    try {
+      const indexMutationResult = await this.props.indexProject({
+        context: pimIndexerRequestContext,
+        variables: {
+          shouldIndexProducts: isIndexingProducts,
+          shouldIndexProductTypes: isIndexingProductTypes,
+        },
+      });
+
+      this.setState(
+        {
+          isLoading: false,
+          isProjectBeingIndexedByPim: true,
+          ...getIndexingJobIds(indexMutationResult),
+          indexingProgress: 0,
+        },
+        () => this.updateIndexingStatus()
+      );
+    } catch (e) {
+      this.handleFailedIndexing();
+    }
+  };
+
+  indexProject = () =>
+    this.monitorIndexingProgress({
+      isIndexingProductTypes: true,
+      isIndexingProducts: true,
+    });
+
+  render() {
+    return (
+      <PimIndexerContext.Provider
+        value={{
+          ...this.state,
+          attemptToRefreshProducts: this.attemptToRefreshProducts,
+          indexProject: this.indexProject,
+        }}
+      >
+        {this.props.children}
+      </PimIndexerContext.Provider>
+    );
+  }
+}
+
+export default flowRight(
+  withApplicationContext((applicationContext) => ({
+    projectKey: applicationContext.project.key,
+  })),
+  connect(null, {
+    fetchPimIndexStatus,
+  }),
+  graphql(RefreshProductIndices, {
+    name: 'refreshProductIndicesByIds',
+  }),
+  graphql(IndexProject, {
+    name: 'indexProject',
+  }),
+  withApollo,
+  injectIntl,
+  injectNotifications()
+)(PimIndexerProvider);

package/src/features/pim-indexer/components/pim-indexer-provider/pim-indexer-provider.spec.js

@@ -0,0 +1,80 @@
+import { shallow } from 'enzyme';
+import { waitFor } from '@commercetools-frontend/application-shell/test-utils';
+import { intlMock } from '@commercetools-local/test-utils';
+import PimIndexerContext from '../pim-indexer-context';
+import { PimIndexerProvider } from './pim-indexer-provider';
+
+const createTestProps = (custom) => ({
+  children: <div className="child" />,
+  fetchPimIndexStatus: jest
+    .fn(() =>
+      Promise.resolve({
+        status: 'indexing',
+        isIndexingProducts: true,
+        isIndexingProductTypes: true,
+      })
+    )
+    .mockName('fetchPimIndexStatus'),
+  notifications: {
+    showNotification: jest.fn().mockName('showNotification'),
+  },
+  projectKey: 'project-foo',
+  refreshProductIndicesByIds: jest
+    .fn(() => Promise.resolve())
+    .mockName('refreshProductIndicesByIds'),
+  indexProject: jest.fn(() => Promise.resolve()).mockName('indexProject'),
+
+  client: {
+    query: jest.fn(() => Promise.resolve()).mockName('graphqlClientQuery'),
+  },
+  intl: intlMock,
+  ...custom,
+});
+
+describe('render', () => {
+  let props;
+  let wrapper;
+
+  beforeEach(() => {
+    props = createTestProps();
+    wrapper = shallow(<PimIndexerProvider {...props} />);
+    wrapper.instance().componentDidMount();
+  });
+  it('should not have pim-indexer unreachable', () => {
+    expect(wrapper.find(PimIndexerContext.Provider).prop('value')).toEqual(
+      expect.objectContaining({ isPimIndexerUnreachable: false })
+    );
+  });
+  it('should not have project indexed by PIM', () => {
+    expect(wrapper.find(PimIndexerContext.Provider).prop('value')).toEqual(
+      expect.objectContaining({ isProjectIndexedByPim: false })
+    );
+  });
+  it('should not index project by PIM', () => {
+    expect(wrapper.find(PimIndexerContext.Provider).prop('value')).toEqual(
+      expect.objectContaining({ isProjectBeingIndexedByPim: false })
+    );
+  });
+});
+
+describe('life cycle hooks', () => {
+  let props;
+  let wrapper;
+  describe('componentDidMount', () => {
+    beforeEach(async () => {
+      props = createTestProps();
+      wrapper = shallow(<PimIndexerProvider {...props} />);
+      await wrapper.instance().componentDidMount();
+    });
+    it('should call `fetchPimIndexStatus', () => {
+      expect(props.fetchPimIndexStatus).toHaveBeenCalled();
+    });
+    describe('when project is not indexed by PIM', () => {
+      it('should call `indexProject`', async () => {
+        await waitFor(() => {
+          expect(props.indexProject).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});

package/src/features/pim-indexer/components/pim-indexer-provider/pim-indexer.pim-indexer.graphql

@@ -0,0 +1,55 @@
+mutation RefreshProductIndices($ids: [String!]!) {
+  refreshProducts(ids: $ids) {
+    updatedDocuments {
+      id
+      version
+    }
+    deletedDocuments {
+      id
+    }
+    notFoundDocuments {
+      id
+    }
+    unchangedDocuments {
+      id
+      version
+    }
+    failedRefreshedDocuments {
+      id
+      reason
+    }
+  }
+}
+
+mutation IndexProject(
+  $shouldIndexProducts: Boolean!
+  $shouldIndexProductTypes: Boolean!
+) {
+  products: reIndexAllProducts @include(if: $shouldIndexProducts) {
+    indexingJobId
+    existingIndexingJobId
+  }
+  productTypes: reIndexAllProductTypes @include(if: $shouldIndexProductTypes) {
+    indexingJobId
+    existingIndexingJobId
+  }
+}
+
+query GetIndexingProgress(
+  $productsJobId: String!
+  $productTypesJobId: String!
+  $shouldIncludeProducts: Boolean!
+  $shouldIncludeProductTypes: Boolean!
+) {
+  products: getReindexingStatus(id: $productsJobId)
+    @include(if: $shouldIncludeProducts) {
+    percentCompleted
+    completed
+  }
+
+  productTypes: getReindexingStatus(id: $productTypesJobId)
+    @include(if: $shouldIncludeProductTypes) {
+    percentCompleted
+    completed
+  }
+}

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

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

package/src/features/pim-indexer/components/with-pim-indexer/with-pim-indexer.jsx

@@ -0,0 +1,19 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import PimIndexerContext from '../pim-indexer-context';
+
+export class WithPimIndexer extends PureComponent {
+  static displayName = 'WithPimIndexer';
+  static propTypes = {
+    children: PropTypes.func.isRequired,
+  };
+  render() {
+    return (
+      <PimIndexerContext.Consumer>
+        {(pimIndexerProps) => this.props.children(pimIndexerProps)}
+      </PimIndexerContext.Consumer>
+    );
+  }
+}
+
+export default WithPimIndexer;

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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as injectPimIndexer } from './inject-pim-indexer';

package/src/features/pim-indexer/hocs/inject-pim-indexer/index.js

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

package/src/features/pim-indexer/hocs/inject-pim-indexer/inject-pim-indexer.jsx

@@ -0,0 +1,23 @@
+import { wrapDisplayName } from '../../../../hocs';
+import WithPimIndexer from '../../components/with-pim-indexer';
+
+export default (propName = 'pimIndexer') =>
+  (Component) => {
+    const WrappedComponent = (props) => (
+      <WithPimIndexer>
+        {(pimIndexerProps) => (
+          <Component
+            {...props}
+            {...{
+              [propName]: pimIndexerProps,
+            }}
+          />
+        )}
+      </WithPimIndexer>
+    );
+    WrappedComponent.displayName = wrapDisplayName(
+      Component,
+      'InjectPimIndexer'
+    );
+    return WrappedComponent;
+  };

package/src/features/pim-indexer/hocs/inject-pim-indexer/inject-pim-indexer.spec.js

@@ -0,0 +1,37 @@
+/* eslint-disable testing-library/no-render-in-setup */
+import { shallow } from 'enzyme';
+import injectPimIndexer from './inject-pim-indexer';
+import WithPimIndexer from '../../components/with-pim-indexer';
+
+const ChildComponent = () => <div />;
+
+describe('injectPimIndexer', () => {
+  let propNameConfig;
+  let EnhancedComponent;
+  let wrapper;
+
+  describe('without `propName` config', () => {
+    beforeEach(() => {
+      propNameConfig = undefined;
+      EnhancedComponent = injectPimIndexer(propNameConfig)(ChildComponent);
+      wrapper = shallow(<EnhancedComponent />)
+        .find(WithPimIndexer)
+        .renderProp('children')('any-random-value');
+    });
+    it('should inject pimIndexer value as `pimIndexer`', () => {
+      expect(wrapper).toHaveProp('pimIndexer', 'any-random-value');
+    });
+  });
+  describe('with `propName` config', () => {
+    beforeEach(() => {
+      propNameConfig = 'any-random-prop';
+      EnhancedComponent = injectPimIndexer(propNameConfig)(ChildComponent);
+      wrapper = shallow(<EnhancedComponent />)
+        .find(WithPimIndexer)
+        .renderProp('children')('any-random-value');
+    });
+    it('should inject pimIndexer value as `pimIndexer`', () => {
+      expect(wrapper).toHaveProp(propNameConfig, 'any-random-value');
+    });
+  });
+});

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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as usePimIndexer } from './use-pim-indexer';

package/src/features/pim-indexer/hooks/use-pim-indexer/index.js

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

package/src/features/pim-indexer/hooks/use-pim-indexer/use-pim-indexer.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import PimIndexerContext from '../../components/pim-indexer-context';
+
+export default function usePimIndexer() {
+  return useContext(PimIndexerContext);
+}

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

@@ -0,0 +1,6 @@
+import PimIndexerProvider from './components/pim-indexer-provider';
+import WithPimIndexer from './components/with-pim-indexer';
+import injectPimIndexer from './hocs/inject-pim-indexer';
+import usePimIndexer from './hooks/use-pim-indexer';
+
+export { PimIndexerProvider, WithPimIndexer, injectPimIndexer, usePimIndexer };