Refactor the wrapper implementation

Signed-off-by: Dominik Henneke <dominik.henneke@nordeck.net>

.changeset/twenty-walls-melt.md

@@ -0,0 +1,9 @@
+---
+'@nordeck/element-web-opendesk-module': minor
+---
+
+Refactor the wrapper implementation.
+
+**Breaking Change:**
+This module requires at least Element 1.11.48.
+The module did break the navigation feature in prior Element versions.

e2e/src/deploy/elementWeb/Dockerfile

@@ -1,22 +1,11 @@
 FROM node:20-bullseye as builder
 
-### ARG ELEMENT_VERSION="v1.11.46"
-ARG USE_CUSTOM_SDKS=true
-ARG REACT_SDK_REPO="https://github.com/nordeck/matrix-react-sdk.git"
-ARG REACT_SDK_BRANCH="nic/feat/ms5-widget-toggles"
-ARG JS_SDK_REPO="https://github.com/nordeck/matrix-js-sdk.git"
-ARG JS_SDK_BRANCH="nic/feat/ms5-widget-toggles"
-ARG ELEMENT_WEB_REPO="https://github.com/nordeck/element-web.git"
-ARG ELEMENT_BRANCH="nic/feat/ms5-widget-toggles"
-
-RUN apt-get update && apt-get install -y git dos2unix
+ARG ELEMENT_VERSION="v1.11.48"
 
 WORKDIR /src
 
 # Clone the release tag from element
-RUN git clone --depth 1 --branch $ELEMENT_BRANCH $ELEMENT_WEB_REPO /src
-
-RUN dos2unix /src/scripts/docker-link-repos.sh && bash /src/scripts/docker-link-repos.sh
+RUN git clone --depth 1 --branch $ELEMENT_VERSION https://github.com/vector-im/element-web.git /src
 
 RUN yarn --network-timeout=200000 install
 
@@ -26,12 +15,7 @@ COPY /build_config.yaml /src
 COPY /customisations.json /src
 
 # Build Element
-### RUN bash /src/scripts/docker-package.sh
-RUN VERSION=${ELEMENT_BRANCH} yarn build
-RUN echo ${ELEMENT_BRANCH} > /src/webapp/version
-
-# Workaround for https://github.com/vector-im/element-web/issues/25941
-RUN sed -i 's/emitter.emit("closed")/emitter.emit("DISABLED")/' webapp/bundles/*/bundle.js
+RUN bash /src/scripts/docker-package.sh
 
 # App
 FROM nginx:bookworm

e2e/src/deploy/elementWeb/index.ts

@@ -22,7 +22,7 @@ let container: StartedTestContainer | undefined;
 export async function startElementWeb({
   homeserverUrl,
   widgetServerUrl,
-  version = 'v1.11.46',
+  version = 'v1.11.48-rc.1',
 }: {
   homeserverUrl: string;
   widgetServerUrl: string;

packages/element-web-opendesk-module/README.md

@@ -15,7 +15,7 @@ Features:
 
 ## Requirements
 
-The minimal Element version to use this module is `1.11.41`.
+The minimal Element version to use this module is `1.11.48`.
 
 ## Install the Element Module
 

packages/element-web-opendesk-module/src/OpenDeskModule.tsx

@@ -84,38 +84,13 @@ export class OpenDeskModule extends RuntimeModule {
     if (this.config.banner) {
       const bannerConfig = this.config.banner;
 
-      // TODO: This should be a functional component. Element calls `ReactDOM.render` and uses the
-      // return value as a reference to the MatrixChat component. Then they call a function on this
-      // reference. This is deprecated behavior and only works if the root component is a class. Since
-      // our component is now the root it must be class and it must also forward the calls the are
-      // meant for the MatrixChat component. Element should be changed so it uses Ref's and pass this
-      // to the MatrixChat so that any parent components don't interfere with this logic.
-      this.Wrapper = class Wrapper extends React.Component {
-        private readonly ref = React.createRef<{
-          showScreen: (...args: unknown[]) => unknown;
-        }>();
-
-        public showScreen(...args: unknown[]) {
-          return this.ref.current?.showScreen(...args);
-        }
-
-        render() {
-          // Add the ref to our only children -> the MatrixChat component
-          const children =
-            React.Children.only(this.props.children) &&
-            React.isValidElement<{ ref: unknown }>(this.props.children) &&
-            'ref' in this.props.children &&
-            !this.props.children.ref
-              ? React.cloneElement(this.props.children, { ref: this.ref })
-              : this.props.children;
-
-          return (
-            <ThemeProvider theme={theme}>
-              <Navbar config={bannerConfig} moduleApi={moduleApi} />
-              <MatrixChatWrapper>{children}</MatrixChatWrapper>
-            </ThemeProvider>
-          );
-        }
+      this.Wrapper = function Wrapper({ children }) {
+        return (
+          <ThemeProvider theme={theme}>
+            <Navbar config={bannerConfig} moduleApi={moduleApi} />
+            <MatrixChatWrapper>{children}</MatrixChatWrapper>
+          </ThemeProvider>
+        );
       };
 
       this.on(WrapperLifecycle.Wrapper, this.onWrapper);