feat: add link settings

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

@@ -2,14 +2,20 @@ import { buildItemPath } from '../../../../src/config/paths';
 import {
   ITEM_SETTINGS_BUTTON_CLASS,
   SETTINGS_CHATBOX_TOGGLE_ID,
+  SETTINGS_LINK_SHOW_BUTTON_ID,
+  SETTINGS_LINK_SHOW_IFRAME_ID,
   SETTINGS_PINNED_TOGGLE_ID,
 } from '../../../../src/config/selectors';
 import { ITEMS_SETTINGS } from '../../../fixtures/items';
+import { GRAASP_LINK_ITEM } from '../../../fixtures/links';
 import { EDIT_ITEM_PAUSE } from '../../../support/constants';
 
 describe('Item Settings', () => {
   beforeEach(() => {
-    cy.setUpApi({ ...ITEMS_SETTINGS });
+    cy.setUpApi({
+      ...ITEMS_SETTINGS,
+      items: [...ITEMS_SETTINGS.items, GRAASP_LINK_ITEM],
+    });
   });
 
   describe('Chatbox Settings', () => {
@@ -106,4 +112,61 @@ describe('Item Settings', () => {
       );
     });
   });
+
+  describe('Link Settings', () => {
+    it('Does not show link settings for folder item', () => {
+      const itemId = ITEMS_SETTINGS.items[0].id;
+
+      cy.visit(buildItemPath(itemId));
+      cy.get(`.${ITEM_SETTINGS_BUTTON_CLASS}`).click();
+
+      cy.get(`#${SETTINGS_LINK_SHOW_IFRAME_ID}`).should('not.exist');
+      cy.get(`#${SETTINGS_LINK_SHOW_BUTTON_ID}`).should('not.exist');
+    });
+
+    it('Toggle Iframe', () => {
+      const itemId = GRAASP_LINK_ITEM.id;
+
+      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}`).click();
+
+      cy.wait('@editItem').then(
+        ({
+          response: {
+            body: { settings },
+          },
+        }) => {
+          expect(settings.showLinkIframe).equals(false);
+          cy.wait(EDIT_ITEM_PAUSE);
+          cy.get('@getItem').its('response.url').should('contain', itemId);
+        },
+      );
+    });
+
+    it('Toggle Button', () => {
+      const itemId = GRAASP_LINK_ITEM.id;
+      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}`).click();
+
+      cy.wait('@editItem').then(
+        ({
+          response: {
+            body: { settings },
+          },
+        }) => {
+          expect(settings.showLinkButton).equals(true);
+          cy.wait(EDIT_ITEM_PAUSE);
+          cy.get('@getItem').its('response.url').should('contain', itemId);
+        },
+      );
+    });
+  });
 });

src/components/item/ItemContent.js

@@ -120,6 +120,8 @@ const ItemContent = ({ item, enableEditing, permission }) => {
             onSaveCaption={onSaveCaption}
             saveButtonId={saveButtonId}
             height={ITEM_DEFAULT_HEIGHT}
+            showButton={item.settings?.showLinkButton}
+            showIframe={item.settings?.showLinkIframe}
           />
         </div>
       );

src/components/item/settings/ItemSettings.js

@@ -22,6 +22,7 @@ import {
 import ThumbnailSetting from './ThumbnailSetting';
 import CCLicenseSelection from '../publish/CCLicenseSelection';
 import { ITEM_TYPES } from '../../../enums';
+import LinkSettings from './LinkSettings';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -144,6 +145,7 @@ const ItemSettings = ({ item }) => {
         {renderChatSetting()}
         {renderCollapseSetting()}
       </FormGroup>
+      {item.type === ITEM_TYPES.LINK && <LinkSettings item={item} />}
       <ThumbnailSetting item={item} />
       <CCLicenseSelection item={item} />
     </Container>

src/components/item/settings/LinkSettings.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Record } from 'immutable';
+import { useTranslation } from 'react-i18next';
+import {
+  FormControlLabel,
+  Switch,
+  makeStyles,
+  FormGroup,
+} from '@material-ui/core';
+import { MUTATION_KEYS } from '@graasp/query-client';
+import Typography from '@material-ui/core/Typography';
+import { useMutation } from '../../../config/queryClient';
+import {
+  SETTINGS_LINK_SHOW_BUTTON_ID,
+  SETTINGS_LINK_SHOW_IFRAME_ID,
+} from '../../../config/selectors';
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    margin: 0,
+    padding: 0,
+  },
+  wrapper: {
+    marginTop: theme.spacing(2),
+  },
+  divider: {
+    margin: theme.spacing(3, 0),
+  },
+  collapseTooltip: {
+    color: 'lightgrey',
+    marginBottom: -theme.spacing(0.5),
+  },
+}));
+const LinkSettings = ({ item }) => {
+  const { t } = useTranslation();
+
+  const classes = useStyles();
+  const { mutate: editItem } = useMutation(MUTATION_KEYS.EDIT_ITEM);
+
+  const { settings } = item;
+
+  const handleIframeSetting = (event) => {
+    editItem({
+      id: item.id,
+      name: item.name,
+      settings: {
+        showLinkIframe: event.target.checked,
+      },
+    });
+  };
+
+  const handleButtonSetting = (event) => {
+    editItem({
+      id: item.id,
+      name: item.name,
+      settings: {
+        showLinkButton: event.target.checked,
+      },
+    });
+  };
+
+  const renderIframeToggle = () => {
+    const control = (
+      <Switch
+        id={SETTINGS_LINK_SHOW_IFRAME_ID}
+        onChange={handleIframeSetting}
+        checked={settings?.showLinkIframe ?? true}
+        color="primary"
+      />
+    );
+    return <FormControlLabel label={t('Show Link Iframe')} control={control} />;
+  };
+
+  const renderButtonToggle = () => {
+    const control = (
+      <Switch
+        id={SETTINGS_LINK_SHOW_BUTTON_ID}
+        onChange={handleButtonSetting}
+        checked={settings?.showLinkButton ?? false}
+        color="primary"
+      />
+    );
+    return <FormControlLabel label={t('Show Link Button')} control={control} />;
+  };
+
+  return (
+    <>
+      <Typography variant="h5" className={classes.title}>
+        {t('Link Settings')}
+      </Typography>
+      <Typography variant="body">
+        {t(
+          'If both setting are disabled, a button will be displayed by default.',
+        )}
+      </Typography>
+      <FormGroup>
+        {renderIframeToggle()}
+        {renderButtonToggle()}
+      </FormGroup>
+    </>
+  );
+};
+
+LinkSettings.propTypes = {
+  item: PropTypes.instanceOf(Record).isRequired,
+};
+
+export default LinkSettings;

