feat: redesign add link interface (#1165)

* feat: modify helper texts

* feat: change displayName helper text for LinkForm

* feat: redesign LinkForm and add 2 link preview components

* feat: modify link text field

* feat: update texts

* fix: update link creation modal

* fix: update ui

* fix: update link tests

* fix: create link tests

* fix: make last adjustments

* fix: update ui

* fix: update ui and remove document displayname test

* fix: split components and create util functions with tests

* fix: invalid url issue

* fix: double radio button if embedding is allowed and html is returned

---------

Co-authored-by: spaenleh <spaenleh@gmail.com>

cypress/e2e/item/create/createDocument.cy.ts

@@ -4,13 +4,7 @@ import {
   PackedFolderItemFactory,
 } from '@graasp/sdk';
 
-import {
-  CREATE_ITEM_BUTTON_ID,
-  CREATE_ITEM_DOCUMENT_ID,
-  ITEM_FORM_CONFIRM_BUTTON_ID,
-  ITEM_FORM_DISPLAY_NAME_INPUT_ID,
-  ITEM_FORM_NAME_INPUT_ID,
-} from '@/config/selectors';
+import { ITEM_FORM_CONFIRM_BUTTON_ID } from '@/config/selectors';
 
 import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
 import ItemLayoutMode from '../../../../src/enums/itemLayoutMode';
@@ -74,19 +68,4 @@ describe('Create Document', () => {
       true,
     );
   });
-
-  it('autoComplete document displayName', () => {
-    cy.setUpApi();
-    cy.visit(HOME_PATH);
-
-    cy.switchMode(ItemLayoutMode.List);
-
-    cy.get(`#${CREATE_ITEM_BUTTON_ID}`).click();
-    cy.get(`#${CREATE_ITEM_DOCUMENT_ID}`).click();
-    cy.get(`#${ITEM_FORM_NAME_INPUT_ID}`).type('Test Name');
-    cy.get(`#${ITEM_FORM_DISPLAY_NAME_INPUT_ID}`).should(
-      'have.value',
-      'Test Name',
-    );
-  });
 });

cypress/fixtures/links.ts

@@ -55,6 +55,10 @@ export const YOUTUBE_LINK_ITEM: LinkItemType = PackedLinkItemFactory({
     thumbnails: ['https://i.ytimg.com/vi/FmiEgBMTPLo/maxresdefault.jpg'],
     icons: ['https://www.youtube.com/s/desktop/f0ff6c1d/img/favicon_96.png'],
   }),
+  settings: {
+    // this is necessary for Youtube to show the embed
+    showLinkIframe: true,
+  },
 });
 
 export const INVALID_LINK_ITEM: LinkItemType = PackedLinkItemFactory({

cypress/support/commands.ts

@@ -54,6 +54,7 @@ import {
   mockGetItems,
   mockGetItemsTags,
   mockGetLatestValidationGroup,
+  mockGetLinkMetadata,
   mockGetManyPublishItemInformations,
   mockGetMember,
   mockGetMemberMentions,
@@ -341,6 +342,8 @@ Cypress.Commands.add(
     mockPatchShortLink(cachedShortLinks, patchShortLinkError);
 
     mockDeleteShortLink(cachedShortLinks, deleteShortLinkError);
+
+    mockGetLinkMetadata();
   },
 );
 

cypress/support/server.ts

@@ -2195,3 +2195,29 @@ export const mockDeleteShortLink = (
     },
   ).as('deleteShortLink');
 };
+
+export const mockGetLinkMetadata = (): void => {
+  cy.intercept(
+    {
+      method: HttpMethod.Get,
+      url: new RegExp(`${API_HOST}/items/embedded-links/metadata*`),
+    },
+    ({ reply, url }) => {
+      let linkUrl = new URL(url).searchParams.get('link');
+
+      if (!linkUrl.includes('http')) {
+        linkUrl = `https://${linkUrl}`;
+      }
+      if (URL.canParse(linkUrl)) {
+        return reply({
+          title: 'Page title',
+          description: 'Page description',
+          html: '',
+          icons: [],
+          thumbnails: [],
+        });
+      }
+      return reply({ statusCode: StatusCodes.BAD_REQUEST });
+    },
+  ).as('getLinkMetadata');
+};

