diff --git a/cypress/fixtures/links.js b/cypress/fixtures/links.js index 72df0d803..52eb4e637 100644 --- a/cypress/fixtures/links.js +++ b/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, }, }; diff --git a/cypress/integration/item/settings/itemSettings.spec.js b/cypress/integration/item/settings/itemSettings.spec.js index fd833cf8c..6a6922e47 100644 --- a/cypress/integration/item/settings/itemSettings.spec.js +++ b/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); }, diff --git a/cypress/integration/item/view/utils.js b/cypress/integration/item/view/utils.js index a7af36776..621f25eef 100644 --- a/cypress/integration/item/view/utils.js +++ b/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); } diff --git a/cypress/integration/item/view/viewLink.spec.js b/cypress/integration/item/view/viewLink.spec.js index a3fdf5ff2..cacff8212 100644 --- a/cypress/integration/item/view/viewLink.spec.js +++ b/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', () => { diff --git a/package.json b/package.json index 2d72bfa62..76045f445 100644 --- a/package.json +++ b/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", diff --git a/src/components/item/ItemContent.tsx b/src/components/item/ItemContent.tsx index 37453dab6..7c6726f17 100644 --- a/src/components/item/ItemContent.tsx +++ b/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 = ({ 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, )} diff --git a/src/components/item/publish/CategorySelection.tsx b/src/components/item/publish/CategorySelection.tsx index fc0c306be..626c503b3 100644 --- a/src/components/item/publish/CategorySelection.tsx +++ b/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)} {categoryTypes?.map(({ id, name }) => { - let values = categoriesMap?.get(id)?.toJS() as ItemCategory[]; + let values = categoriesMap?.get(id)?.toJS() as Category[]; values = values diff --git a/src/components/item/settings/LinkSettings.tsx b/src/components/item/settings/LinkSettings.tsx index e7c3daedc..a4a2ce505 100644 --- a/src/components/item/settings/LinkSettings.tsx +++ b/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 = ({ item }) => { ); diff --git a/src/config/constants.js b/src/config/constants.js index b92204475..1aa1eadf3 100644 --- a/src/config/constants.js +++ b/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; diff --git a/yarn.lock b/yarn.lock index abf8221a4..35db2d4f7 100644 --- a/yarn.lock +++ b/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