fix: link default to use showLinkButton = false (#1266)

* fix: link default to use showLinkButton = false The default link type is a bare link, but when not specified the backend creates a link with the showLinkButton to true. The default setting was added in the frontend to give the expected result. * fix: update tests for links
graasp · Jun 7, 2024 · fcba8e6 · fcba8e6
1 parent a85b75c
commit fcba8e6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git a/cypress/support/viewUtils.ts b/cypress/support/viewUtils.ts
@@ -10,11 +10,7 @@ import {
 
 import { getHighestPermissionForMemberFromMemberships } from '@/utils/item';
 
-import {
-  DEFAULT_LINK_SHOW_BUTTON,
-  DEFAULT_LINK_SHOW_IFRAME,
-  ITEM_TYPES_WITH_CAPTIONS,
-} from '../../src/config/constants';
+import { ITEM_TYPES_WITH_CAPTIONS } from '../../src/config/constants';
 import {
   DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR,
   ITEM_HEADER_ID,
@@ -97,17 +93,19 @@ export const expectLinkViewScreenLayout = ({
   const { url, html } = getLinkExtra(item.extra) || {};
 
   // embedded element
-  if (html) {
-    cy.get(`#${id}`).then((element) => {
-      // transform innerhtml content to match provided html
-      const parsedHtml = element.html().replaceAll('=""', '');
-      expect(parsedHtml).to.contain(html);
-    });
-  } else if (settings?.showLinkIframe ?? DEFAULT_LINK_SHOW_IFRAME) {
-    cy.get(`iframe#${id}`).should('have.attr', 'src', url);
+  if (settings?.showLinkIframe) {
+    if (html) {
+      cy.get(`#${id}`).then((element) => {
+        // transform innerhtml content to match provided html
+        const parsedHtml = element.html().replaceAll('=""', '');
+        expect(parsedHtml).to.contain(html);
+      });
+    } else {
+      cy.get(`iframe#${id}`).should('have.attr', 'src', url);
+    }
   }
 
-  if (!html && (settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON)) {
+  if (settings?.showLinkButton) {
     // this data-testid is set in graasp/ui
     cy.get('[data-testid="fancy-link-card"]').should('be.visible');
   }

diff --git a/src/components/item/ItemContent.tsx b/src/components/item/ItemContent.tsx
@@ -34,11 +34,7 @@ import { DocumentItem } from '@graasp/ui/text-editor';
 
 import { API_HOST, GRAASP_ASSETS_URL, H5P_INTEGRATION_URL } from '@/config/env';
 
-import {
-  DEFAULT_LINK_SHOW_BUTTON,
-  DEFAULT_LINK_SHOW_IFRAME,
-  ITEM_DEFAULT_HEIGHT,
-} from '../../config/constants';
+import { ITEM_DEFAULT_HEIGHT } from '../../config/constants';
 import { axios, hooks } from '../../config/queryClient';
 import {
   DOCUMENT_ITEM_TEXT_EDITOR_ID,
@@ -113,12 +109,8 @@ const LinkContent = ({
     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,
-    )}
+    showButton={Boolean(item.settings?.showLinkButton)}
+    showIframe={Boolean(item.settings?.showLinkIframe)}
   />
 );
 

diff --git a/src/components/main/NewItemModal.tsx b/src/components/main/NewItemModal.tsx
@@ -66,7 +66,7 @@ type Props = {
 
 const DEFAULT_PROPERTIES: PropertiesPerType = {
   [ItemType.FOLDER]: { type: ItemType.FOLDER },
-  [ItemType.LINK]: { type: ItemType.LINK },
+  [ItemType.LINK]: { type: ItemType.LINK, settings: { showLinkButton: false } },
   [ItemType.APP]: { type: ItemType.APP },
   [ItemType.DOCUMENT]: { type: ItemType.DOCUMENT },
 };