OCPBUGS-44578: Rewrite `svg` and `png` to use ESM import style

[logonoff]

Fixes:

Fixes: https://issues.redhat.com/browse/OCPBUGS-44578

Analysis / Root cause:

When importing svg/png files as an asset/resource, the url is exported ESM-style, while the typescript we have defined sets it as a CommonJS one.

This problem dosen't seem to exist with the file-loader we currently have, but it still works, so this PR helps split up my webpack 5 PR

Solution Description:

Rewrite CJS imported png/jpg/jpeg/svg/... to ESM imports

Screen shots / Gifs for design review:

n/a

Unit test coverage report:

n/a

Test setup:

Nothing should change, icons should look the exact same

Browser conformance:

• [x] Chrome
• [x] Firefox
• [ ] Safari

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-44578, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

* bug is open, matching expected state (open) * bug target version (4.18.0) matches configured target version for branch (4.18.0) * bug is in the state New, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact: /cc @yapei

The bug has been updated to refer to the pull request using the external bug tracker.

In response to [this](https://github.com/openshift/console/pull/14496): >**Fixes**: > >Fixes: https://issues.redhat.com/browse/OCPBUGS-44578 > >**Analysis / Root cause**: > >When importing `svg`/`png` files as an `asset/resource`, it is as an ESM module, while the typescript we have defined sets it as a CommonJS one. > >This problem dosen't seem to exist with the `file-loader` we currently have but I am making this change to split up my webpack 5 PR > >**Solution Description**: > >Rewrite CJS imported png/jpg/jpeg/svg/... to ESM imports > >**Screen shots / Gifs for design review**: > >n/a > >**Unit test coverage report**: > >n/a > >**Test setup:** > >Nothing should change, icons should look the exact same > >**Browser conformance**: > >- [x] Chrome >- [x] Firefox >- [ ] Safari > Instructions for interacting with me using PR comments are available [here](https://prow.ci.openshift.org/command-help?repo=openshift%2Fconsole). If you have questions or suggestions related to my behavior, please file an issue against the [openshift-eng/jira-lifecycle-plugin](https://github.com/openshift-eng/jira-lifecycle-plugin/issues/new) repository.

[logonoff]

/retest

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-44578, which is valid.

3 validation(s) were run on this bug

* bug is open, matching expected state (open) * bug target version (4.18.0) matches configured target version for branch (4.18.0) * bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact: /cc @yapei

In response to [this](https://github.com/openshift/console/pull/14496): >**Fixes**: > >Fixes: https://issues.redhat.com/browse/OCPBUGS-44578 > >**Analysis / Root cause**: > >When importing `svg`/`png` files as an `asset/resource`, it is as an ESM module, while the typescript we have defined sets it as a CommonJS one. > >This problem dosen't seem to exist with the `file-loader` we currently have but I am making this change here to help split up my webpack 5 PR > >**Solution Description**: > >Rewrite CJS imported png/jpg/jpeg/svg/... to ESM imports > >**Screen shots / Gifs for design review**: > >n/a > >**Unit test coverage report**: > >n/a > >**Test setup:** > >Nothing should change, icons should look the exact same > >**Browser conformance**: > >- [x] Chrome >- [x] Firefox >- [ ] Safari > Instructions for interacting with me using PR comments are available [here](https://prow.ci.openshift.org/command-help?repo=openshift%2Fconsole). If you have questions or suggestions related to my behavior, please file an issue against the [openshift-eng/jira-lifecycle-plugin](https://github.com/openshift-eng/jira-lifecycle-plugin/issues/new) repository.

[openshift-ci-robot]

/retest-required

Remaining retests: 0 against base HEAD 2705900f00bffab1e284d16d1dd8e4bdf5b0b5b7 and 2 for PR HEAD 546e6d632c46e8e5db217aa25fb52b039aa51527 in total

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-44578, which is valid.

3 validation(s) were run on this bug

* bug is open, matching expected state (open) * bug target version (4.18.0) matches configured target version for branch (4.18.0) * bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact: /cc @yapei

In response to [this](https://github.com/openshift/console/pull/14496): >**Fixes**: > >Fixes: https://issues.redhat.com/browse/OCPBUGS-44578 > >**Analysis / Root cause**: > >When importing `svg`/`png` files as an `asset/resource`, the url is esported ESM-style, while the typescript we have defined sets it as a CommonJS one. > >This problem dosen't seem to exist with the `file-loader` we currently have but I am making this change here to help split up my webpack 5 PR > >**Solution Description**: > >Rewrite CJS imported png/jpg/jpeg/svg/... to ESM imports > >**Screen shots / Gifs for design review**: > >n/a > >**Unit test coverage report**: > >n/a > >**Test setup:** > >Nothing should change, icons should look the exact same > >**Browser conformance**: > >- [x] Chrome >- [x] Firefox >- [ ] Safari > Instructions for interacting with me using PR comments are available [here](https://prow.ci.openshift.org/command-help?repo=openshift%2Fconsole). If you have questions or suggestions related to my behavior, please file an issue against the [openshift-eng/jira-lifecycle-plugin](https://github.com/openshift-eng/jira-lifecycle-plugin/issues/new) repository.

[openshift-ci[bot]]

@logonoff: all tests passed!

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available [here](https://git.k8s.io/community/contributors/guide/pull-requests.md). If you have questions or suggestions related to my behavior, please file an issue against the [kubernetes-sigs/prow](https://github.com/kubernetes-sigs/prow/issues/new?title=Prow%20issue:) repository. I understand the commands that are listed [here](https://go.k8s.io/bot-commands).

[openshift-ci[bot]]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, lokanandaprabhu, spadgett

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files: - ~~[frontend/OWNERS](https://github.com/openshift/console/blob/master/frontend/OWNERS)~~ [spadgett] Approvers can indicate their approval by writing `/approve` in a comment Approvers can cancel approval by writing `/approve cancel` in a comment

[openshift-ci-robot]

@logonoff: Jira Issue OCPBUGS-44578: All pull requests linked via external trackers have merged:

• openshift/console#14496

Jira Issue OCPBUGS-44578 has been moved to the MODIFIED state.

In response to [this](https://github.com/openshift/console/pull/14496): >**Fixes**: > >Fixes: https://issues.redhat.com/browse/OCPBUGS-44578 > >**Analysis / Root cause**: > >When importing `svg`/`png` files as an `asset/resource`, the url is exported ESM-style, while the typescript we have defined sets it as a CommonJS one. > >This problem dosen't seem to exist with the `file-loader` we currently have, but it still works, so this PR helps split up my webpack 5 PR > >**Solution Description**: > >Rewrite CJS imported png/jpg/jpeg/svg/... to ESM imports > >**Screen shots / Gifs for design review**: > >n/a > >**Unit test coverage report**: > >n/a > >**Test setup:** > >Nothing should change, icons should look the exact same > >**Browser conformance**: > >- [x] Chrome >- [x] Firefox >- [ ] Safari > Instructions for interacting with me using PR comments are available [here](https://prow.ci.openshift.org/command-help?repo=openshift%2Fconsole). If you have questions or suggestions related to my behavior, please file an issue against the [openshift-eng/jira-lifecycle-plugin](https://github.com/openshift-eng/jira-lifecycle-plugin/issues/new) repository.

[openshift-bot]

[ART PR BUILD NOTIFIER]

Distgit: openshift-enterprise-console This PR has been included in build openshift-enterprise-console-container-v4.18.0-202411152008.p0.g3953d93.assembly.stream.el9. All builds following this will include this PR.