src/components/main/ItemsGrid.js

@@ -47,7 +47,7 @@ const useStyles = makeStyles((theme) => ({
 
 const ItemsGrid = (props) => {
   const {
-    items,
+    items = List(),
     title,
     itemSearch,
     headerElements,

src/config/selectors.js

@@ -238,3 +238,5 @@ export const SHARE_ITEM_CSV_PARSER_INPUT_BUTTON_SELECTOR = `${SHARE_ITEM_CSV_PAR
 export const SHARE_ITEM_FROM_CSV_ALERT_ERROR_ID = 'shareITemFromCsvAlertError';
 export const SHARE_ITEM_FROM_CSV_RESULT_FAILURES_ID =
   'shareItemFromCsvResultFailures';
+export const SETTINGS_LINK_SHOW_IFRAME_ID = 'settingsLinkShowIframe';
+export const SETTINGS_LINK_SHOW_BUTTON_ID = 'settingsLinkShowButton';

src/langs/en.json

@@ -225,6 +225,10 @@
     "sharedWithMembers_other": "This item is shared with {{count}} users",
     "You are not signed in.": "You are not signed in.",
     "Sign in with another account": "Sign in with another account",
-    "See Profile": "See Profile"
+    "See Profile": "See Profile",
+    "Link Settings": "Link Settings",
+    "Show Link Button": "Show Link Button",
+    "Show Link Iframe": "Show Link Iframe",
+    "If both setting are disabled, a button will be displayed by default.": "If both setting are disabled, a button will be displayed by default."
   }
 }

src/langs/fr.json

@@ -223,6 +223,10 @@
     "sharedWithMembers_other": "Cet élément est partagé avec {{count}} utilisateurs",
     "You are not signed in.": "Vous n'êtes pas connecté.",
     "Sign in with another account": "Se connecter avec un autre compte",
-    "See Profile": "Voir le Profil"
+    "See Profile": "Voir le Profil",
+    "Link Settings": "Paramètres du lien",
+    "Show Link Button": "Montrer le bouton cliquable",
+    "Show Link Iframe": "Montrer le lien dans une iframe",
+    "If both setting are disabled, a button will be displayed by default.": "Si les deux paramètres sont désactivés, un bouton sera affiché par défaut."
   }
 }

yarn.lock

@@ -2060,7 +2060,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@github:graasp/graasp-ui, @graasp/ui@github:graasp/graasp-ui.git":
+"@graasp/ui@github:graasp/graasp-ui":
   version: 0.2.0
   resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=8e38ca1792bc922cfaff872551620ef8a20db7c9"
   dependencies:
@@ -2096,6 +2096,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/ui@github:graasp/graasp-ui.git":
+  version: 0.2.0
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=13ae642e8cfbb9e23404a540b168331a32fe6c8a"
+  dependencies:
+    "@graasp/sdk": "github:graasp/graasp-sdk.git"
+    clsx: 1.1.1
+    http-status-codes: 2.2.0
+    immutable: 4.1.0
+    katex: 0.15.3
+    lodash.truncate: 4.4.2
+    qs: 6.10.3
+    react-cookie-consent: 7.4.1
+    react-i18next: 11.16.9
+    react-quill: 1.3.5
+    react-rnd: 10.3.7
+    react-text-mask: 5.4.3
+    uuid: 8.3.2
+  peerDependencies:
+    "@material-ui/core": 4.11.0
+    "@material-ui/icons": 4.9.1
+    "@material-ui/lab": 4.0.0-alpha.58
+    ag-grid-community: 27.3.0
+    ag-grid-react: 27.3.0
+    i18next: 21.3.1
+    react: ^16.13.1
+    react-dom: 16.13.1
+    react-router-dom: 6.2.2
+  peerDependenciesMeta:
+    ag-grid-community:
+      optional: true
+    ag-grid-react:
+      optional: true
+  checksum: a2a11e834e0ba52be4f4e4c1817e9208e8e6930ed2c3e66daf3b9974459a0d515021c2bf31ee7ac3887e2f1d71bc698a322ecfb682505a3a2b5e60a95b4ae1d4
+  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=6f4b00319b999f42e7657ff5fca3839c63a3990c"