feat: link iframe are disabled by default (#473)

cypress/fixtures/links.js

@@ -18,11 +18,12 @@ export const GRAASP_LINK_ITEM = {
   }),
 };
 
-export const GRAASP_LINK_ITEM_BUTTON_ONLY = {
+export const GRAASP_LINK_ITEM_IFRAME_ONLY = {
   ...GRAASP_LINK_ITEM,
   id: 'ecafbd2a-5688-11eb-ae91-0242ac130122',
   settings: {
-    showLinkIframe: false,
+    showLinkIframe: true,
+    showLinkButton: false,
   },
 };
 

cypress/integration/item/settings/itemSettings.spec.js

@@ -130,7 +130,7 @@ describe('Item Settings', () => {
       cy.visit(buildItemPath(itemId));
       cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
 
-      cy.get(`#${SETTINGS_LINK_SHOW_IFRAME_ID}`).should('be.checked');
+      cy.get(`#${SETTINGS_LINK_SHOW_IFRAME_ID}`).should('not.be.checked');
 
       cy.get(`#${SETTINGS_LINK_SHOW_IFRAME_ID}`).click();
 
@@ -140,7 +140,7 @@ describe('Item Settings', () => {
             body: { settings },
           },
         }) => {
-          expect(settings.showLinkIframe).equals(false);
+          expect(settings.showLinkIframe).equals(true);
           cy.wait(EDIT_ITEM_PAUSE);
           cy.get('@getItem').its('response.url').should('contain', itemId);
         },
@@ -152,7 +152,7 @@ describe('Item Settings', () => {
       cy.visit(buildItemPath(itemId));
       cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
 
-      cy.get(`#${SETTINGS_LINK_SHOW_BUTTON_ID}`).should('not.be.checked');
+      cy.get(`#${SETTINGS_LINK_SHOW_BUTTON_ID}`).should('be.checked');
 
       cy.get(`#${SETTINGS_LINK_SHOW_BUTTON_ID}`).click();
 
@@ -162,7 +162,7 @@ describe('Item Settings', () => {
             body: { settings },
           },
         }) => {
-          expect(settings.showLinkButton).equals(true);
+          expect(settings.showLinkButton).equals(false);
           cy.wait(EDIT_ITEM_PAUSE);
           cy.get('@getItem').its('response.url').should('contain', itemId);
         },

cypress/integration/item/view/utils.js

@@ -1,4 +1,8 @@
-import { ITEM_TYPES_WITH_CAPTIONS } from '../../../../src/config/constants';
+import {
+  DEFAULT_LINK_SHOW_BUTTON,
+  DEFAULT_LINK_SHOW_IFRAME,
+  ITEM_TYPES_WITH_CAPTIONS,
+} from '../../../../src/config/constants';
 import {
   DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR,
   ITEM_HEADER_ID,
@@ -116,10 +120,14 @@ export const expectLinkViewScreenLayout = ({
       const parsedHtml = element.html().replaceAll('=""', '');
       expect(parsedHtml).to.contain(html);
     });
-  } else if (settings?.showLinkIframe) {
+  } else if (settings?.showLinkIframe ?? DEFAULT_LINK_SHOW_IFRAME) {
     cy.get(`iframe#${id}`).should('have.attr', 'src', url);
   }
 
+  if (!html && (settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON)) {
+    cy.get('[data-testid="OpenInNewIcon"]').should('be.visible');
+  }
+
   if (description) {
     cy.get(`.${TEXT_EDITOR_CLASS}`).should('contain', description);
   }

cypress/integration/item/view/viewLink.spec.js

@@ -1,7 +1,7 @@
 import { buildItemPath } from '../../../../src/config/paths';
 import {
   GRAASP_LINK_ITEM,
-  GRAASP_LINK_ITEM_BUTTON_ONLY,
+  GRAASP_LINK_ITEM_IFRAME_ONLY,
   YOUTUBE_LINK_ITEM,
 } from '../../../fixtures/links';
 import { expectLinkViewScreenLayout } from './utils';
@@ -11,7 +11,7 @@ describe('Links', () => {
     cy.setUpApi({
       items: [
         GRAASP_LINK_ITEM,
-        GRAASP_LINK_ITEM_BUTTON_ONLY,
+        GRAASP_LINK_ITEM_IFRAME_ONLY,
         YOUTUBE_LINK_ITEM,
       ],
     });
@@ -27,14 +27,14 @@ describe('Links', () => {
     expectLinkViewScreenLayout({ item: GRAASP_LINK_ITEM });
   });
 
-  it('view some link without iframe', () => {
-    const { id } = GRAASP_LINK_ITEM_BUTTON_ONLY;
+  it('view some link with iframe', () => {
+    const { id } = GRAASP_LINK_ITEM_IFRAME_ONLY;
     cy.visit(buildItemPath(id));
 
     // should get current item
     cy.wait('@getItem');
 
-    expectLinkViewScreenLayout({ item: GRAASP_LINK_ITEM_BUTTON_ONLY });
+    expectLinkViewScreenLayout({ item: GRAASP_LINK_ITEM_IFRAME_ONLY });
   });
 
   it('view youtube', () => {

package.json

@@ -139,6 +139,7 @@
   "resolutions": {
     "node-forge": "1.3.0",
     "nth-check": "2.0.1",
+    "i18next": "21.8.1",
     "immer": "9.0.6",
     "glob-parent": "5.1.2",
     "browserslist": "4.16.5",

src/components/item/ItemContent.tsx

@@ -18,6 +18,7 @@ import {
 import {
   API_HOST,
   CONTEXT_BUILDER,
+  DEFAULT_LINK_SHOW_BUTTON,
   DEFAULT_LINK_SHOW_IFRAME,
   H5P_INTEGRATION_URL,
   ITEM_DEFAULT_HEIGHT,
@@ -136,7 +137,9 @@ const ItemContent: FC<Props> = ({ item, enableEditing, permission }) => {
             onSaveCaption={onSaveCaption}
             saveButtonId={saveButtonId}
             height={ITEM_DEFAULT_HEIGHT}
-            showButton={item.settings?.showLinkButton === 'true'}
+            showButton={Boolean(
+              item.settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON,
+            )}
             showIframe={Boolean(
               item.settings?.showLinkIframe ?? DEFAULT_LINK_SHOW_IFRAME,
             )}

src/components/item/publish/CategorySelection.tsx

@@ -14,7 +14,7 @@ import {
 } from '../../../config/i18n';
 import { hooks, useMutation } from '../../../config/queryClient';
 import { LIBRARY_SETTINGS_CATEGORIES_ID } from '../../../config/selectors';
-import { Category, ItemCategory } from '../../../config/types';
+import { Category } from '../../../config/types';
 import { sortByName } from '../../../utils/item';
 import { CurrentUserContext } from '../../context/CurrentUserContext';
 import DropdownMenu from './DropdownMenu';
@@ -111,7 +111,7 @@ const CategorySelection: FC = () => {
         {translateBuilder(BUILDER.ITEM_CATEGORIES_SELECTION_TITLE)}
       </Typography>
       {categoryTypes?.map(({ id, name }) => {
-        let values = categoriesMap?.get(id)?.toJS() as ItemCategory[];
+        let values = categoriesMap?.get(id)?.toJS() as Category[];
 
         values =
           values

src/components/item/settings/LinkSettings.tsx

@@ -9,7 +9,10 @@ import { MUTATION_KEYS } from '@graasp/query-client';
 import { Item } from '@graasp/sdk';
 import { BUILDER } from '@graasp/translations';
 
-import { DEFAULT_LINK_SHOW_IFRAME } from '../../../config/constants';
+import {
+  DEFAULT_LINK_SHOW_BUTTON,
+  DEFAULT_LINK_SHOW_IFRAME,
+} from '../../../config/constants';
 import { useBuilderTranslation } from '../../../config/i18n';
 import { useMutation } from '../../../config/queryClient';
 import {
@@ -80,7 +83,7 @@ const LinkSettings: FC<Props> = ({ item }) => {
       <Switch
         id={SETTINGS_LINK_SHOW_BUTTON_ID}
         onChange={handleButtonSetting}
-        checked={Boolean(settings?.showLinkButton) ?? false}
+        checked={Boolean(settings?.showLinkButton ?? DEFAULT_LINK_SHOW_BUTTON)}
         color="primary"
       />
     );

src/config/constants.js

@@ -259,4 +259,5 @@ export const THUMBNAIL_SIZES = {
 
 export const ITEM_HEADER_ICON_HEIGHT = 30;
 export const AVATAR_ICON_HEIGHT = 30;
-export const DEFAULT_LINK_SHOW_IFRAME = true;
+export const DEFAULT_LINK_SHOW_IFRAME = false;
+export const DEFAULT_LINK_SHOW_BUTTON = true;

yarn.lock

@@ -2263,10 +2263,10 @@ __metadata:
 
 "@graasp/translations@github:graasp/graasp-translations":
   version: 0.1.0
-  resolution: "@graasp/translations@https://github.com/graasp/graasp-translations.git#commit=db0bec490c1bface4fa3fb0a43a2d8f8eaeb91d7"
+  resolution: "@graasp/translations@https://github.com/graasp/graasp-translations.git#commit=97252587d033d6ba804728107969851ef472c7ab"
   dependencies:
     i18next: 21.8.1
-  checksum: 9694e7e12928681ed2a25c5bafb39e0db93680a977cac07aced5a9fc580ffbec428673705d6c964fff1ee6cb0ffb9e93152049ebfb9a847d91c7b4afaa542527
+  checksum: 7c5e398ddab314d77c94fd7e1b6de11c5b383403e89492e40f428c752d580a388e694599a204a2f7e5a27e4eb5ee4aa510fdb11195b101a0988f0842034ef273
   languageName: node
   linkType: hard