Bug 2017050 - Dynamic Plugins: Shared modules loaded multiple times, breaking use of PatternFly
Summary: Dynamic Plugins: Shared modules loaded multiple times, breaking use of Patter...
Keywords:
Status: CLOSED ERRATA
Alias: None
Product: OpenShift Container Platform
Classification: Red Hat
Component: Management Console
Version: 4.10
Hardware: Unspecified
OS: Unspecified
unspecified
high
Target Milestone: ---
: 4.10.0
Assignee: Vojtech Szocs
QA Contact: Yadan Pei
URL:
Whiteboard:
Depends On:
Blocks:
TreeView+ depends on / blocked
 
Reported: 2021-10-25 13:44 UTC by Samuel Padgett
Modified: 2022-03-10 16:22 UTC (History)
3 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Environment:
Version: 4.10.0-0.nightly-2021-10-23-225921 Cluster ID: 77781ea9-cd01-4bb0-80ff-7a692b907ff5 Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.104 Safari/537.36
Last Closed: 2022-03-10 16:21:40 UTC
Target Upstream Version:
Embargoed:


Attachments (Terms of Use)
Screenshot of layout problem when using PF button (25.35 KB, image/png)
2021-10-25 13:44 UTC, Samuel Padgett
no flags Details


Links
System ID Private Priority Status Summary Last Updated
Github openshift console pull 10383 0 None open Bug 2017050: CONSOLE-2963: Update dynamic plugin SDK to latest webpack 2021-11-04 11:17:20 UTC
Red Hat Product Errata RHSA-2022:0056 0 None None None 2022-03-10 16:22:01 UTC

Description Samuel Padgett 2021-10-25 13:44:02 UTC
Created attachment 1836792 [details]
Screenshot of layout problem when using PF button

The shared modules do not appear to be singletons. I created a plugin that uses a PF button, and it breaks console layout by including the PF button CSS twice (overriding the skip to content button styles in the header). When I used IgnorePlugin to skip @patternfly/react-core, the plugin fails to load.

```
    new webpack.IgnorePlugin({ resourceRegExp: /@patternfly\/react-core/ }),
```

Here is the runtime error:

```
Failed to load module 'CreateConsoleLinkPage' of plugin console-customization.1 Error: Cannot find module '@patternfly/react-core'
    at 887-chunk-c866a27fabcf3dca0fd4.min.js:1
    at Object.887 (887-chunk-c866a27fabcf3dca0fd4.min.js:1)
    at r (startup:4)
    at container-entry:13
    at coderef-resolver.ts:67
    at Generator.next (<anonymous>)
    at fulfilled (coderef-resolver.ts:1)
(anonymous) @ coderef-resolver.ts:69
fulfilled @ coderef-resolver.ts:1
Promise.then (async)
step @ coderef-resolver.ts:1
(anonymous) @ coderef-resolver.ts:1
push../packages/console-dynamic-plugin-sdk/src/coderefs/coderef-resolver.ts.__awaiter @ coderef-resolver.ts:1
loadReferencedObject @ coderef-resolver.ts:50
(anonymous) @ coderef-resolver.ts:96
(anonymous) @ coderef-resolver.ts:1
push../packages/console-dynamic-plugin-sdk/src/coderefs/coderef-resolver.ts.__awaiter @ coderef-resolver.ts:1
console-customization.1-CreateConsoleLinkPage @ coderef-resolver.ts:96
```

Comment 1 Samuel Padgett 2021-10-25 13:45:01 UTC
My plugin is https://github.com/spadgett/console-customization-plugin. You can reproduce by running this plugin and removing the CSS override here:

https://github.com/spadgett/console-customization-plugin/blob/main/src/components/forms/CreateConsoleLinkPage.tsx#L24-L26

Comment 2 Samuel Padgett 2021-10-25 13:46:44 UTC
Per Bipul, this is a regression from 4.9.

Comment 5 Yadan Pei 2021-11-17 07:16:00 UTC
1. deploy console-customization-plugin
# cat oc-manifest.yaml
apiVersion: v1
kind: Namespace
metadata:
  name: console-customization-plugin
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: console-customization-plugin
  namespace: console-customization-plugin
  labels:
    app: console-customization-plugin
    app.kubernetes.io/component: console-customization-plugin
    app.kubernetes.io/instance: console-customization-plugin
    app.kubernetes.io/part-of: console-customization-plugin
    app.openshift.io/runtime-namespace: console-customization-plugin
spec:
  replicas: 1
  selector:
    matchLabels:
      app: console-customization-plugin
  template:
    metadata:
      labels:
        app: console-customization-plugin
    spec:
      containers:
        - name: console-customization-plugin
          image: quay.io/spadgett/console-customization-plugin:latest
          ports:
            - containerPort: 9001
              protocol: TCP
          imagePullPolicy: Always
          args:
            - '--ssl'
            - '--cert=/var/serving-cert/tls.crt'
            - '--key=/var/serving-cert/tls.key'
          volumeMounts:
            - name: plugin-serving-cert
              readOnly: true
              mountPath: /var/serving-cert
      volumes:
        - name: plugin-serving-cert
          secret:
            secretName: plugin-serving-cert
            defaultMode: 420
      restartPolicy: Always
      dnsPolicy: ClusterFirst
  strategy:
    type: RollingUpdate
    rollingUpdate:
      maxUnavailable: 25%
      maxSurge: 25%
---
apiVersion: v1
kind: Service
metadata:
  annotations:
    service.alpha.openshift.io/serving-cert-secret-name: plugin-serving-cert
  name: console-customization-plugin
  namespace: console-customization-plugin
  labels:
    app: console-customization-plugin
    app.kubernetes.io/component: console-customization-plugin
    app.kubernetes.io/instance: console-customization-plugin
    app.kubernetes.io/part-of: console-customization-plugin
spec:
  ports:
    - name: 9001-tcp
      protocol: TCP
      port: 9001
      targetPort: 9001
  selector:
    app: console-customization-plugin
  type: ClusterIP
  sessionAffinity: None
---
apiVersion: console.openshift.io/v1alpha1
kind: ConsolePlugin
metadata:
  name: console-customization
spec:
  displayName: 'OpenShift Console Customization Plugin'
  service:
    name: console-customization-plugin
    namespace: console-customization-plugin
    port: 9001
    basePath: '/'

# oc apply -f oc-manifest.yaml
namespace/console-customization-plugin created
deployment.apps/console-customization-plugin created
service/console-customization-plugin created
consoleplugin.console.openshift.io/console-customization created

2. enable console-customization plugin, visit Administration -> Customization -> try to create 'ConsoleLink' from 'Create' dropdown, no layout issues 

verified on 4.10.0-0.nightly-2021-11-15-034648

Comment 9 errata-xmlrpc 2022-03-10 16:21:40 UTC
Since the problem described in this bug report should be
resolved in a recent advisory, it has been closed with a
resolution of ERRATA.

For information on the advisory (Moderate: OpenShift Container Platform 4.10.3 security update), and where to find the updated
files, follow the link below.

If the solution does not work for you, open a new bug report.

https://access.redhat.com/errata/RHSA-2022:0056


Note You need to log in before you can comment on or make changes to this bug.