add Flickr support

.github/workflows/acceptance.yml

@@ -9,6 +9,10 @@ on:
       - "packages/**"
 
 
+env:
+  CYPRESS_RETRIES: 2
+
+
 jobs:
 
   acceptance:
@@ -50,10 +54,7 @@ jobs:
           key: binary-20.x-${{ hashFiles('pnpm-lock.yaml') }}
 
       - name: Install dependencies
-        run: |
-          pnpm i
-          make install
-          pnpm i
+        run: make install
 
       - name: Install Cypress if not in cache
         if: steps.cache-cypress-binary.outputs.cache-hit != 'true'
@@ -88,29 +89,9 @@ jobs:
           log-output: stderr,stdout # same as true
 
           log-output-if: failure
-          # failure = exit-early or timeout
-
-          # working-directory: backend
 
       - run: make test-acceptance-headless
 
-      # - name: "Cypress: Acceptance tests"
-      #   uses: cypress-io/github-action@v6
-      #   env:
-      #     BABEL_ENV: production
-      #     CYPRESS_RETRIES: 2
-      #   with:
-      #     # working-directory: core/packages/volto
-      #     # project: ../../../.
-      #     # config-file: ../../../cypress.config.js
-      #     browser: chrome
-      #     spec: cypress/tests/**/*.{js,jsx,ts,tsx}
-      #     install: false
-      #     start: |
-      #       make start-test-acceptance-server-ci
-      #       make start-test-acceptance-frontend
-      #     wait-on: 'npx wait-on --httpTimeout 20000 http-get://localhost:55001/plone http://localhost:3000'
-
       # Upload Cypress screenshots
       - uses: actions/upload-artifact@v4
         if: failure()

.github/workflows/code.yml

@@ -45,10 +45,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: |
-          pnpm i
-          make install
-          pnpm i
+        run: make install
 
       - name: Linting
         run: make lint

.github/workflows/i18n.yml

@@ -42,10 +42,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: |
-          pnpm i
-          make install
-          pnpm i
+        run: make install
 
       - name: test i18n command
         run: make i18n

.github/workflows/unit.yml

@@ -42,10 +42,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: |
-          pnpm i
-          make install
-          pnpm i
+        run: make install
 
       - name: Unit tests
         run: make test-ci

Makefile

@@ -30,10 +30,11 @@ help:		## Show this help
 	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
 
 # Dev Helpers
+
 .PHONY: install
-install: ## Installs the dev environment using mrs-developer
-	@echo "$(GREEN)==> Installs the dev environment $(RESET)"
-	pnpm exec missdev --no-config --fetch-https
+install: ## Install task, checks if missdev (mrs-developer) is present and runs it
+	pnpm dlx mrs-developer missdev --no-config --fetch-https
+	pnpm i
 
 .PHONY: i18n
 i18n: ## Sync i18n

cypress/tests/flickrBlock.cy.js

@@ -0,0 +1,28 @@
+context('Flickr Block Acceptance Tests', () => {
+  describe('Flickr Block Tests', () => {
+    beforeEach(() => {
+      // Given a logged in editor
+      cy.viewport('macbook-16');
+      cy.createContent({
+        contentType: 'Document',
+        contentId: 'document',
+        contentTitle: 'Test document',
+      });
+      cy.autologin();
+    });
+
+    it('As editor I can add a Flickr Block', function () {
+      cy.visit('/document');
+      cy.navigate('/document/edit');
+      cy.getSlate().click();
+      cy.get('.button .block-add-button').click({ force: true });
+      cy.get('.blocks-chooser .social .button.flickrBlock').click({
+        force: true,
+      });
+
+      cy.get('.block.inner.flickrBlock .input-wrapper .ui.input input').invoke('val', '<a data-flickr-embed="true" data-header="true" data-footer="true" href="https://www.flickr.com/photos/plone-foundation/albums/72177720303069181" title="Plone Conference 2022 Namur"><img src="https://live.staticflickr.com/65535/52443622430_c442b75502.jpg" width="500" height="375" alt="Plone Conference 2022 Namur"/></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>').type('{enter}');
+
+      cy.get('#toolbar-save').click();
+    });
+  });
+});

news/27.feature

@@ -0,0 +1 @@
+Add Flickr block [@danalvrz]

packages/volto-social-blocks/src/components/Blocks/Facebook/Data.jsx

@@ -5,7 +5,8 @@ import { facebookSchema } from './schema';
 import { useIntl } from 'react-intl';
 
 const FacebookBlockData = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, blocksConfig, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = facebookSchema({ ...props, intl });
   Object.keys(schema.properties).forEach((key) => {
@@ -27,7 +28,19 @@ const FacebookBlockData = (props) => {
     });
   };
 
-  return <BlockDataForm schema={schema} title={schema.title} onChangeField={onChangeField} formData={data} block={block} />;
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={schema.title}
+      onChangeField={onChangeField}
+      onChangeBlock={onChangeBlock}
+      formData={data}
+      block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
+    />
+  );
 };
 
 export default FacebookBlockData;

