Merge pull request #3848 from 3scale/bye_bye_webpacker

🔥 Remove webpacker

.circleci/asset_paths

@@ -3,11 +3,9 @@ yarn.lock
 app/javascript
 app/assets
 app/lib/pdf/images
-babel.config.js
 public/dev-portal-assets
 config/compass.rb
 config/webpack
-config/webpacker.yml
 lib/developer_portal/app/assets
 lib/developer_portal/app/views/developer_portal/css
 lib/developer_portal/app/views/developer_portal/javascripts

.circleci/config.yml

@@ -58,9 +58,8 @@ save-assets-cache: &save-assets-cache
     key: *assets-cache-key
     paths:
       - public/assets
-      - public/packs-test
+      - public/packs
       - tmp/cache/assets
-      - tmp/cache/webpacker
 
 restore-assets-cache: &restore-assets-cache
   restore_cache:
@@ -510,15 +509,14 @@ jobs:
       - *use-example-config-files
       - run:
           name: Precompile assets
-          command: bundle exec rake assets:precompile:test
+          command: bundle exec rake assets:precompile
           environment:
             RAILS_GROUPS: assets
       - *save-assets-cache
       - persist_to_workspace:
           root: .
           paths:
             - ./public/packs
-            - ./public/packs-test
             - ./public/assets
             - ./config/*.yml
       - notify_failure

.gitignore

@@ -90,7 +90,6 @@ C:\\nppdf32Log\\debuglog.txt
 /tmp/*
 !.gitkeep
 !.eslint*
-!.babelrc
 .eslintcache
 Session.vim
 /TAGS
@@ -128,9 +127,8 @@ Gemfile.local
 package-lock.json
 *.orig
 
-# Webpacker
+# Webpack
 /public/packs
-/public/packs-test
 /node_modules
 /yarn-error.log
 yarn-debug.log*

Gemfile

@@ -248,7 +248,6 @@ group :licenses do
   gem 'license_finder', '~> 7.1.0'
 end
 
-gem 'webpacker', '5.4.4'
 
 gem 'developer_portal', path: 'lib/developer_portal'
 gem 'unicorn', require: false, group: %i[production]

Gemfile.lock

@@ -30,17 +30,17 @@ GIT
 
 GIT
   remote: https://github.com/3scale/swagger-ui_rails.git
-  revision: 13968af8f2845f448a0b88c4ffe4cf93477c90fa
-  branch: dev
+  revision: f88bb8bed4fdb57fcf5be6425f3fc10c638788d1
+  branch: dev-2.1.3
   specs:
-    swagger-ui_rails (0.1.7)
+    swagger-ui_rails2 (0.1.7)
 
 GIT
   remote: https://github.com/3scale/swagger-ui_rails.git
-  revision: f88bb8bed4fdb57fcf5be6425f3fc10c638788d1
-  branch: dev-2.1.3
+  revision: 13968af8f2845f448a0b88c4ffe4cf93477c90fa
+  branch: dev
   specs:
-    swagger-ui_rails2 (0.1.7)
+    swagger-ui_rails (0.1.7)
 
 GIT
   remote: https://github.com/prawnpdf/prawn-table.git
@@ -601,8 +601,6 @@ GEM
     rack-openid (1.4.2)
       rack (>= 1.1.0)
       ruby-openid (>= 2.1.8)
-    rack-proxy (0.7.4)
-      rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-utf8_sanitizer (1.9.1)
@@ -786,7 +784,6 @@ GEM
     selenium-webdriver (3.142.7)
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
-    semantic_range (3.0.0)
     set (1.1.0)
     shoulda (4.0.0)
       shoulda-context (~> 2.0)
@@ -922,11 +919,6 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.2)
     webrobots (0.1.2)
     websocket-driver (0.7.6)
@@ -1114,7 +1106,6 @@ DEPENDENCIES
   unicorn
   unicorn-rails
   webmock (~> 3.8.0)
-  webpacker (= 5.4.4)
   will_paginate (~> 3.3)
   with_env
   xpath (~> 3.2.0)

INSTALL.md

@@ -69,12 +69,21 @@ bundle exec rake ts:configure ts:start
 
 ## Asset compilation
 
-In development, assets are compiled automatically on demand when a Rails page loads. If you want to use [live code reloading](https://guides.rubyonrails.org/webpacker.html#running-webpacker-in-development) you'll need to run:
+Before running the application, all assets need to be compiled and a manifest generated. To do that run:
 
 ```sh
-bundle exec rake webpack:dev
+bundle exec rails assets:precompile
 ```
 
+This will include both the rails assets pipeline and webpack and it's intended for production and tests.
+For development, if you're gonna change anything under app/javascript like React or Typescript, it's more convenient to use live code reloading:
+
+```sh
+bundle exec rails webpack:dev
+```
+
+This will re-compile webpack and reload the browser whenever a file under app/javascript is updated.
+
 #### Environment variables
 
 Customize your server with the following environment variables:

app/helpers/application_helper.rb

@@ -359,10 +359,6 @@ def has_out_of_date_configuration?(service)
     service.pending_affecting_changes?
   end
 
-  def rails_asset_url_tag
-    javascript_tag("window.rails_asset_host = '#{rails_asset_host_url}'", { type: "text/javascript"})
-  end
-
   def rails_asset_host_url
     asset_host_url = Rails.configuration.three_scale.asset_host.presence
     return '' unless asset_host_url

app/helpers/webpack_helper.rb

@@ -0,0 +1,95 @@
+# rubocop:disable Rails/HelperInstanceVariable
+# frozen_string_literal: false
+
+module WebpackHelper
+  def load_webpack_manifest
+    JSON.parse(File.read('public/packs/manifest.json'))
+  rescue Errno::ENOENT
+    raise "The webpack manifest file does not exist. Try running `rails assets:precompile`"
+  end
+
+  def webpack_manifest
+    # Always get manifest.json on the fly in development mode
+    return load_webpack_manifest if Rails.env.development?
+
+    Rails.configuration.x.webpack.manifest ||= load_webpack_manifest
+  end
+
+  ##
+  # Returns a string of HTML script and style tags, containing all chunks of one or more +packs+.
+  # Chunks generated from ".ts" packs are located under the entrypoint with extension.
+  # Chunks generated from ".scss" packs are located under the entrypoint without extension.
+  #
+  # +packs+ is a list of pack names, without extension (.ts, .js).
+  #
+  # FIXME: the entrypoints in manifest should not have extension .ts
+  #
+  # A RuntimeError is raised if one pack is not found in the manifest, possibly pointing out a typo.
+  #
+  # ⚠️ This method smells of :reek:NestedIterators and :reek:TooManyStatements
+  #
+  def javascript_packs_with_chunks_tag(*packs) # rubocop:disable Metrics/AbcSize, Metrics/MethodLength, Metrics/CyclomaticComplexity
+    @packs ||= []
+    tags = ''
+    entrypoints = webpack_manifest['entrypoints']
+
+    packs.each do |pack|
+      entrypoint_with_extension = entrypoints["#{pack}.ts"] || {}
+      entrypoint_without_extension = entrypoints[pack] || {}
+
+      entrypoint = entrypoint_with_extension.deep_merge(entrypoint_without_extension) do |key, this_val, other_val|
+        (this_val + other_val).uniq
+      end
+      raise "No entrypoint '#{pack}' in manifest" if entrypoint.empty?
+
+      assets = entrypoint['assets']
+
+      if (js = assets['js'])
+        new_js_assets = js - @packs
+        @packs.concat(new_js_assets)
+        tags.concat(javascript_include_tag(*new_js_assets, defer: false), "\n")
+      end
+
+      if (css = assets['css']) # rubocop:disable Style/Next
+        new_css_assets = css - @packs
+        @packs.concat(new_css_assets)
+        tags.concat(stylesheet_link_tag(*new_css_assets, defer: false))
+      end
+    end
+
+    tags.html_safe # rubocop:disable Rails/OutputSafety
+  end
+
+  ##
+  # Returns a string of HTML style tags, containing all CSS chunks of one or more +packs+.
+  # Chunks generated from ".scss" packs are located under the entrypoint without extension.
+  #
+  # +packs+ is a list of pack names, without extension.
+  #
+  # A RuntimeError is raised if one pack is not found in the manifest, possibly pointing out a typo.
+  #
+  # ⚠️ This method smells of :reek:TooManyStatements
+  #
+  def stylesheet_packs_chunks_tag(*packs) # rubocop:disable, Metrics/MethodLength, Metrics/CyclomaticComplexity
+    @packs ||= []
+    tags = ''
+    entrypoints = webpack_manifest['entrypoints']
+
+    packs.each do |pack|
+      entrypoint = entrypoints[pack] || {}
+      raise "No entrypoint '#{pack}' in manifest" if entrypoint.empty?
+
+      assets = entrypoint['assets']
+
+      next unless (css = assets['css'])
+
+      new_css_assets = css - @packs
+      @packs.concat(new_css_assets)
+      tags += stylesheet_link_tag(*new_css_assets, defer: false)
+    end
+
+    tags.html_safe # rubocop:disable Rails/OutputSafety
+  end
+end
+
+# rubocop:enable Rails/HelperInstanceVariable

app/javascript/packs/access_tokens.scss

@@ -0,0 +1,2 @@
+@import '~@patternfly/patternfly/components/DescriptionList/description-list.css';
+@import '~@patternfly/patternfly/components/Table/table.css';

app/javascript/packs/account.scss

@@ -0,0 +1,2 @@
+@import '~@patternfly/patternfly/components/Table/table.css';
+@import '~@patternfly/patternfly/layouts/Grid/grid.css';

app/javascript/packs/applications_show.scss

@@ -0,0 +1,2 @@
+@import '~@patternfly/patternfly/layouts/Grid/grid.css';
+@import '~@patternfly/patternfly/components/DescriptionList/description-list.css';

app/javascript/packs/authentication_providers.scss

@@ -0,0 +1,2 @@
+@import '~@patternfly/patternfly/components/Table/table.css';
+@import '~@patternfly/patternfly/components/OverflowMenu/overflow-menu.css';

app/javascript/packs/authentication_providers.ts

@@ -0,0 +1,18 @@
+// Small snippet to handle opening/closing of overflow menu, since this page is pure HTML.
+document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('mouseup', () => {
+    document.querySelectorAll<HTMLUListElement>('.pf-c-overflow-menu ul.pf-c-dropdown__menu')
+      .forEach(menu => {
+        menu.hidden = true
+      })
+  })
+
+  document.querySelectorAll<HTMLButtonElement>('.pf-c-overflow-menu button.pf-c-dropdown__toggle')
+    .forEach(toggle => {
+      toggle.addEventListener('click', () => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const menu = toggle.nextElementSibling! as HTMLUListElement
+        menu.hidden = !menu.hidden
+      })
+    })
+})

app/javascript/packs/bulk_operations.scss

@@ -1,3 +1,5 @@
+@import '~@patternfly/patternfly/components/DescriptionList/description-list.css';
+
 #bulk-operations {
   margin-bottom: 24px;
 

app/javascript/packs/dashboard.scss

@@ -1,3 +1,6 @@
+@import '@patternfly/patternfly/components/Page/page.css';
+@import '@patternfly/patternfly/layouts/Flex/flex.css';
+
 .dashboard-list-icon-title-layout {
   display: flex;
   align-items: center;

app/javascript/packs/dashboard.ts

@@ -7,6 +7,8 @@ import { safeFromJsonString } from 'utilities/json-utils'
 import type { Props as ProductsWidgetProps } from 'Dashboard/components/ProductsWidget'
 import type { Props as BackendsWidgetProps } from 'Dashboard/components/BackendsWidget'
 
+import './dashboard.scss'
+
 const productsContainerId = 'products-widget'
 const backendsContainerId = 'backends-widget'
 

app/javascript/packs/dev_portal_cms_toolbar.scss

@@ -1,5 +1,4 @@
 @import '~@patternfly/patternfly/patternfly-addons.css';
-@import '~@patternfly/patternfly/patternfly-base.css';
 
 @import '~@patternfly/patternfly/components/Button/button.css';
 @import '~@patternfly/patternfly/components/CodeBlock/code-block.css';

app/javascript/packs/empty_state.scss

@@ -0,0 +1 @@
+@import '~@patternfly/patternfly/components/EmptyState/empty-state.css';

app/javascript/packs/login.scss

@@ -1,9 +1,3 @@
-// Each PatternFly component already contains the CSS related to the component. In order to have
-// consistent styles throughout the application, PatternFly Base CSS should be used in the project,
-// or some components may diverge in appearance. This import statement should be placed before your
-// main application component is imported.
-@import '~@patternfly/react-core/dist/styles/base.css';
-
 .pf-c-alert.invisible {
   visibility: hidden;
 }

app/javascript/packs/patternfly_base.scss

@@ -0,0 +1,7 @@
+// Each PatternFly component already contains the CSS related to the component. In order to have
+// consistent styles throughout the application, PatternFly Base CSS should be used in the project,
+// or some components may diverge in appearance. This import statement should be placed before your
+// main application component is imported.
+// https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/README.md
+
+@import '@patternfly/patternfly/patternfly-base.css';

app/javascript/packs/pf_form.scss

@@ -0,0 +1,4 @@
+@import '~@patternfly/patternfly/components/Button/button.css';
+@import '~@patternfly/patternfly/components/Check/check.css';
+@import '~@patternfly/patternfly/components/Form/form.css';
+@import '~@patternfly/patternfly/components/FormControl/form-control.css';

app/javascript/packs/plans_edit.scss

@@ -0,0 +1 @@
+@import '~@patternfly/patternfly/components/Table/table.css';

app/javascript/packs/provider_account_overview.scss

@@ -0,0 +1 @@
+@import '~@patternfly/patternfly/components/DataList/data-list.css';

app/javascript/packs/switches.scss

@@ -0,0 +1 @@
+@import '~@patternfly/patternfly/components/Table/table.css';

app/javascript/packs/table_toolbar.scss

@@ -0,0 +1,2 @@
+@import '~@patternfly/patternfly/components/Table/table.css';
+@import '~@patternfly/patternfly/components/OverflowMenu/overflow-menu.css';

app/javascript/packs/usage_rules.scss

@@ -0,0 +1 @@
+@import '~@patternfly/patternfly/components/Table/table.css';

app/javascript/packs/webhooks_edit.scss

@@ -1,3 +1,7 @@
+@import '~@patternfly/patternfly/components/Check/check.css';
+@import '~@patternfly/patternfly/components/Form/form.css';
+@import '~@patternfly/patternfly/components/FormControl/form-control.css';
+
 input#web_hook_url {
   flex: 7;