@blaze-cms/plugin-data-ui 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/src/components/ListingTable/SearchFilter/helpers.js

@@ -0,0 +1,146 @@
+import { DEFAULT_FILTER_OPTION_LABEL } from '../../../constants';
+
+const updateListFilters = (searchTerm, selectedFilters, setListFilters, fields = []) => {
+  const filters = [];
+
+  if (searchTerm) {
+    filters.push({
+      simple_query_string: {
+        query: `${searchTerm}`,
+        default_operator: 'AND',
+        fields: fields.map(field => field)
+      }
+    });
+  }
+
+  Object.entries(selectedFilters).forEach(([filterKey, filterValue]) => {
+    const isEmptyArray = Array.isArray(filterValue) && filterValue.length === 0;
+    if (
+      filterValue == null ||
+      filterValue === '' ||
+      filterValue === DEFAULT_FILTER_OPTION_LABEL ||
+      isEmptyArray
+    )
+      return;
+
+    const field = `${filterKey}.keyword`;
+
+    if (Array.isArray(filterValue)) {
+      if (filterValue.length > 1) {
+        filters.push({
+          terms: { [field]: filterValue }
+        });
+      } else {
+        filters.push({
+          term: { [field]: filterValue[0] }
+        });
+      }
+    } else {
+      filters.push({
+        term: { [field]: filterValue }
+      });
+    }
+  });
+
+  setListFilters(filters);
+};
+
+const getKeywordSearchFilters = schema => {
+  if (!schema || !schema.properties) return [];
+
+  const { properties = {}, dynamicProperties = {} } = schema;
+
+  const propertyKeyword = Object.entries(properties).filter(isFilterKeywordItem);
+  const dynamicPropertyKeywords = Object.entries(dynamicProperties).filter(isFilterKeywordItem);
+
+  return [...propertyKeyword, ...dynamicPropertyKeywords];
+};
+
+const isFilterKeywordItem = ([, item]) =>
+  item.adminListingOptions && item.adminListingOptions.includeInKeywordSeach === true;
+
+const findSelectFilters = schema => {
+  if (!schema || !schema.properties) return [];
+
+  const { properties = {}, dynamicProperties = {} } = schema;
+
+  const propertySelects = Object.entries(properties).filter(isFilterSelectItem);
+  const dynamicPropertySelects = Object.entries(dynamicProperties).filter(isFilterSelectItem);
+
+  return [...propertySelects, ...dynamicPropertySelects];
+};
+
+const findMultiSelectFilters = schema => {
+  if (!schema || !schema.properties) return [];
+
+  const { properties = {}, dynamicProperties = {} } = schema;
+  const propertyMultiSelect = Object.entries(properties).filter(isFilterMultiSelectItems);
+  const dynamicPropertyMultiSelect =
+    Object.entries(dynamicProperties).filter(isFilterMultiSelectItems);
+  return [...propertyMultiSelect, ...dynamicPropertyMultiSelect];
+};
+
+const isFilterSelectItem = ([, item]) =>
+  item.adminListingOptions && item.adminListingOptions.filterType === 'select';
+
+const isFilterMultiSelectItems = ([, item]) =>
+  item.adminListingOptions && item.adminListingOptions.filterType === 'multiSelect';
+
+const buildQueryFields = (selectFilters, entityId) => {
+  if (!Array.isArray(selectFilters) || selectFilters.length === 0) {
+    return { gqlFields: '', rawQuery: '{}' };
+  }
+
+  const aggs = {};
+  selectFilters.forEach(([property, details]) => {
+    aggs[property] = {
+      terms: {
+        field: `${property}.keyword`, // todo: handle different field types
+        size: 1000, // todo: customise size
+        order: {
+          _key: 'asc'
+        }
+      }
+    };
+  });
+
+  const docType = entityId;
+  const rawQueryObject = {
+    size: 0,
+    query: {
+      bool: {
+        filter: {
+          bool: {
+            must: [{ match: { docType } }]
+          }
+        }
+      }
+    },
+    aggs
+  };
+  const rawQuery = JSON.stringify(rawQueryObject);
+
+  const gqlFields = `
+    rawResults
+  `;
+
+  return { gqlFields, rawQuery };
+};
+
+const getTidyLabel = (value, tidy) => {
+  if (!tidy) return value;
+
+  return value
+    .split(/[\s_-]+/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+export {
+  buildQueryFields,
+  updateListFilters,
+  getKeywordSearchFilters,
+  findSelectFilters,
+  findMultiSelectFilters,
+  getTidyLabel
+};

package/src/components/ListingTable/SearchFilter/querys.js

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+const NOOP_QUERY = gql`
+  query NoOp {
+    __typename
+  }
+`;
+
+export { NOOP_QUERY };

package/src/components/ListingTable/mappers/populate-rows.js

@@ -5,6 +5,7 @@ import TableActions from '../TableActions';
 import { ACTIONS } from '../../../constants';
 import InfoBoxValue from '../../InfoBoxes/presentational/InfoBoxValue';
 import InfoBoxLabel from '../../InfoBoxes/presentational/InfoBoxLabel';
+import InfoBoxTooltip from '../../InfoBoxes/InfoBoxTooltip';
 
 const formatRows = ({
   rows,
@@ -17,6 +18,7 @@ const formatRows = ({
 }) =>
   rows.map(data => {
     const editUrl = `${url}/update/${data.id}`;
+
     const rowProps = {
       ...data,
       [firstColumn]: (
@@ -65,6 +67,7 @@ const buildArrayRowContent = rowData => (
               </span>
               <span className="table-row-list__group__item__value">
                 <InfoBoxValue item={item} />
+                <InfoBoxTooltip info={item} />
               </span>
             </div>
           ))}

package/src/components/ListingTable/service/index.js

@@ -34,11 +34,11 @@ function buildVariables({ entitySchema, isSearchQuery, listFilters = [], queryPa
 }
 
 const fetchData = async ({ client, querySettings: { entitySchema, queryParams }, listFilters }) => {
-  const { displayProperties: { adminListings: { dataSource: { source } = {} } = {} } = {} } =
+  const { displayProperties: { adminListings: { dataSource: { source, index } = {} } = {} } = {} } =
     entitySchema;
 
   const isSearchQuery = source === 'search';
-  const query = buildListingQuery(entitySchema, isSearchQuery);
+  const query = buildListingQuery(entitySchema, index, isSearchQuery);
   const variables = buildVariables({ entitySchema, listFilters, queryParams, isSearchQuery });
 
   const { data = {} } = await client.query({

package/src/components/Tabs/index.js

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tab, TabItem } from '@blaze-react/tab';
-import {
-  useReadFromCache,
-  GET_CURRENT_TAB_ID,
-  TabsContextProvider
-} from '@blaze-cms/admin-ui-utils';
+import { useTabsContext, TabsContextProvider } from '@blaze-cms/admin-ui-utils';
 import {
   PAGE_BUILDER_TAB,
   PAGE_BUILDER_TAB_INDEX,
@@ -14,25 +10,25 @@ import {
 } from '../../constants';
 
 const Tabs = ({ children, onTabChange, enabled }) => {
-  const { currentTabId } = useReadFromCache({ query: GET_CURRENT_TAB_ID }) || EDITOR_VIEW_TAB_INDEX;
+  const { currentTabId = EDITOR_VIEW_TAB_INDEX } = useTabsContext() || {};
   const [activeAccordions, setActiveAccordions] = useState([]);
-  return enabled ? (
-    <>
-      <TabsContextProvider value={{ currentTabId, activeAccordions, setActiveAccordions }}>
-        <Tab selected={currentTabId}>
-          <TabItem title={EDITOR_VIEW_TAB} action={() => onTabChange(EDITOR_VIEW_TAB_INDEX)}>
-            {children}
-          </TabItem>
-          <TabItem title={PAGE_BUILDER_TAB} action={() => onTabChange(PAGE_BUILDER_TAB_INDEX)}>
-            {children}
-          </TabItem>
-        </Tab>
-      </TabsContextProvider>
-    </>
-  ) : (
-    <>{children}</>
+
+  if (!enabled) return children;
+
+  return (
+    <TabsContextProvider value={{ currentTabId, activeAccordions, setActiveAccordions }}>
+      <Tab selected={currentTabId}>
+        <TabItem title={EDITOR_VIEW_TAB} action={() => onTabChange(EDITOR_VIEW_TAB_INDEX)}>
+          {children}
+        </TabItem>
+        <TabItem title={PAGE_BUILDER_TAB} action={() => onTabChange(PAGE_BUILDER_TAB_INDEX)}>
+          {children}
+        </TabItem>
+      </Tab>
+    </TabsContextProvider>
   );
 };
+
 Tabs.propTypes = {
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]).isRequired,
   onTabChange: PropTypes.func.isRequired,

package/src/constants.js

@@ -26,6 +26,8 @@ const PAGE_BUILDER_TAB_INDEX = 1;
 const EDITOR_VIEW_TAB = 'Editor view';
 const EDITOR_VIEW_TAB_INDEX = 0;
 
+const ENTER_KEY = 'Enter';
+
 const ICON_SIZE = {
   WIDTH: '25px',
   HEIGHT: '25px'
@@ -36,8 +38,12 @@ const ICON_COLOR = {
   FILL: '#63779C'
 };
 
+const DEFAULT_FILTER_OPTION_LABEL = 'Any';
+const DEBUG_PARAM = 'blaze_debug=1';
+
 export {
   DATA_LISTING_PREFIX,
+  DEBUG_PARAM,
   ENTITY_PUBLISHED,
   KEY_TO_CHECK,
   LEAVE_PAGE_MESSAGE,
@@ -63,5 +69,7 @@ export {
   SAVE_BEFORE_PUBLISH_MESSAGE,
   ICON_SIZE,
   ICON_COLOR,
-  PAGE_NOT_FOUND
+  PAGE_NOT_FOUND,
+  ENTER_KEY,
+  DEFAULT_FILTER_OPTION_LABEL
 };

package/src/index.js

@@ -1,16 +1,20 @@
 import { getFormBuilderLookup, formFieldTypes } from '@blaze-cms/react-form-builder';
-import React from 'react';
 import pkg from '../package.json';
 import { DATA_LISTING_PREFIX, PLUGIN_NAME } from './constants';
 import getAddContentMenuItems from './utils/add-content-menu-items';
 import { UserIcon, TaxonomyIcon, ContentIcon, SettingsIcon } from './icons';
+import EntityDataListing from './components/EntityDataListing';
+import EntityManager from './components/EntityManager';
 
-const EntityDataListing = React.lazy(
-  () => import(/* webpackChunkName: 'EntityDataListing' */ './components/EntityDataListing')
-);
-const EntityManager = React.lazy(
-  () => import(/* webpackChunkName: 'EntityManager' */ './components/EntityManager')
-);
+// todo: renable lazy loading after bundler optimisations, currently they are too slow in dev mode
+// const EntityDataListing = React.lazy(
+//   () => import(/* webpackChunkName: 'EntityDataListing' */ './components/EntityDataListing')
+// );
+// const EntityManager = React.lazy(
+//   () => import(/* webpackChunkName: 'EntityManager' */ './components/EntityManager')
+// );
+
+export { default as SearchFilter } from './components/ListingTable/SearchFilter/SearchFilter';
 
 export default async function load(app) {
   app.events.once('admin:menu:config:load', getAddContentMenuItems(app));

package/src/utils/build-create-entity-mutation.js

@@ -1,31 +1,8 @@
-import { gql } from '@apollo/client';
-import { BlazeError } from '@blaze-cms/core-errors';
-import upperfirst from 'lodash.upperfirst';
-import { getDataProperties } from '@blaze-cms/admin-ui-utils';
+import { getDynamicMutation } from '@blaze-cms/admin-ui-utils';
 
-function buildCreateEntityMutation(entitySchema) {
-  if (
-    !entitySchema ||
-    !entitySchema.actions ||
-    !entitySchema.actions.create ||
-    !entitySchema.properties
-  ) {
-    throw new BlazeError(
-      'Create entity query requires create action and properties from entity schema'
-    );
-  }
-
-  const actionInput = upperfirst(`${entitySchema.actions.create}Input`);
-  const dataProperties = getDataProperties(entitySchema);
-
-  return gql`mutation createEntity($input:  ${actionInput}) {
-    createdEntity: ${entitySchema.actions.create}(input: $input){
-        result {
-          id,
-          ${dataProperties.join(',\n')}
-      }
-    }
-  }`;
-}
+// Kept for back-compat: the builder now lives in the admin-ui-utils dynamic
+// mutation registry so packages that cannot depend on this plugin can use it.
+const buildCreateEntityMutation = entitySchema =>
+  getDynamicMutation('CREATE_ENTITY_MUTATION')(entitySchema);
 
 export default buildCreateEntityMutation;

package/src/utils/build-listing-query.js

@@ -2,21 +2,21 @@ import { gql } from '@apollo/client';
 import { BlazeError } from '@blaze-cms/core-errors';
 import { getDynamicQuery } from '@blaze-cms/admin-ui-utils';
 
-const buildAdminSearchQuery = entitySchema => {
+const buildAdminSearchQuery = (entitySchema, index) => {
   const { listingProperties = [] } = entitySchema || {};
   const parsedProperties = `id, ${listingProperties.join(' ') || 'id name'}`;
 
-  return getDynamicQuery('ADMIN_SEARCH')([entitySchema], parsedProperties, true);
+  return getDynamicQuery('ADMIN_SEARCH')([entitySchema], parsedProperties, true, index);
 };
 
-function buildListingQuery(entitySchema, isSearchQuery) {
+function buildListingQuery(entitySchema, index, isSearchQuery) {
   if (!entitySchema.actions || !entitySchema.actions.getAll || !entitySchema.listingProperties) {
     throw new BlazeError(
       'Listing query requires getAll action and listingProperties from entity schema'
     );
   }
 
-  if (isSearchQuery) return buildAdminSearchQuery(entitySchema);
+  if (isSearchQuery) return buildAdminSearchQuery(entitySchema, index);
 
   const sortType =
     entitySchema.actions.getAll[0].toUpperCase() + entitySchema.actions.getAll.substr(1);

package/src/utils/get-default-query-params.js

@@ -1,19 +1,31 @@
 const getDefaultQueryParams = schema => {
   const updated = schema.properties && schema.properties.updated;
-  const { adminDefaultListingFilter: where } = schema.displayProperties || {};
+  const { adminDefaultListingFilter: where, adminListings: { defaultSort } = {} } =
+    schema.displayProperties || {};
+
+  let sort = [];
+
+  if (defaultSort?.property) {
+    sort = [
+      {
+        property: defaultSort.property,
+        direction: defaultSort.direction || 'asc'
+      }
+    ];
+  } else if (updated) {
+    sort = [
+      {
+        property: 'updated',
+        direction: 'desc'
+      }
+    ];
+  }
 
   return {
     where,
     limit: 10,
     offset: 0,
-    sort: updated
-      ? [
-          {
-            property: 'updated',
-            direction: 'desc'
-          }
-        ]
-      : []
+    sort
   };
 };
 

package/src/utils/hoc/withContext.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useMainContext, MainContext } from '@blaze-cms/admin-ui-utils';
 
-export const withContext = Component => props => {
-  const contexts = useMainContext(MainContext);
-  return <Component {...props} {...contexts} />;
-};
+export const withContext = Component =>
+  function (props) {
+    const contexts = useMainContext(MainContext);
+    return <Component {...props} {...contexts} />;
+  };

package/babel.config.js

@@ -1,3 +0,0 @@
-const babelConfig = require('@blaze-cms/setup-ui/babel/babel.config');
-
-module.exports = babelConfig;

package/jest.config.js

@@ -1,5 +0,0 @@
-const buildConfig = require('@blaze-cms/tools/jest/react-build-config');
-
-const jestConfig = buildConfig(__dirname);
-
-module.exports = jestConfig;