fix: removing categories in publishing dialog (#704)

fix: add information when item is already published in parent

cypress/e2e/item/publish/categories.cy.ts

@@ -3,6 +3,7 @@ import { CategoryType } from '@graasp/sdk';
 import { buildItemPath } from '../../../../src/config/paths';
 import {
   LIBRARY_SETTINGS_CATEGORIES_ID,
+  buildCategoryDropdownParentSelector,
   buildCategorySelectionId,
   buildCategorySelectionOptionId,
   buildPublishButtonId,
@@ -60,20 +61,62 @@ describe('Categories', () => {
       categoryContent.contains(name);
     });
 
-    it('Delete a category', () => {
-      const {
-        categories: [itemCategory],
-      } = item;
-      const { category, id } = itemCategory;
-      const categoryType = SAMPLE_CATEGORIES.find(
-        ({ id: cId }) => cId === category.id,
-      )?.type;
-      toggleOption(category.id, categoryType);
-      cy.wait('@deleteItemCategory').then((data) => {
+    describe('Delete a category', () => {
+      it('Using Dropdown', () => {
         const {
-          request: { url },
-        } = data;
-        expect(url.split('/')).contains(id);
+          categories: [itemCategory],
+        } = item;
+        const { category, id } = itemCategory;
+        const categoryType = SAMPLE_CATEGORIES.find(
+          ({ id: cId }) => cId === category.id,
+        )?.type;
+        toggleOption(category.id, categoryType);
+        cy.wait('@deleteItemCategory').then((data) => {
+          const {
+            request: { url },
+          } = data;
+          expect(url.split('/')).contains(id);
+        });
+      });
+
+      it('Using cross on category tag', () => {
+        const {
+          categories: [itemCategory],
+        } = item;
+        const { category, id } = itemCategory;
+        const categoryType = SAMPLE_CATEGORIES.find(
+          ({ id: cId }) => cId === category.id,
+        )?.type;
+        cy.get(`[data-cy=${buildCategoryDropdownParentSelector(categoryType)}]`)
+          .find(`[data-tag-index=0] > svg`)
+          .click();
+        cy.wait('@deleteItemCategory').then((data) => {
+          const {
+            request: { url },
+          } = data;
+          expect(url.split('/')).contains(id);
+        });
+      });
+
+      it('Using backspace in textfield', () => {
+        const {
+          categories: [itemCategory],
+        } = item;
+        const { category, id } = itemCategory;
+        const categoryType = SAMPLE_CATEGORIES.find(
+          ({ id: cId }) => cId === category.id,
+        )?.type;
+        cy.get(
+          `[data-cy=${buildCategoryDropdownParentSelector(
+            categoryType,
+          )}] input`,
+        ).type('{backspace}');
+        cy.wait('@deleteItemCategory').then((data) => {
+          const {
+            request: { url },
+          } = data;
+          expect(url.split('/')).contains(id);
+        });
       });
     });
 

package.json

@@ -13,10 +13,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.0",
-    "@graasp/query-client": "1.1.3",
-    "@graasp/sdk": "1.1.1",
-    "@graasp/translations": "1.15.0",
-    "@graasp/ui": "3.2.1",
+    "@graasp/query-client": "1.1.5",
+    "@graasp/sdk": "1.1.2",
+    "@graasp/translations": "1.15.1",
+    "@graasp/ui": "3.2.3",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.135",
     "@mui/material": "5.13.7",
@@ -133,7 +133,7 @@
     "nyc": "15.1.0",
     "prettier": "2.8.8",
     "react-app-rewired": "2.2.1",
-    "typescript": "5.0.4",
+    "typescript": "5.1.6",
     "wait-on": "7.0.1",
     "webpack-bundle-analyzer": "4.9.0"
   },

src/components/item/FolderDescription.tsx

@@ -41,7 +41,7 @@ const FolderDescription = ({
 
   return (
     <TextEditor
-      value={parentItem?.description}
+      value={parentItem?.description ?? ''}
       edit={isEditing}
       placeholderText={translateBuilder(
         BUILDER.EDIT_FOLDER_DESCRIPTION_PLACEHOLDER,

src/components/item/form/FolderForm.tsx

@@ -37,7 +37,7 @@ const FolderForm = ({
       <Box sx={{ mt: 2 }}>
         <TextEditor
           id={FOLDER_FORM_DESCRIPTION_ID}
-          value={updatedProperties?.description || item?.description}
+          value={(updatedProperties?.description || item?.description) ?? ''}
           edit
           onChange={onCaptionChange}
           showActions={false}

src/components/item/publish/CategorySelection.tsx

@@ -7,7 +7,8 @@ import { SyntheticEvent } from 'react';
 import { useParams } from 'react-router';
 
 import { routines } from '@graasp/query-client';
-import { Category, CategoryType } from '@graasp/sdk';
+import { CategoryType } from '@graasp/sdk';
+import { CategoryRecord } from '@graasp/sdk/frontend';
 import { BUILDER, FAILURE_MESSAGES } from '@graasp/translations';
 import { Loader } from '@graasp/ui';
 
@@ -64,19 +65,19 @@ const CategorySelection = ({ disabled }: Props): JSX.Element | null => {
   }
 
   const handleChange = (
-    event: SyntheticEvent,
-    _values: Category[],
+    _event: SyntheticEvent,
+    _values: CategoryRecord[],
     reason: AutocompleteChangeReason,
+    details?: { option: CategoryRecord },
   ) => {
     if (!itemId) {
       console.error('No item id is defined');
       return;
     }
 
-    const target = event.target as HTMLOptionElement;
     if (reason === SELECT_OPTION) {
       // post new category
-      const newCategoryId = target.getAttribute('data-id');
+      const newCategoryId = details?.option.id;
       if (!newCategoryId) {
         notifier({
           type: postItemCategoryRoutine.FAILURE,
@@ -90,7 +91,7 @@ const CategorySelection = ({ disabled }: Props): JSX.Element | null => {
       }
     }
     if (reason === REMOVE_OPTION) {
-      const deletedCategoryId = target.getAttribute('data-id');
+      const deletedCategoryId = details?.option.id;
       const itemCategoryIdToDelete = itemCategories?.find(
         ({ category }) => category.id === deletedCategoryId,
       )?.id;

src/components/item/publish/DropdownMenu.tsx

@@ -15,6 +15,7 @@ import { BUILDER } from '@graasp/translations';
 
 import { useBuilderTranslation } from '../../../config/i18n';
 import {
+  buildCategoryDropdownParentSelector,
   buildCategorySelectionId,
   buildCategorySelectionOptionId,
   buildCategorySelectionTitleId,
@@ -28,8 +29,9 @@ type Props = {
   selectedValues?: List<ItemCategoryRecord>;
   handleChange: (
     _event: SyntheticEvent,
-    value: Category[],
+    value: CategoryRecord[],
     reason: AutocompleteChangeReason,
+    details?: { option: CategoryRecord },
   ) => void;
 };
 
@@ -57,6 +59,7 @@ const DropdownMenu = ({
         {title}
       </Typography>
       <Autocomplete
+        data-cy={buildCategoryDropdownParentSelector(type)}
         sx={{ width: 'auto', maxWidth: '85%' }}
         disabled={disabled || !values}
         multiple

src/components/item/publish/ItemPublishButton.tsx

@@ -1,5 +1,6 @@
+import { InfoRounded } from '@mui/icons-material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { Checkbox, FormControlLabel, Typography } from '@mui/material';
+import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material';
 
 import { useEffect, useState } from 'react';
 
@@ -43,7 +44,7 @@ const ItemPublishButton = ({
     if (itemPublishedEntry) {
       setIsPublished(Boolean(itemPublishedEntry));
 
-      // disable setting if any visiblity is set on any ancestor items
+      // disable setting if any publication is set on any ancestor items
       setIsDisabled(itemPublishedEntry?.item?.path !== item?.path);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -79,6 +80,14 @@ const ItemPublishButton = ({
 
   return (
     <>
+      {isDisabled && (
+        <Stack direction="row" alignItems="start" gap={1} color="gray">
+          <InfoRounded fontSize="small" />
+          <Typography>
+            {translateBuilder(BUILDER.LIBRARY_SETTINGS_CHILD_PUBLISHED_STATUS)}
+          </Typography>
+        </Stack>
+      )}
       <Button
         disabled={disabled || isDisabled || !isValidated || isPublished}
         onClick={handlePublish}
@@ -91,7 +100,7 @@ const ItemPublishButton = ({
         {translateBuilder(BUILDER.LIBRARY_SETTINGS_PUBLISH_BUTTON)}
       </Button>
       <Button
-        disabled={disabled || !isPublished}
+        disabled={disabled || isDisabled || !isPublished}
         onClick={handleUnpublish}
         id={ITEM_UNPUBLISH_BUTTON_ID}
       >

src/config/selectors.ts

@@ -176,6 +176,8 @@ export const buildCategorySelectionTitleId = (title: string): string =>
   `itemCategoryTitle-${title}`;
 export const buildCategorySelectionId = (title: string): string =>
   `itemCategoryDropdown-${title}`;
+export const buildCategoryDropdownParentSelector = (title: string): string =>
+  `itemCategoryDropdownParent-${title}`;
 export const SHARE_ITEM_PSEUDONYMIZED_SCHEMA_ID =
   'shareItemPseudonymizedSchema';
 export const ITEM_RECYCLE_BUTTON_CLASS = 'itemRecycleButton';

src/utils/item.ts

@@ -134,7 +134,7 @@ export const getChildrenOrderFromFolderExtra = (
   extra: ImmutableCast<FolderItemExtra>,
 ): List<string> => extra[ItemType.FOLDER]?.childrenOrder ?? List();
 
-export const stripHtml = (str?: string): string =>
+export const stripHtml = (str?: string | null): string =>
   str?.replace(/<[^>]*>?/gm, '') || '';
 
 // sort objects by alphabetical order according to name