feat(htmlexport): add HTML Export (#1094)

* feat(server): update server

* fix(deps): remove aws and mongodb dependencies

* chore(cleanup): remove old integration

* refactor(structure): add new client

* test(lint): reinstall & run ts-lint

* fix(client): long loading times when changing mode

* fix(language): set language to en for now

* fix(ui): change link color

* fix(workingCache): delete h5p if tab is closed

* chore(deps): update package-lock.json

* fix(api): make api naming consistent

* fix(state): remove index files for export

* fix(client): start with editor for now - dont show launchpad

* fix(H5PEditor): remove useless constructor

* refactor(state): merge h5p into h5peditor

* fix(client): permanent loadingindicator while creating new h5p

* fix(client): rename missing h5p to new h5p

* test(client): remove deprecated test and install redux-mock-store

* ci(install): run install in client

* ci(build): remove deprecated version-info-script

* fix(client): use correct api for opening files

* test(spectron): remove deprecated jest-file and add spectron

* refactor(client): add h5p-react instead of h5p-webcomponents (#1091)

* refactor(client): add h5p-react instead of h5p-webcomponents

* fix(h5p-react): corrected contentId for new content

Co-authored-by: Sebastian Rettig <serettig@posteo.de>

* fix(deps): upgrade h5p-react to 0.1.1

* refactor(h5peditor): remove deprecated code & use class-methods

* fix(deps): upgrade h5p-nodejs-library to @lumieducation/h5p-server

* chore(deps): reinstall husky & commitlint

* chore(deps): pin dependencies

* test(jest): add config

* ci(npm): add npm token to build, test and release pipelines

* chore(package): update author to GbR

* ci(npm): replace workflow with echo script

* ci(npm): add name to npm setup

* ci(test): remove attach_workspace in test

* fix(build-client): skip preflight check in create react app

The react-scripts package provided by Create React App requires a dependency:
  "jest": "26.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of jest was detected higher up in the tree:

* ci(test-order): build server before client

* feat(htmlexport): add action types

action types are used in the `type` field of an action

* feat(htmlexport): add action interfaces

action interfaces are only needed when using typescript.

* feat(htmlexport): add exportAsHtml action

https://github.com/reduxjs/redux-thunk#why-do-i-need-this

* feat(htmlexport): add api

* feat(htmlexport): add exportButtonState to Tab

* feat(htmlexport): add business-logic to reducer

* test(htmlexport): add reducer tests

* feat(htmlexport): add UI elements

* feat(htmlexport): wire up UI with redux-actions

* feat(htmlexport): add server endpoint

* chore(deps): fix package-locks

Co-authored-by: Sebastian Rettig <serettig@posteo.de>

client/src/state/H5PEditor/H5PApi.ts

@@ -6,6 +6,10 @@ export function loadPlayerContent(
     return superagent.get(`/api/v1/h5p/${contentId}/play`);
 }
 
+export function exportAsHtml(contentId: string): Promise<superagent.Response> {
+    return superagent.get(`/api/v1/h5p/${contentId}/html`);
+}
+
 export function loadEditorContent(
     contentId: string
 ): Promise<superagent.Response> {

client/src/state/H5PEditor/H5PEditorActions.ts

@@ -39,7 +39,10 @@ import {
     H5P_SAVECONTENT_SUCCESS,
     H5P_SAVECONTENT_ERROR,
     H5P_LOADEDITORCONTENT_REQUEST,
-    H5P_LOADEDITORCONTENT_SUCCESS
+    H5P_LOADEDITORCONTENT_SUCCESS,
+    H5PEDITOR_EXPORTHTML_REQUEST,
+    H5PEDITOR_EXPORTHTML_SUCCESS,
+    H5PEDITOR_EXPORTHTML_ERROR
 } from './H5PEditorTypes';
 
 import _path from 'path';
@@ -91,6 +94,29 @@ export interface IEditorLoadedAction {
     type: typeof H5PEDITOR_LOADED;
 }
 
+export function exportAsHtml(contentId: string): any {
+    return async (dispatch: any) => {
+        dispatch({
+            payload: { contentId },
+            type: H5PEDITOR_EXPORTHTML_REQUEST
+        });
+
+        try {
+            await api.exportAsHtml(contentId);
+
+            dispatch({
+                payload: { contentId },
+                type: H5PEDITOR_EXPORTHTML_SUCCESS
+            });
+        } catch (error) {
+            dispatch({
+                payload: { contentId },
+                type: H5PEDITOR_EXPORTHTML_ERROR
+            });
+        }
+    };
+}
+
 export function openH5P(): any {
     return (dispatch: any) => {
         api.openFiles().then((response) => {

client/src/state/H5PEditor/H5PEditorReducer.ts

@@ -8,6 +8,9 @@ import {
     H5PEDITOR_SELECT_TAB,
     H5PEDITOR_UPDATE_TAB,
     H5PEDITOR_LOADED,
+    H5PEDITOR_EXPORTHTML_REQUEST,
+    H5PEDITOR_EXPORTHTML_SUCCESS,
+    H5PEDITOR_EXPORTHTML_ERROR,
     H5P_LOADEDITORCONTENT_SUCCESS,
     H5P_LOADPLAYERCONTENT_REQUEST,
     H5P_LOADPLAYERCONTENT_SUCCESS,
@@ -128,13 +131,56 @@ export default function tabReducer(
                             ? {
                                   ...tab,
                                   saveButtonState: 'default',
+                                  exportButtonState: 'default',
                                   viewDisabled: false,
                                   loadingIndicator: false
                               }
                             : tab
                     )
                 };
 
+            case H5PEDITOR_EXPORTHTML_REQUEST:
+                return {
+                    ...state,
+                    tabList: state.tabList.map((tab, index) =>
+                        tab.contentId === action.payload.contentId
+                            ? {
+                                  ...tab,
+                                  exportButtonState: 'loading',
+                                  loadingIndicator: true
+                              }
+                            : tab
+                    )
+                };
+
+            case H5PEDITOR_EXPORTHTML_SUCCESS:
+                return {
+                    ...state,
+                    tabList: state.tabList.map((tab, index) =>
+                        tab.contentId === action.payload.contentId
+                            ? {
+                                  ...tab,
+                                  exportButtonState: 'success',
+                                  loadingIndicator: false
+                              }
+                            : tab
+                    )
+                };
+
+            case H5PEDITOR_EXPORTHTML_ERROR:
+                return {
+                    ...state,
+                    tabList: state.tabList.map((tab, index) =>
+                        tab.contentId === action.payload.contentId
+                            ? {
+                                  ...tab,
+                                  exportButtonState: 'error',
+                                  loadingIndicator: false
+                              }
+                            : tab
+                    )
+                };
+
             case H5P_LOADPLAYERCONTENT_REQUEST:
                 return {
                     ...state,
@@ -180,6 +226,7 @@ export default function tabReducer(
                             id: action.payload.id,
                             loadingIndicator: true,
                             saveButtonState: 'hidden',
+                            exportButtonState: 'hidden',
                             viewDisabled: true,
                             mainLibrary: '',
                             name: 'new H5P',

client/src/state/H5PEditor/H5PEditorSelectors.ts

@@ -14,6 +14,7 @@ export const errorObject: ITab = {
     state: 'error',
     mode: Modes.edit,
     saveButtonState: 'hidden',
+    exportButtonState: 'hidden',
     viewDisabled: true
 };
 

client/src/state/H5PEditor/H5PEditorTypes.ts

@@ -73,6 +73,10 @@ export const H5P_SAVECONTENT_REQUEST = 'H5P_SAVECONTENT_REQUEST';
 export const H5P_SAVECONTENT_SUCCESS = 'H5P_SAVECONTENT_SUCCESS';
 export const H5P_SAVECONTENT_ERROR = 'H5P_SAVECONTENT_ERROR';
 
+export const H5PEDITOR_EXPORTHTML_REQUEST = 'H5PEDITOR_EXPORTHTML_REQUEST';
+export const H5PEDITOR_EXPORTHTML_SUCCESS = 'H5PEDITOR_EXPORTHTML_SUCCESS';
+export const H5PEDITOR_EXPORTHTML_ERROR = 'H5PEDITOR_EXPORTHTML_ERROR';
+
 export enum Modes {
     view,
     edit
@@ -83,6 +87,7 @@ export interface ITab {
     id: string;
     loadingIndicator: boolean;
     saveButtonState: SaveButtonState;
+    exportButtonState: SaveButtonState;
     viewDisabled: boolean;
     mainLibrary: string;
     name: string;
@@ -139,7 +144,34 @@ export type TabActionTypes =
     | IEditorLoadedAction
     | IH5PExportRequestAction
     | IH5PExportSuccessAction
-    | IH5PExportErrorAction;
+    | IH5PExportErrorAction
+    | IH5PEditorExportHtmlActions;
+
+export interface IH5PEditorExportHtmlRequestAction {
+    payload: {
+        contentId: string;
+    };
+    type: typeof H5PEDITOR_EXPORTHTML_REQUEST;
+}
+
+export interface IH5PEditorExportHtmlSuccessAction {
+    payload: {
+        contentId: string;
+    };
+    type: typeof H5PEDITOR_EXPORTHTML_SUCCESS;
+}
+
+export interface IH5PEditorExportHtmlErrorAction {
+    payload: {
+        contentId: string;
+    };
+    type: typeof H5PEDITOR_EXPORTHTML_ERROR;
+}
+
+export type IH5PEditorExportHtmlActions =
+    | IH5PEditorExportHtmlRequestAction
+    | IH5PEditorExportHtmlSuccessAction
+    | IH5PEditorExportHtmlErrorAction;
 
 export interface IH5PLoadEditorContentRequestAction {
     payload: {

client/src/state/H5PEditor/__tests__/H5PEditorReducer.test.ts

@@ -1,7 +1,15 @@
 import shortid from 'shortid';
 
 import { default as reducer, initialState } from '../H5PEditorReducer';
-import { ITab, Modes, H5P_LOADEDITORCONTENT_SUCCESS } from '../H5PEditorTypes';
+import {
+    ITab,
+    Modes,
+    H5P_LOADEDITORCONTENT_SUCCESS,
+    H5PEDITOR_LOADED,
+    H5PEDITOR_EXPORTHTML_REQUEST,
+    H5PEDITOR_EXPORTHTML_SUCCESS,
+    H5PEDITOR_EXPORTHTML_ERROR
+} from '../H5PEditorTypes';
 
 describe('initialState', () => {
     it('returns the initial state', (done) => {
@@ -14,9 +22,10 @@ describe('initialState', () => {
 
 const testTab: ITab = {
     id: shortid(),
-    contentId: 'a',
+    contentId: shortid(),
     loadingIndicator: true,
     saveButtonState: 'default',
+    exportButtonState: 'default',
     viewDisabled: true,
     mainLibrary: 'library',
     name: 'test',
@@ -50,3 +59,119 @@ describe('H5P_LOADEDITORCONTENT_SUCCESS', () => {
         done();
     });
 });
+
+describe('H5PEDITOR_LOADED', () => {
+    it('sets the exportButtonState to default', (done) => {
+        const state = reducer(
+            {
+                activeTabIndex: 0,
+                tabList: [
+                    {
+                        ...testTab,
+                        exportButtonState: 'hidden'
+                    }
+                ]
+            },
+            {
+                payload: {
+                    tabId: testTab.id
+                },
+                type: H5PEDITOR_LOADED
+            }
+        );
+        expect(state.tabList[0].exportButtonState).toBe('default');
+        done();
+    });
+});
+
+describe('H5PEDITOR_EXPORTHTML_REQUEST', () => {
+    const state = reducer(
+        {
+            activeTabIndex: 0,
+            tabList: [
+                {
+                    ...testTab,
+                    exportButtonState: 'default'
+                }
+            ]
+        },
+        {
+            payload: {
+                contentId: testTab.contentId || ''
+            },
+            type: H5PEDITOR_EXPORTHTML_REQUEST
+        }
+    );
+
+    it('sets the exportButtonState to loading', (done) => {
+        expect(state.tabList[0].exportButtonState).toBe('loading');
+        done();
+    });
+
+    it('sets the loadingIndicator to true', (done) => {
+        expect(state.tabList[0].loadingIndicator).toBeTruthy();
+        done();
+    });
+});
+
+describe('H5PEDITOR_EXPORTHTML_SUCCESS', () => {
+    const state = reducer(
+        {
+            activeTabIndex: 0,
+            tabList: [
+                {
+                    ...testTab,
+                    exportButtonState: 'loading',
+                    loadingIndicator: true
+                }
+            ]
+        },
+        {
+            payload: {
+                contentId: testTab.contentId || ''
+            },
+            type: H5PEDITOR_EXPORTHTML_SUCCESS
+        }
+    );
+
+    it('sets the exportButtonState to success', (done) => {
+        expect(state.tabList[0].exportButtonState).toBe('success');
+        done();
+    });
+
+    it('sets the loadingIndicator to false', (done) => {
+        expect(state.tabList[0].loadingIndicator).toBeFalsy();
+        done();
+    });
+});
+
+describe('H5PEDITOR_EXPORTHTML_ERROR', () => {
+    const state = reducer(
+        {
+            activeTabIndex: 0,
+            tabList: [
+                {
+                    ...testTab,
+                    exportButtonState: 'loading',
+                    loadingIndicator: true
+                }
+            ]
+        },
+        {
+            payload: {
+                contentId: testTab.contentId || ''
+            },
+            type: H5PEDITOR_EXPORTHTML_ERROR
+        }
+    );
+
+    it('sets the exportButtonState to error', (done) => {
+        expect(state.tabList[0].exportButtonState).toBe('error');
+        done();
+    });
+
+    it('sets the loadingIndicator to false', (done) => {
+        expect(state.tabList[0].loadingIndicator).toBeFalsy();
+        done();
+    });
+});

client/src/views/H5PEditor.tsx

@@ -36,6 +36,7 @@ export class H5PEditor extends React.Component<{
     loadPlayerContent: typeof actions.h5peditor.loadPlayerContent;
     loadEditorContent: typeof actions.h5peditor.loadEditorContent;
     saveContent: typeof actions.h5peditor.saveContent;
+    exportAsHtml: typeof actions.h5peditor.exportAsHtml;
 
     editorLoaded: typeof actions.h5peditor.editorLoaded;
     editorSaved: typeof actions.h5peditor.editorSaved;
@@ -108,6 +109,7 @@ function mapDispatchToProps(dispatch: any): any {
             loadPlayerContent: actions.h5peditor.loadPlayerContent,
             loadEditorContent: actions.h5peditor.loadEditorContent,
             saveContent: actions.h5peditor.saveContent,
+            exportAsHtml: actions.h5peditor.exportAsHtml,
 
             editorLoaded: actions.h5peditor.editorLoaded,
             editorSaved: actions.h5peditor.editorSaved,