@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,42 +0,0 @@
-import {
-  GRAPHQL_TARGETS,
-  MC_API_PROXY_TARGETS,
-} from '@commercetools-frontend/constants';
-import { actions as sdkActions } from '@commercetools-frontend/sdk';
-import { FetchIndicesExist } from './fetch-indices-exist.pim-indexer.graphql';
-
-export default (apolloClient, projectKey) => async (dispatch) => {
-  try {
-    await dispatch(
-      sdkActions.head({
-        mcApiProxyTarget: MC_API_PROXY_TARGETS.PIM_SEARCH,
-        uri: `/${projectKey}/search/products`,
-      })
-    );
-
-    return { status: 'indexed' };
-  } catch (error) {
-    if (error.code === 404) {
-      const { data } = await apolloClient.query({
-        query: FetchIndicesExist,
-        context: {
-          target: GRAPHQL_TARGETS.PIM_INDEXER,
-        },
-        fetchPolicy: 'network-only',
-      });
-      if (
-        data.indicesExist.products.newInProgress ||
-        data.indicesExist.productTypes.newInProgress
-      ) {
-        return {
-          status: 'indexing',
-          isIndexingProducts: !data.indicesExist.products.searchableIndexExists,
-          isIndexingProductTypes:
-            !data.indicesExist.productTypes.searchableIndexExists,
-        };
-      }
-      return { status: 'unindexed' };
-    }
-    return { status: 'unreachable' };
-  }
-};

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

@@ -1,128 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,287 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,2 +0,0 @@
-// 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

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

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

@@ -1,23 +0,0 @@
-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;
-  };