Merge branch 'main' into 542-bugs-reporting

.github/workflows/cypress.yml

@@ -46,14 +46,14 @@ jobs:
           VITE_GRAASP_ANALYZER_HOST: ${{ vars.VITE_GRAASP_ANALYZER_HOST }}
           VITE_SHOW_NOTIFICATIONS: ${{ vars.VITE_SHOW_NOTIFICATIONS }}
 
-
       #  use the Cypress GitHub Action to run Cypress tests within the chrome browser
       - name: Cypress run
         uses: cypress-io/github-action@v5
         with:
           install: false
           # we launch the app in preview mode to avoid issues with hmr websockets from vite polluting the mocks
           start: yarn preview:test
+          browser: chrome
           quiet: true
           config-file: cypress.config.ts
           cache-key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

cypress/e2e/memberships/deleteItemMembership.cy.ts

@@ -1,5 +1,6 @@
 import { buildItemPath } from '../../../src/config/paths';
 import {
+  CONFIRM_MEMBERSHIP_DELETE_BUTTON_ID,
   buildItemMembershipRowDeleteButtonId,
   buildShareButtonId,
 } from '../../../src/config/selectors';
@@ -16,6 +17,7 @@ const deleteItemMembership = ({
   cy.get(`#${buildShareButtonId(itemId)}`).click();
   cy.wait(TABLE_MEMBERSHIP_RENDER_TIME);
   cy.get(`#${buildItemMembershipRowDeleteButtonId(id)}`).click();
+  cy.get(`#${CONFIRM_MEMBERSHIP_DELETE_BUTTON_ID}`).click();
 };
 
 describe('Delete Membership', () => {

cypress/support/commands/item.ts

@@ -153,6 +153,7 @@ Cypress.Commands.add(
     } else if (custom) {
       cy.get(`#${buildItemFormAppOptionId(name)}`).click();
       // check name get added automatically
+      cy.fillBaseItemModal({ name }, { confirm: false });
       cy.get(`#${CUSTOM_APP_URL_ID}`).type(CUSTOM_APP_URL);
     } else {
       cy.get(`#${buildItemFormAppOptionId(name)}`).click();

package.json

@@ -17,15 +17,14 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.1",
-    "@graasp/query-client": "1.8.2",
-    "@graasp/sdk": "1.6.0",
-    "@graasp/translations": "1.19.0",
-    "@graasp/ui": "3.5.1",
-    "@mui/icons-material": "5.14.6",
-    "@mui/lab": "5.0.0-alpha.141",
-    "@mui/material": "5.14.6",
-    "@sentry/react": "7.66.0",
-    "@sentry/tracing": "7.66.0",
+    "@graasp/query-client": "1.11.0",
+    "@graasp/sdk": "1.8.0",
+    "@graasp/translations": "1.19.2",
+    "@graasp/ui": "3.5.4",
+    "@mui/icons-material": "5.14.13",
+    "@mui/lab": "5.0.0-alpha.148",
+    "@mui/material": "5.14.13",
+    "@sentry/react": "7.73.0",
     "@uppy/core": "3.3.1",
     "@uppy/dashboard": "3.4.2",
     "@uppy/drag-drop": "3.0.2",
@@ -41,7 +40,7 @@
     "date-fns": "2.30.0",
     "filesize": "10.0.12",
     "http-status-codes": "2.2.0",
-    "immutable": "4.3.2",
+    "immutable": "4.3.4",
     "katex": "0.16.8",
     "lodash.groupby": "4.6.0",
     "lodash.partition": "4.6.0",
@@ -86,9 +85,8 @@
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
     "cypress:open": "env-cmd -f ./.env.test cypress open --browser chrome",
-    "cypress": "yarn test",
     "test": "yarn build:test && concurrently -k -s first \"yarn preview:test\" \"yarn cypress:run\"",
-    "cypress:run": "env-cmd -f ./.env.test cypress run --headless --browser chrome",
+    "cypress:run": "env-cmd -f ./.env.test cypress run --browser chrome",
     "postinstall": "husky install"
   },
   "browserslist": {
@@ -104,7 +102,7 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "17.7.1",
+    "@commitlint/cli": "17.7.2",
     "@commitlint/config-conventional": "17.7.0",
     "@cypress/code-coverage": "3.11.0",
     "@testing-library/jest-dom": "^6.0.0",
@@ -117,7 +115,7 @@
     "@types/node": "18.17.12",
     "@types/papaparse": "5.3.8",
     "@types/qs": "6.9.7",
-    "@types/react": "18.2.21",
+    "@types/react": "18.2.23",
     "@types/react-csv": "1.1.3",
     "@types/react-dom": "18.2.7",
     "@types/uuid": "9.0.2",
@@ -126,13 +124,13 @@
     "@typescript-eslint/parser": "6.5.0",
     "@vitejs/plugin-react": "4.0.4",
     "concurrently": "8.2.1",
-    "cypress": "13.2.0",
+    "cypress": "13.3.0",
     "cypress-localstorage-commands": "2.2.4",
     "env-cmd": "10.1.0",
     "eslint": "^8.47.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.0.0",
-    "eslint-import-resolver-typescript": "3.6.0",
+    "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.33.2",
@@ -146,5 +144,5 @@
     "vite-plugin-checker": "0.6.2",
     "vite-plugin-istanbul": "5.0.0"
   },
-  "packageManager": "[email protected].3"
+  "packageManager": "[email protected].4"
 }

src/components/App.tsx

@@ -20,6 +20,7 @@ import {
   SHARED_ITEMS_PATH,
   buildItemPath,
 } from '../config/paths';
+import { hooks } from '../config/queryClient';
 import FallbackComponent from './Fallback';
 import RecycleBinScreen from './RecycleBinScreen';
 import SharedItems from './SharedItems';
@@ -31,10 +32,15 @@ import PublishedItems from './main/PublishedItems';
 import Redirect from './main/Redirect';
 import MemberProfileScreen from './member/MemberProfileScreen';
 
+const { useItemFeedbackUpdates } = hooks;
+
 const App = (): JSX.Element => {
   const { pathname } = useLocation();
   const { data: currentMember, isLoading } = useCurrentUserContext();
 
+  // registers the item updates through websockets
+  useItemFeedbackUpdates?.(currentMember?.id);
+
   if (isLoading) {
     return <CustomInitialLoader />;
   }

src/components/RecycleBinScreen.tsx

@@ -1,6 +1,5 @@
 import { Box } from '@mui/material';
 
-import { ItemRecord } from '@graasp/sdk/frontend';
 import { Loader } from '@graasp/ui';
 
 import { List } from 'immutable';
@@ -52,11 +51,7 @@ const ToolbarActions = ({ selectedIds }: ToolbarActionsProps): JSX.Element => (
 
 const RecycleBinLoadableContent = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const {
-    data: recycledEntries,
-    isLoading,
-    isError,
-  } = hooks.useRecycledItemsData();
+  const { data: recycledItems, isLoading, isError } = hooks.useRecycledItems();
   if (isError) {
     return <ErrorAlert />;
   }
@@ -72,7 +67,7 @@ const RecycleBinLoadableContent = (): JSX.Element => {
         id={RECYCLED_ITEMS_ID}
         clickable={false}
         title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
-        items={recycledEntries?.map(({ item }) => item as ItemRecord) ?? List()}
+        items={recycledItems ?? List()}
         actions={RowActions}
         ToolbarActions={ToolbarActions}
         showThumbnails={false}

src/components/item/form/AppForm.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import CloseIcon from '@mui/icons-material/Close';
-import { Box, IconButton, InputAdornment, TextField } from '@mui/material';
+import { Box, Stack, TextField } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
-import { AppItemType, DiscriminatedItem } from '@graasp/sdk';
-import { AppRecord } from '@graasp/sdk/frontend';
+import { DiscriminatedItem } from '@graasp/sdk';
+import { Button } from '@graasp/ui';
 
 import AppCard from '@/components/main/AppCard';
 import { CUSTOM_APP_URL_ID } from '@/config/selectors';
@@ -15,128 +15,117 @@ import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
 import { BUILDER } from '../../../langs/constants';
 import { buildAppExtra } from '../../../utils/itemExtra';
-import BaseItemForm from './NameForm';
+import NameForm from './NameForm';
 
 type Props = {
   onChange: (item: Partial<DiscriminatedItem>) => void;
-  item?: AppItemType;
   updatedProperties: Partial<DiscriminatedItem>;
 };
 
-const AppForm = ({
-  onChange,
-  item,
-  updatedProperties = {},
-}: Props): JSX.Element => {
+const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const [newName, setNewName] = useState<string>(item?.name ?? '');
   const [isCustomApp, setIsCustomApp] = useState<boolean>(false);
 
   const handleAppSelection = (
-    newValue: AppRecord | null | { url: string; name: string },
+    newValue: null | { url: string; name: string },
   ) => {
-    if (!newValue) {
-      return console.error('new value is undefined');
+    // there is a new value to use
+    if (newValue) {
+      onChange({
+        name: newValue.name,
+        // todo: use better type here (partial of discriminated item is not a good type)
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        extra: buildAppExtra({
+          url: newValue.url,
+        }),
+      });
+      return;
     }
-
-    const url = newValue?.url;
-    const name = newValue?.name ?? item?.name;
-    // TODO: improve types
-    const props = {
-      ...item,
-      extra: buildAppExtra({ url }),
-    } as unknown as AppItemType;
-    if (name) {
-      setNewName(name);
-      props.name = name;
+    // there is no new value to use
+    if (!newValue) {
+      // unset the name and the url in the extra
+      onChange({ name: undefined, extra: undefined });
     }
-    return onChange(props);
   };
 
   const { useApps } = hooks;
   const { data, isLoading: isAppsLoading } = useApps();
 
-  const url = (updatedProperties?.extra?.app as { url: string })?.url;
+  const currentUrl = (updatedProperties?.extra?.app as { url: string })?.url;
 
   const addCustomApp = () => {
     setIsCustomApp(true);
-    handleAppSelection({ url: '', name: '' });
+    // maybe here we would like to not reset the name ?
+    handleAppSelection(null);
   };
 
   if (isAppsLoading) {
     return <Skeleton height={60} />;
   }
   return (
-    <div>
+    <Box>
       <Typography variant="h6">
         {translateBuilder(BUILDER.CREATE_NEW_ITEM_APP_TITLE)}
       </Typography>
-      <BaseItemForm
-        setChanges={onChange}
-        updatedProperties={
-          {
-            ...item,
-            name: newName,
-            ...updatedProperties,
-          } as Partial<DiscriminatedItem>
-        }
-      />
-      <br />
+
+      <NameForm setChanges={onChange} updatedProperties={updatedProperties} />
 
       {isCustomApp ? (
-        <Box sx={{ mt: 3 }}>
+        <Stack direction="column" alignItems="start" mt={1} spacing={2}>
           <TextField
             id={CUSTOM_APP_URL_ID}
             fullWidth
             variant="standard"
             autoFocus
             label={translateBuilder(BUILDER.APP_URL)}
             onChange={(e) =>
-              handleAppSelection({ url: e.target.value, name: '' })
+              // todo: use better type here (partial of discriminated item is not a good type)
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              onChange({ extra: buildAppExtra({ url: e.target.value }) })
             }
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    onClick={() => {
-                      setIsCustomApp(false);
-                      handleAppSelection({ url: '', name: '' });
-                    }}
-                  >
-                    <CloseIcon />
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
+            value={currentUrl}
           />
-        </Box>
+          <Button
+            variant="text"
+            onClick={() => {
+              setIsCustomApp(false);
+              handleAppSelection(null);
+            }}
+          >
+            {translateBuilder(BUILDER.BACK_TO_APP_LIST)}
+          </Button>
+        </Stack>
       ) : (
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: 2,
-            mt: 3,
-          }}
-        >
+        <Grid2 container spacing={2} alignItems="stretch">
           {data?.map((ele) => (
             <AppCard
               key={ele.name}
-              url={ele?.url}
               name={ele.name}
               description={ele.description}
-              extra={ele?.extra}
-              selected={ele?.url === url}
-              handleSelect={handleAppSelection}
+              image={ele.extra.image}
+              selected={ele.url === currentUrl}
+              onClick={() => {
+                if (ele.url === currentUrl) {
+                  // reset fields
+                  handleAppSelection(null);
+                } else {
+                  handleAppSelection({ url: ele.url, name: ele.name });
+                }
+              }}
             />
           ))}
           <AppCard
             name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
-            handleSelect={addCustomApp}
+            description={translateBuilder(
+              BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
+            )}
+            onClick={addCustomApp}
           />
-        </Box>
+        </Grid2>
       )}
-    </div>
+    </Box>
   );
 };