cypress/support/viewUtils.ts

@@ -108,7 +108,8 @@ export const expectLinkViewScreenLayout = ({
   }
 
   if (!html && (settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON)) {
-    cy.get('[data-testid="OpenInNewIcon"]').should('be.visible');
+    // this data-testid is set in graasp/ui
+    cy.get('[data-testid="fancy-link-card"]').should('be.visible');
   }
 
   if (description) {

package.json

@@ -21,10 +21,10 @@
     "@emotion/styled": "11.11.5",
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.12.1",
-    "@graasp/query-client": "3.8.0",
-    "@graasp/sdk": "4.11.0",
+    "@graasp/query-client": "3.9.0",
+    "@graasp/sdk": "4.12.0",
     "@graasp/translations": "1.28.0",
-    "@graasp/ui": "4.18.2",
+    "@graasp/ui": "4.19.0",
     "@mui/icons-material": "5.15.18",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.18",

src/components/App.tsx

@@ -1,5 +1,4 @@
-import { Outlet, useLocation } from 'react-router';
-import { Route, Routes } from 'react-router-dom';
+import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
 
 import { buildSignInPath, saveUrlForRedirection } from '@graasp/sdk';
 import { CustomInitialLoader, withAuthorization } from '@graasp/ui';

src/components/context/FilterItemsContext.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 

src/components/item/ItemContent.tsx

@@ -1,4 +1,4 @@
-import { useOutletContext } from 'react-router';
+import { useOutletContext } from 'react-router-dom';
 
 import { Container, Skeleton, styled } from '@mui/material';
 
@@ -107,21 +107,19 @@ const LinkContent = ({
   item: LinkItemType;
   member?: Member | null;
 }): JSX.Element => (
-  <StyledContainer>
-    <LinkItem
-      id={item.id}
-      memberId={member?.id}
-      isResizable
-      item={item}
-      height={ITEM_DEFAULT_HEIGHT}
-      showButton={Boolean(
-        item.settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON,
-      )}
-      showIframe={Boolean(
-        item.settings?.showLinkIframe ?? DEFAULT_LINK_SHOW_IFRAME,
-      )}
-    />
-  </StyledContainer>
+  <LinkItem
+    id={item.id}
+    memberId={member?.id}
+    isResizable
+    item={item}
+    height={ITEM_DEFAULT_HEIGHT}
+    showButton={Boolean(
+      item.settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON,
+    )}
+    showIframe={Boolean(
+      item.settings?.showLinkIframe ?? DEFAULT_LINK_SHOW_IFRAME,
+    )}
+  />
 );
 
 /**

src/components/item/form/DocumentForm.tsx

@@ -36,7 +36,6 @@ import {
   ITEM_FORM_DOCUMENT_TEXT_ID,
 } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
-import DisplayNameForm from './DisplayNameForm';
 import type { EditModalContentPropType } from './EditModalWrapper';
 import NameForm from './NameForm';
 
@@ -305,11 +304,6 @@ const DocumentForm = ({
           required
           updatedProperties={updatedProperties}
         />
-        <DisplayNameForm
-          setChanges={setChanges}
-          item={item}
-          updatedProperties={updatedProperties}
-        />
       </Stack>
       <DocumentExtraForm
         documentItemId={ITEM_FORM_DOCUMENT_TEXT_ID}

src/components/item/form/FolderThumbnail.tsx

@@ -3,6 +3,7 @@ import { FormEventHandler, useRef, useState } from 'react';
 import { Dialog, Stack, styled, useTheme } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
+import { DEFAULT_LIGHT_PRIMARY_COLOR } from '@graasp/ui';
 
 import { ImageUp as ImageUpIcon } from 'lucide-react';
 
@@ -96,7 +97,7 @@ const FolderThumbnail = ({ setChanges }: FolderThumbnailProps): JSX.Element => {
         height={THUMBNAIL_DIMENSION}
         width={THUMBNAIL_DIMENSION}
         borderRadius={2}
-        bgcolor="#E4DFFF"
+        bgcolor={DEFAULT_LIGHT_PRIMARY_COLOR}
         alignItems="center"
         justifyContent="center"
         overflow="hidden"