feat: add etherpad creation form and item display

package.json

@@ -7,10 +7,10 @@
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
     "@graasp/chatbox": "github:graasp/graasp-chatbox#v1.0.0",
-    "@graasp/query-client": "github:graasp/graasp-query-client.git",
-    "@graasp/sdk": "github:graasp/graasp-sdk.git#60-pdf-link",
-    "@graasp/translations": "github:graasp/graasp-translations.git",
-    "@graasp/ui": "github:graasp/graasp-ui.git#v0.4.1",
+    "@graasp/query-client": "github:graasp/graasp-query-client.git#etherpad",
+    "@graasp/sdk": "github:graasp/graasp-sdk.git#etherpad",
+    "@graasp/translations": "github:graasp/graasp-translations.git#etherpad",
+    "@graasp/ui": "github:graasp/graasp-ui.git#etherpad",
     "@mui/icons-material": "5.10.9",
     "@mui/lab": "5.0.0-alpha.104",
     "@mui/material": "5.10.12",

src/components/item/ItemContent.tsx

@@ -14,6 +14,7 @@ import {
 import {
   AppItem,
   DocumentItem,
+  EtherpadItem,
   FileItem,
   H5PItem,
   LinkItem,
@@ -45,7 +46,7 @@ import ItemActions from '../main/ItemActions';
 import Items from '../main/Items';
 import NewItemButton from '../main/NewItemButton';
 
-const { useChildren, useFileContent } = hooks;
+const { useChildren, useFileContent, useEtherpad } = hooks;
 
 const FileWrapper = styled(Container)(() => ({
   textAlign: 'center',
@@ -88,11 +89,18 @@ const ItemContent: FC<Props> = ({ item, enableEditing, permission }) => {
   );
   const isEditing = enableEditing && editingItemId === itemId;
 
-  if (isLoadingFileContent || isLoadingUser || isLoadingChildren) {
+  const etherpadQuery = useEtherpad(item, 'write'); // server will return read view if no write access allowed
+
+  if (
+    isLoadingFileContent ||
+    isLoadingUser ||
+    isLoadingChildren ||
+    etherpadQuery?.isLoading
+  ) {
     return <Loader />;
   }
 
-  if (!item || !itemId) {
+  if (!item || !itemId || etherpadQuery?.isError) {
     return <ErrorAlert id={ITEM_SCREEN_ERROR_ALERT_ID} />;
   }
 
@@ -205,6 +213,7 @@ const ItemContent: FC<Props> = ({ item, enableEditing, permission }) => {
           />
         </>
       );
+
     case ItemType.H5P: {
       const contentId = item.extra?.h5p?.contentId;
       if (!contentId) {
@@ -220,6 +229,15 @@ const ItemContent: FC<Props> = ({ item, enableEditing, permission }) => {
       );
     }
 
+    case ItemType.ETHERPAD: {
+      if (!etherpadQuery?.data?.padUrl) {
+        return <ErrorAlert id={ITEM_SCREEN_ERROR_ALERT_ID} />;
+      }
+      return (
+        <EtherpadItem itemId={itemId} padUrl={etherpadQuery.data.padUrl} />
+      );
+    }
+
     default:
       return <ErrorAlert id={ITEM_SCREEN_ERROR_ALERT_ID} />;
   }

src/components/item/form/EtherpadForm.tsx

@@ -0,0 +1,41 @@
+import { TextField, Typography } from '@mui/material';
+
+import { FC, useState } from 'react';
+
+import { BUILDER } from '@graasp/translations';
+
+import { useBuilderTranslation } from '../../../config/i18n';
+import { ITEM_FORM_ETHERPAD_NAME_INPUT_ID } from '../../../config/selectors';
+
+const useEtherpadForm = (): { padName: string; EtherpadForm: FC } => {
+  const [padName, setPadName] = useState('');
+
+  const EtherpadForm: FC = () => {
+    const { t: translateBuilder } = useBuilderTranslation();
+    return (
+      <>
+        <Typography variant="h6">
+          {translateBuilder(BUILDER.CREATE_NEW_ITEM_ETHERPAD_TITLE)}
+        </Typography>
+        <Typography variant="body1" paragraph>
+          {translateBuilder(BUILDER.CREATE_NEW_ITEM_ETHERPAD_INFORMATIONS)}
+        </Typography>
+        <TextField
+          variant="standard"
+          autoFocus
+          id={ITEM_FORM_ETHERPAD_NAME_INPUT_ID}
+          label={translateBuilder(BUILDER.CREATE_NEW_ITEM_ETHERPAD_LABEL)}
+          value={padName}
+          onChange={(e) => setPadName(e.target.value)}
+          // always shrink because setting name from defined app does not shrink automatically
+          InputLabelProps={{ shrink: true }}
+          sx={{ width: '50%', my: 1 }}
+        />
+      </>
+    );
+  };
+
+  return { padName, EtherpadForm };
+};
+
+export default useEtherpadForm;

src/components/main/ItemTypeTabs.tsx

@@ -11,6 +11,7 @@ import { useBuilderTranslation } from '../../config/i18n';
 import {
   CREATE_ITEM_APP_ID,
   CREATE_ITEM_DOCUMENT_ID,
+  CREATE_ITEM_ETHERPAD_ID,
   CREATE_ITEM_FILE_ID,
   CREATE_ITEM_FOLDER_ID,
   CREATE_ITEM_H5P_ID,
@@ -135,6 +136,18 @@ const ItemTypeTabs: FC<Props> = ({ onTypeChange, initialValue }) => {
           />
         }
       />
+      <Tab
+        id={CREATE_ITEM_ETHERPAD_ID}
+        value={ItemType.ETHERPAD}
+        label={translateBuilder(BUILDER.NEW_ITEM_ETHERPAD_TAB_TEXT)}
+        icon={
+          <ItemIcon
+            alt={translateBuilder(BUILDER.NEW_ITEM_ETHERPAD_TAB_TEXT)}
+            type={ItemType.ETHERPAD}
+            sx={{ mb: 0 }}
+          />
+        }
+      />
     </StyledTabs>
   );
 };

src/components/main/NewItemModal.tsx

@@ -26,6 +26,7 @@ import CancelButton from '../common/CancelButton';
 import FileDashboardUploader from '../file/FileDashboardUploader';
 import AppForm from '../item/form/AppForm';
 import DocumentForm from '../item/form/DocumentForm';
+import useEtherpadForm from '../item/form/EtherpadForm';
 import FolderForm from '../item/form/FolderForm';
 import LinkForm from '../item/form/LinkForm';
 import ImportH5P from './ImportH5P';
@@ -47,6 +48,9 @@ type Props = {
 const NewItemModal: FC<Props> = ({ open, handleClose }) => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { t: translateCommon } = useCommonTranslation();
+
+  const { padName, EtherpadForm } = useEtherpadForm();
+
   const [isConfirmButtonDisabled, setConfirmButtonDisabled] = useState(false);
   const [selectedItemType, setSelectedItemType] = useState<NewItemTabType>(
     ItemType.FOLDER,
@@ -60,12 +64,27 @@ const NewItemModal: FC<Props> = ({ open, handleClose }) => {
     [ItemType.APP]: { type: ItemType.APP },
     [ItemType.DOCUMENT]: { type: ItemType.DOCUMENT },
   });
+
   const { mutate: postItem } = useMutation<any, any, any>(
     MUTATION_KEYS.POST_ITEM,
   );
+  const { mutate: postEtherpad } = useMutation<any, any, any>(MUTATION_KEYS.POST_ETHERPAD);
+
   const match = useMatch(buildItemPath());
   const parentId = match?.params?.itemId;
 
+  const submitAndDisableConfirmButtonFor = (
+    submitFn: () => void | boolean,
+    durationMs: number,
+  ) => {
+    setConfirmButtonDisabled(true);
+    submitFn();
+
+    // schedule button disable state reset AFTER end of click event handling
+    setTimeout(() => setConfirmButtonDisabled(false), durationMs);
+    return handleClose();
+  };
+
   const submit = () => {
     if (isConfirmButtonDisabled) {
       console.error('confirm button is disabled');
@@ -80,12 +99,22 @@ const NewItemModal: FC<Props> = ({ open, handleClose }) => {
       return false;
     }
 
-    setConfirmButtonDisabled(true);
-    postItem({ parentId, ...updatedPropertiesPerType[selectedItemType] });
+    return submitAndDisableConfirmButtonFor(
+      () =>
+        postItem({ parentId, ...updatedPropertiesPerType[selectedItemType] }),
+      DOUBLE_CLICK_DELAY_MS,
+    );
+  };
 
-    // schedule button disable state reset AFTER end of click event handling
-    setTimeout(() => setConfirmButtonDisabled(false), DOUBLE_CLICK_DELAY_MS);
-    return handleClose();
+  const submitEtherpad = () => {
+    if (!padName) {
+      return false;
+    }
+
+    return submitAndDisableConfirmButtonFor(
+      () => postEtherpad({ parentId, name: padName }),
+      DOUBLE_CLICK_DELAY_MS,
+    );
   };
 
   const updateItem = (item) => {
@@ -121,6 +150,8 @@ const NewItemModal: FC<Props> = ({ open, handleClose }) => {
         return <ImportZip />;
       case ItemType.H5P:
         return <ImportH5P />;
+      case ItemType.ETHERPAD:
+        return <EtherpadForm />;
       case ItemType.APP:
         return (
           <AppForm
@@ -146,6 +177,19 @@ const NewItemModal: FC<Props> = ({ open, handleClose }) => {
 
   const renderActions = () => {
     switch (selectedItemType) {
+      case ItemType.ETHERPAD:
+        return (
+          <>
+            <CancelButton onClick={handleClose} />
+            <Button
+              onClick={submitEtherpad}
+              id={ITEM_FORM_CONFIRM_BUTTON_ID}
+              disabled={!padName}
+            >
+              {translateBuilder(BUILDER.CREATE_ITEM_ADD_BUTTON)}
+            </Button>
+          </>
+        );
       case ItemType.FOLDER:
       case ItemType.APP:
       case ItemType.LINK:

src/config/selectors.ts

@@ -97,6 +97,8 @@ export const DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR = `#${DOCUMENT_ITEM_TEXT_EDITOR_
 export const CREATE_ITEM_APP_ID = 'createItemApp';
 export const CREATE_ITEM_ZIP_ID = 'createItemZip';
 export const CREATE_ITEM_H5P_ID = 'createItemH5P';
+export const CREATE_ITEM_ETHERPAD_ID = 'createItemEtherpad';
+export const ITEM_FORM_ETHERPAD_NAME_INPUT_ID = 'itemFormEtherpadNameInputId';
 export const ITEM_FORM_APP_URL_ID = 'itemFormAppUrl';
 export const buildItemFormAppOptionId = (name?: string): string =>
   `${name?.replaceAll(/\s/g, '-')}`;

yarn.lock

@@ -2251,11 +2251,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@github:graasp/graasp-query-client.git":
+"@graasp/query-client@github:graasp/graasp-query-client.git#etherpad":
   version: 0.1.0
-  resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=a20ef7df4108d26bfcf09c2da2e6e168706cbd4e"
+  resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=f8e578f36f93b30f01122aeb29dc4426d4981782"
   dependencies:
-    "@graasp/sdk": "github:graasp/graasp-sdk"
+    "@graasp/sdk": "github:graasp/graasp-sdk#etherpad"
     "@graasp/translations": "github:graasp/graasp-translations.git"
     "@graasp/utils": "github:graasp/graasp-utils.git"
     axios: 0.27.2
@@ -2267,13 +2267,13 @@ __metadata:
     uuid: 8.3.2
   peerDependencies:
     react: ^17.0.0
-  checksum: e81ea32c292e225c9472ad7d69dc6ad7f30a6a61b6a4cd7be66e2cdfb3db6583f0e14efa2f2cfb32c7dad8ddd668ed77fb5213b9517e1c7c1ee5ed1f62a6a2fb
+  checksum: 78f055bd26edd4c3ad88e87cbc24244c47b928a4bfe16754c3840055e2fc6e59b07c78c5dd00fa38ff33a4fb6238a0780780affaa83473b81e5d07d801626231
   languageName: node
   linkType: hard
 
-"@graasp/sdk@github:graasp/graasp-sdk, @graasp/sdk@github:graasp/graasp-sdk.git":
+"@graasp/sdk@github:graasp/graasp-sdk#etherpad, @graasp/sdk@github:graasp/graasp-sdk.git#etherpad":
   version: 0.1.0
-  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=55a43441b82e4601a67c56e34648851f96a25408"
+  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=0848359adacd8249aa684a81b00615988e5a0de7"
   dependencies:
     "@fastify/secure-session": 5.2.0
     aws-sdk: 2.1111.0
@@ -2284,13 +2284,13 @@ __metadata:
     qs: 6.11.0
     slonik: 28.1.1
     uuid: 8.3.2
-  checksum: 1e40cf031c0346dcc494cb816b749cca0464b69a38381b58253e44d13653a7efccd5a6b5c30e0e0ed8adfc05ab72a7077706117387048fe40b373b63ab712600
+  checksum: f3f6a6f33c524bcd11b04853d3553dd8bfae39fdacbe0c1696d032cac8e8aa9f58aeb3d1acfbc8405d2a1df6aec0d06217dda3f2fa9d5d37d3bd6fa464d0da6d
   languageName: node
   linkType: hard
 
-"@graasp/sdk@github:graasp/graasp-sdk.git#60-pdf-link":
+"@graasp/sdk@github:graasp/graasp-sdk.git":
   version: 0.1.0
-  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=6d0233290343ce0cdcfb342f9cac70d8c4d6e2df"
+  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=55a43441b82e4601a67c56e34648851f96a25408"
   dependencies:
     "@fastify/secure-session": 5.2.0
     aws-sdk: 2.1111.0
@@ -2301,7 +2301,7 @@ __metadata:
     qs: 6.11.0
     slonik: 28.1.1
     uuid: 8.3.2
-  checksum: 968ec515bc633121056f92e735355a927751576e6d4a85eaa039e696431370b28647316d64a8baef5a30640aa26cb714d99eba925154c8ad17162904bf3cddcc
+  checksum: 1e40cf031c0346dcc494cb816b749cca0464b69a38381b58253e44d13653a7efccd5a6b5c30e0e0ed8adfc05ab72a7077706117387048fe40b373b63ab712600
   languageName: node
   linkType: hard
 
@@ -2323,6 +2323,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/translations@github:graasp/graasp-translations.git#etherpad":
+  version: 1.1.0
+  resolution: "@graasp/translations@https://github.com/graasp/graasp-translations.git#commit=26034d442c16eb4ab9f9c33898d017babd2440e8"
+  dependencies:
+    i18next: 21.8.1
+  checksum: 647361c0b1a15b6dc493aa8a4257611a88a2e6793a85a055f243b73ffab7adfe6b977c41c90fd54b79b17403e95ada9355e6ad8b5b13c70bd9b0c7007b358613
+  languageName: node
+  linkType: hard
+
 "@graasp/ui@github:graasp/graasp-ui#v0.3.0":
   version: 0.3.0
   resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=1babf3c6781328391a357e746d4755c61859347f"
@@ -2361,11 +2370,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@github:graasp/graasp-ui.git#v0.4.1":
-  version: 0.4.1
-  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=b149f001be54097916816f622bb8dfdf3f3a9cfb"
+"@graasp/ui@github:graasp/graasp-ui.git#etherpad":
+  version: 0.6.0
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=30db45e9caae2389793e8ec6b83f47bb81ad33e8"
   dependencies:
-    "@graasp/sdk": "github:graasp/graasp-sdk.git"
+    "@graasp/sdk": "github:graasp/graasp-sdk#etherpad"
     clsx: 1.1.1
     http-status-codes: 2.2.0
     immutable: 4.1.0
@@ -2396,13 +2405,13 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: 1fc82519ef9d544934c30c9378592e9bd2de33d1a18adea91bba7ba7f260d261696340f3a3b740753ec2e6b60c83d34115439540c4498c2dbe8efbc2e2b00b8f
+  checksum: b976d23988f56f00accd8b07b2a7e4bd70951a18483ebf12ea5e26816dcdf315244781eb77f1f8b2a0d54a8f5db2cde67d242a3532dd6425faa7c5b0caeaf26f
   languageName: node
   linkType: hard
 
 "@graasp/utils@github:graasp/graasp-utils.git":
   version: 0.1.0
-  resolution: "@graasp/utils@https://github.com/graasp/graasp-utils.git#commit=55a43441b82e4601a67c56e34648851f96a25408"
+  resolution: "@graasp/utils@https://github.com/graasp/graasp-utils.git#commit=08cadf0216fc011dd01d6bb23547a3cf1b363732"
   dependencies:
     "@fastify/secure-session": 5.2.0
     aws-sdk: 2.1111.0
@@ -2413,7 +2422,7 @@ __metadata:
     qs: 6.11.0
     slonik: 28.1.1
     uuid: 8.3.2
-  checksum: 1914dc440a0edcb4d047b0e97a16408596f9d8e78bdefcc643b211d23725fa7bdc80b1a9fb0a6eb2f53ea346c2d8aa8235f066129508aa732d43f447d29c24c2
+  checksum: 738ec54971550ffda9e654b0da23a6f99878abf514f847230d134fe1f82b402b3fb5244066fa20226fd9a9ec0b1a935d07816ae45cf5750743dec275359cef1e
   languageName: node
   linkType: hard
 
@@ -11102,10 +11111,10 @@ __metadata:
     "@emotion/react": 11.10.5
     "@emotion/styled": 11.10.5
     "@graasp/chatbox": "github:graasp/graasp-chatbox#v1.0.0"
-    "@graasp/query-client": "github:graasp/graasp-query-client.git"
-    "@graasp/sdk": "github:graasp/graasp-sdk.git#60-pdf-link"
-    "@graasp/translations": "github:graasp/graasp-translations.git"
-    "@graasp/ui": "github:graasp/graasp-ui.git#v0.4.1"
+    "@graasp/query-client": "github:graasp/graasp-query-client.git#etherpad"
+    "@graasp/sdk": "github:graasp/graasp-sdk.git#etherpad"
+    "@graasp/translations": "github:graasp/graasp-translations.git#etherpad"
+    "@graasp/ui": "github:graasp/graasp-ui.git#etherpad"
     "@graasp/websockets": "github:graasp/graasp-websockets.git"
     "@mui/icons-material": 5.10.9
     "@mui/lab": 5.0.0-alpha.104