packages/volto-social-blocks/src/components/Blocks/Facebook/DefaultView.jsx

@@ -14,7 +14,13 @@ const FacebookView = (props) => {
   const width = size ? SIZES[size] : SIZES['l'];
   const linkText = 'View post on Facebook';
   return facebookId ? (
-    <SocialContentWrapper align={align} tool="facebook" url={facebookId} linkText={linkText} className={className}>
+    <SocialContentWrapper
+      align={align}
+      tool="facebook"
+      url={facebookId}
+      linkText={linkText}
+      className={className}
+    >
       <FacebookEmbed url={facebookId} width={width} linkText={linkText} />
     </SocialContentWrapper>
   ) : null;

packages/volto-social-blocks/src/components/Blocks/Facebook/Edit.jsx

@@ -64,11 +64,24 @@ const FacebookBlockEdit = (props) => {
     <>
       <FacebookBlockView {...props} isEditMode />
       <SidebarPortal selected={selected}>
-        <FacebookBlockData data={data} block={block} onChangeBlock={onChangeBlock} />
+        <FacebookBlockData
+          data={data}
+          block={block}
+          onChangeBlock={onChangeBlock}
+        />
       </SidebarPortal>
     </>
   ) : (
-    <EditForm formHeader={intl.formatMessage(messages.editFormHeader)} formPlaceholder={intl.formatMessage(messages.editFormPlaceholder)} formErrorMessage={intl.formatMessage(messages.errorMessage)} formIcon={iconSVG} onKeyDown={onKeyDown} onChange={onChange} value={facebookId} invalidValue={hasError} />
+    <EditForm
+      formHeader={intl.formatMessage(messages.editFormHeader)}
+      formPlaceholder={intl.formatMessage(messages.editFormPlaceholder)}
+      formErrorMessage={intl.formatMessage(messages.errorMessage)}
+      formIcon={iconSVG}
+      onKeyDown={onKeyDown}
+      onChange={onChange}
+      value={facebookId}
+      invalidValue={hasError}
+    />
   );
 };
 

packages/volto-social-blocks/src/components/Blocks/Flickr/Data.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BlockDataForm } from '@plone/volto/components';
+import { isValidFlickrId } from '../../../helpers';
+import { flickrSchema } from './schema';
+import { useIntl } from 'react-intl';
+
+const FlickrBlockData = (props) => {
+  const { data, block, onChangeBlock, blocksConfig, navRoot, contentType } =
+    props;
+  const intl = useIntl();
+  const schema = flickrSchema({ ...props, intl });
+  Object.keys(schema.properties).forEach((key) => {
+    const field = schema.properties[key];
+    const defaultValue = field.default;
+    if (defaultValue !== undefined && data[field] === undefined) {
+      data[field] = defaultValue;
+    }
+  });
+  const onChangeField = (id, value) => {
+    if (id === 'flickrId' && value !== '') {
+      if (!isValidFlickrId(value)) {
+        return;
+      }
+    }
+    onChangeBlock(block, {
+      ...data,
+      [id]: value,
+    });
+  };
+
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={schema.title}
+      onChangeField={onChangeField}
+      onChangeBlock={onChangeBlock}
+      formData={data}
+      block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
+    />
+  );
+};
+
+export default FlickrBlockData;

packages/volto-social-blocks/src/components/Blocks/Flickr/DefaultView.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import SocialContentWrapper from '../../SocialContentWrapper/SocialContentWrapper';
+
+const FlickrView = (props) => {
+  const { flickrId, align } = props;
+  const linkText = 'View post on Flickr';
+  const parser = __CLIENT__ ? new DOMParser() : undefined;
+  const galleryData = parser?.parseFromString(flickrId, 'text/html');
+  const scriptSrc = '//embedr.flickr.com/assets/client-code.js';
+
+  useEffect(() => {
+    const head = document.querySelector('head');
+    const script = document.createElement('script');
+
+    script.setAttribute('src', scriptSrc);
+    head.appendChild(script);
+
+    return () => {
+      head.removeChild(script);
+    };
+  }, [scriptSrc]);
+
+  return (
+    flickrId && (
+      <SocialContentWrapper
+        align={align}
+        tool="flickr"
+        url={flickrId}
+        linkText={linkText}
+      >
+        <figure className="flickr-content">
+          <a
+            data-flickr-embed={true}
+            data-footer={galleryData?.links[0].dataset.footer}
+            data-header={galleryData?.links[0].dataset.header}
+            href={galleryData?.links[0].href ?? ''}
+            title={galleryData?.links[0].title}
+          >
+            <img
+              src={galleryData?.images[0].src}
+              width="100%"
+              alt={galleryData?.images[0].alt ?? ''}
+            />
+          </a>
+        </figure>
+      </SocialContentWrapper>
+    )
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+FlickrView.propTypes = {
+  flickrId: PropTypes.string.isRequired,
+  align: PropTypes.string,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+FlickrView.defaultProps = {
+  align: 'center',
+};
+
+export default FlickrView;