fix: improve status column display (#611)

fix: check if status column is empty and don't show it
fix: add new collapsible and showchatbox

cypress/e2e/item/chatbox/chatbox.cy.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { WebSocket } from '@graasp/websockets/test/mock-client';
+import { WebSocket } from '@graasp/plugin-websockets/test/mock-client';
 
 import { buildItemPath } from '../../../../src/config/paths';
 import {

cypress/e2e/item/hide/hideItem.cy.js

@@ -16,7 +16,6 @@ const toggleHideButton = (itemId, isHidden = false) => {
   const menuSelector = `#${buildItemMenuButtonId(itemId)}`;
   cy.get(menuSelector).click();
 
-  cy.wait('@getItemTags');
   cy.get(`#${buildItemMenu(itemId)} .${HIDDEN_ITEM_BUTTON_CLASS}`)
     .should('have.attr', 'data-cy', buildHideButtonId(isHidden))
     .click();

cypress/e2e/item/order/reorderItems.cy.js

@@ -13,6 +13,13 @@ const reorderAndCheckItem = (id, currentPosition, newPosition) => {
     id,
   )} .${ROW_DRAGGER_CLASS} svg`;
 
+  cy.wait([
+    '@getItem',
+    '@getChildren',
+    '@getItemMemberships',
+    '@downloadItemThumbnail',
+  ]);
+
   cy.dragAndDrop(dragIcon, 0, (newPosition - currentPosition) * ROW_HEIGHT);
 
   cy.wait('@editItem').then(

cypress/e2e/item/settings/itemSettings.cy.js

@@ -50,7 +50,7 @@ describe('Item Settings', () => {
             body: { settings },
           },
         }) => {
-          expect(settings.showChatbox).equals(false);
+          expect(settings?.showChatbox).equals(false);
           cy.wait(EDIT_ITEM_PAUSE);
           cy.get('@getItem').its('response.url').should('contain', itemId);
         },
@@ -73,7 +73,7 @@ describe('Item Settings', () => {
             body: { settings },
           },
         }) => {
-          expect(settings.showChatbox).equals(true);
+          expect(settings?.showChatbox).equals(true);
           cy.wait(EDIT_ITEM_PAUSE);
           cy.get('@getItem').its('response.url').should('contain', itemId);
         },

cypress/e2e/ws/item.cy.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { WebSocket } from '@graasp/websockets/test/mock-client';
+import { WebSocket } from '@graasp/plugin-websockets/test/mock-client';
 
 import { SHARED_ITEMS_PATH, buildItemPath } from '../../../src/config/paths';
 import { buildItemsTableRowIdAttribute } from '../../../src/config/selectors';

cypress/support/createUtils.js

@@ -13,7 +13,8 @@ import { ITEM_TYPES } from '../fixtures/enums';
 
 // eslint-disable-next-line import/prefer-default-export
 export const createItem = (payload, options) => {
-  cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click();
+  // click is forced to avoid errors with tooltips covering the button
+  cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click({ force: true });
 
   switch (payload.type) {
     case ITEM_TYPES.LINK:

package.json

@@ -12,14 +12,14 @@
   "dependencies": {
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
-    "@graasp/chatbox": "1.1.0",
-    "@graasp/query-client": "0.4.0",
-    "@graasp/sdk": "0.10.0",
-    "@graasp/translations": "1.10.0",
-    "@graasp/ui": "2.3.0",
-    "@mui/icons-material": "5.11.0",
+    "@graasp/chatbox": "1.2.1",
+    "@graasp/query-client": "0.4.1",
+    "@graasp/sdk": "0.10.1",
+    "@graasp/translations": "1.11.0",
+    "@graasp/ui": "2.3.1",
+    "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.117",
-    "@mui/material": "5.11.6",
+    "@mui/material": "5.12.0",
     "@sentry/react": "7.44.2",
     "@sentry/tracing": "7.44.2",
     "@uppy/core": "3.0.4",
@@ -37,7 +37,7 @@
     "filesize": "9.0.11",
     "http-status-codes": "2.2.0",
     "i18next": "21.8.1",
-    "immutable": "4.2.4",
+    "immutable": "4.3.0",
     "katex": "0.16.0",
     "lodash.partition": "4.6.0",
     "lodash.truncate": "4.4.2",
@@ -63,14 +63,14 @@
   "scripts": {
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
-    "start": "env-cmd -f ./.env.local react-app-rewired start",
-    "start:test": "env-cmd -f ./.env.test react-app-rewired start",
-    "start:prod": "env-cmd -f ./.env.production react-app-rewired start",
-    "start:ci": "react-app-rewired -r @cypress/instrument-cra start",
-    "build": "react-app-rewired build",
-    "build:local": "env-cmd -f ./.env.local react-app-rewired build",
-    "dist": "env-cmd -f ./.env.production react-app-rewired build",
-    "dist:dev": "env-cmd -f ./.env.development react-app-rewired build",
+    "start": "env-cmd -f ./.env.local react-scripts start",
+    "start:test": "env-cmd -f ./.env.test react-scripts start",
+    "start:prod": "env-cmd -f ./.env.production react-scripts start",
+    "start:ci": "react-scripts -r @cypress/instrument-cra start",
+    "build": "react-scripts build",
+    "build:local": "env-cmd -f ./.env.local react-scripts build",
+    "dist": "env-cmd -f ./.env.production react-scripts build",
+    "dist:dev": "env-cmd -f ./.env.development react-scripts build",
     "eject": "react-scripts eject",
     "lint": "eslint --resolve-plugins-relative-to .",
     "type-check": "tsc --noEmit",
@@ -80,12 +80,7 @@
     "cypress:open": "env-cmd -f ./.env.local cypress open",
     "cypress": "concurrently \"yarn start:test\" \"wait-on http://localhost:3111 && yarn cypress:run\"",
     "cypress:run": "env-cmd -f ./.env.test cypress run --headless --browser chrome --spec \"cypress/**/*.cy.js\"",
-    "postinstall": "husky install",
-    "release": "standard-version -a",
-    "release:first": "standard-version -a --first-release",
-    "release:minor": "standard-version -a --release-as minor",
-    "release:major": "standard-version -a --release-as major",
-    "release:patch": "standard-version -a --release-as patch"
+    "postinstall": "husky install"
   },
   "browserslist": {
     "production": [
@@ -107,12 +102,13 @@
     "@commitlint/config-conventional": "17.4.2",
     "@cypress/code-coverage": "3.10.0",
     "@cypress/instrument-cra": "1.4.0",
-    "@graasp/websockets": "github:graasp/graasp-websockets.git",
+    "@graasp/plugin-websockets": "1.0.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "@trivago/prettier-plugin-sort-imports": "4.0.0",
     "@types/jest": "29.0.3",
+    "@types/lodash.partition": "4.6.7",
     "@types/lodash.truncate": "4.4.7",
     "@types/node": "18.7.21",
     "@types/papaparse": "5.3.7",
@@ -135,21 +131,20 @@
     "eslint-plugin-react": "7.32.2",
     "husky": "8.0.3",
     "istanbul-lib-coverage": "3.2.0",
-    "npm-run-all": "4.1.5",
     "nyc": "15.1.0",
     "prettier": "2.8.3",
-    "react-app-rewired": "2.2.1",
-    "standard-version": "9.5.0",
+    "progress-bar-webpack-plugin": "2.1.0",
     "typescript": "4.9.4",
-    "wait-on": "7.0.1"
+    "wait-on": "7.0.1",
+    "webpack-bundle-analyzer": "4.8.0"
   },
   "resolutions": {
-    "@mui/icons-material": "5.11.0",
-    "@mui/material": "5.11.6",
-    "@graasp/sdk": "0.10.0",
-    "@graasp/ui": "2.3.0",
+    "@mui/icons-material": "5.11.16",
+    "@mui/material": "5.12.0",
     "immer": "9.0.6",
-    "immutable": "4.2.4",
+    "@graasp/sdk": "0.10.1",
+    "immutable": "4.3.0",
+    "@types/react": "17.0.2",
     "@svgr/webpack": "6.5.1"
   },
   "packageManager": "[email protected]"

scripts/analyze.js

@@ -0,0 +1,37 @@
+process.env.NODE_ENV = 'production';
+
+const webpack = require('webpack');
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const webpackConfigProd = require('react-scripts/config/webpack.config')(
+  'production',
+);
+
+// this one is optional, just for better feedback on build
+const chalk = require('chalk');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const green = (text) => {
+  return chalk.green.bold(text);
+};
+
+// pushing BundleAnalyzerPlugin to plugins array
+webpackConfigProd.plugins.push(new BundleAnalyzerPlugin());
+
+// optional - pushing progress-bar plugin for better feedback;
+// it can and will work without progress-bar,
+// but during build time you will not see any messages for 10-60 seconds (depends on the size of the project)
+// and decide that compilation is kind of hang up on you; progress bar shows nice progression of webpack compilation
+webpackConfigProd.plugins.push(
+  new ProgressBarPlugin({
+    format: `${green('analyzing...')} ${green('[:bar]')}${green(
+      '[:percent]',
+    )}${green('[:elapsed seconds]')} - :msg`,
+  }),
+);
+
+// actually running compilation and waiting for plugin to start explorer
+webpack(webpackConfigProd, (err, stats) => {
+  if (err || stats.hasErrors()) {
+    console.error(err);
+  }
+});

src/components/Root.tsx

@@ -2,7 +2,8 @@ import '@uppy/core/dist/style.css';
 import 'ag-grid-community/styles/ag-grid.min.css';
 import 'ag-grid-community/styles/ag-theme-material.min.css';
 
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
 
 import { FC } from 'react';
 import { I18nextProvider } from 'react-i18next';
@@ -23,12 +24,11 @@ import App from './App';
 import { CurrentUserContextProvider } from './context/CurrentUserContext';
 import ModalProviders from './context/ModalProviders';
 
-const theme = createTheme(GraaspTheme);
-
 const Root: FC = () => (
   <QueryClientProvider client={queryClient}>
     <I18nextProvider i18n={i18nConfig}>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={GraaspTheme}>
+        <CssBaseline />
         {SHOW_NOTIFICATIONS && (
           <ToastContainer position="bottom-right" theme="colored" />
         )}

src/components/item/publish/ItemPublishTab.tsx

@@ -12,6 +12,7 @@ import UpdateIcon from '@mui/icons-material/Update';
 import { Box, Button, IconButton, Tooltip, Typography } from '@mui/material';
 
 import { FC, useEffect, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useParams } from 'react-router';
 
 import { DATA_KEYS, MUTATION_KEYS } from '@graasp/query-client';
@@ -26,7 +27,7 @@ import {
   VALIDATION_STATUS_NAMES,
 } from '../../../config/constants';
 import { useBuilderTranslation } from '../../../config/i18n';
-import { hooks, queryClient, useMutation } from '../../../config/queryClient';
+import { hooks, useMutation } from '../../../config/queryClient';
 import {
   ITEM_PUBLISH_SECTION_TITLE_ID,
   ITEM_VALIDATION_BUTTON_ID,
@@ -72,6 +73,7 @@ const ItemPublishTab: FC<Props> = ({
   permission = PermissionLevel.Read,
 }) => {
   const { t: translateBuilder } = useBuilderTranslation();
+  const queryClient = useQueryClient();
 
   const { data: tags, isLoading: isTagsLoading } = useTags();
   const { data: itemTags, isLoading: isItemTagsLoading } = useItemTags(

src/components/main/ItemCard.tsx

@@ -5,11 +5,7 @@ import { CSSProperties, FC, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 
 import { DiscriminatedItem, ItemType, getEmbeddedLinkExtra } from '@graasp/sdk';
-import {
-  ItemMembershipRecord,
-  ItemRecord,
-  TagRecord,
-} from '@graasp/sdk/frontend';
+import { ItemMembershipRecord, ItemRecord } from '@graasp/sdk/frontend';
 import { Card as GraaspCard, Thumbnail } from '@graasp/ui';
 
 import { DESCRIPTION_MAX_LENGTH } from '../../config/constants';
@@ -22,7 +18,7 @@ import { isItemUpdateAllowedForUser } from '../../utils/membership';
 import EditButton from '../common/EditButton';
 import FavoriteButton from '../common/FavoriteButton';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
-import BadgesCellRenderer from '../table/BadgesCellRenderer';
+import BadgesCellRenderer, { ItemsStatuses } from '../table/BadgesCellRenderer';
 import DownloadButton from './DownloadButton';
 import ItemMenu from './ItemMenu';
 
@@ -44,10 +40,10 @@ const NameWrapper = ({
 type Props = {
   item: ItemRecord;
   memberships: List<ItemMembershipRecord>;
-  tagList?: List<TagRecord>;
+  itemsStatuses?: ItemsStatuses;
 };
 
-const ItemComponent: FC<Props> = ({ item, memberships, tagList }) => {
+const ItemComponent: FC<Props> = ({ item, memberships, itemsStatuses }) => {
   const alt = item.name;
   const defaultValueComponent = (
     <img
@@ -100,7 +96,7 @@ const ItemComponent: FC<Props> = ({ item, memberships, tagList }) => {
     </>
   );
   // here we use the same component as the table this is why it is instantiated a bit weirdly
-  const Badges = BadgesCellRenderer({ tagList });
+  const Badges = BadgesCellRenderer({ itemsStatuses });
 
   return (
     <GraaspCard

src/components/main/Items.tsx

@@ -7,10 +7,11 @@ import { hooks } from '../../config/queryClient';
 import { ITEM_LAYOUT_MODES } from '../../enums';
 import { useLayoutContext } from '../context/LayoutContext';
 import { useItemSearch } from '../item/ItemSearch';
+import { useItemsStatuses } from '../table/BadgesCellRenderer';
 import ItemsGrid from './ItemsGrid';
 import ItemsTable from './ItemsTable';
 
-const { useManyItemMemberships, useTags } = hooks;
+const { useManyItemMemberships, useTags, useItemsTags } = hooks;
 
 type Props = {
   id: string;
@@ -50,13 +51,23 @@ const Items = ({
 }: Props): JSX.Element => {
   const { mode } = useLayoutContext();
   const itemSearch = useItemSearch(items);
+  const itemsToDisplay = itemSearch.results;
   const { data: manyMemberships, isLoading: isMembershipsLoading } =
     useManyItemMemberships(
       enableMemberships
-        ? itemSearch?.results?.map(({ id: itemId }) => itemId).toArray()
+        ? itemsToDisplay?.map(({ id: itemId }) => itemId).toArray()
         : [],
     );
   const { data: tagList, isLoading: isLoadingTagList } = useTags();
+  const { data: itemsTags } = useItemsTags(
+    itemsToDisplay.map((r) => r.id).toJS(),
+  );
+  const itemsStatuses = useItemsStatuses({
+    items: itemsToDisplay,
+    itemsTags,
+    tagList,
+  });
+
   // todo: disable depending on showCreator
   const { data: creators } = hooks.useMembers(
     Object.keys(items?.groupBy(({ creator }) => creator)?.toJS() ?? []),
@@ -72,9 +83,9 @@ const Items = ({
         <ItemsGrid
           parentId={parentId}
           title={title}
-          items={itemSearch.results}
+          items={itemsToDisplay}
           manyMemberships={manyMemberships}
-          tagList={tagList}
+          itemsStatuses={itemsStatuses}
           // This enables the possiblity to display messages (item is empty, no search result)
           itemSearch={itemSearch}
           headerElements={[itemSearch.input, ...headerElements]}
@@ -89,9 +100,9 @@ const Items = ({
           actions={actions}
           tableTitle={title}
           defaultSortedColumn={defaultSortedColumn}
-          items={itemSearch.results}
+          items={itemsToDisplay}
           manyMemberships={manyMemberships}
-          tagList={tagList}
+          itemsStatuses={itemsStatuses}
           headerElements={[itemSearch.input, ...headerElements]}
           isSearching={Boolean(itemSearch.text)}
           ToolbarActions={ToolbarActions}