NFS-2146: Weather icon is missing

.github/workflows/autodev.yaml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   autodev:
-    uses: Staffbase/gha-workflows/.github/workflows/template_autodev.yml@dont-check-private-key
+    uses: Staffbase/gha-workflows/.github/workflows/template_autodev.yml@v5.3.0
     with:
       comments: true
     secrets:

.github/workflows/cd.yaml

@@ -7,23 +7,28 @@ on:
     types: [published]
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 20
   DEPLOYMENT_KIND: widget
   DEPLOYMENT_TARGET: weather
   DEPLOYMENT_STATIC_FILES: staffbase.user-profile-client.min.js
   DEPLOYMENT_SOURCE: samples/weather-forecast/dist
-  
+
 
 jobs:
-  build-and-deploy:
+  prepare-deployment:
+    name: Prepare Deployment
     runs-on: ubuntu-22.04
-
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          # persisting credentials breaks installing dependencies from private repos
+          persist-credentials: false
+          # fetch all history for all branches and tags
+          fetch-depth: 0
 
       - name: Use Node JS
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'yarn'
@@ -37,81 +42,131 @@ jobs:
         run: yarn install --cwd samples/weather-forecast --frozen-lockfile
 
       - name: Build widget
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
         run: yarn --cwd samples/weather-forecast build
 
       - name: Prepare Deployment
         run: |
           mkdir samples/weather-forecast/icons
-          cp samples/weather-forecast/resources/weather-forecast.svg samples/weather-forecast/dist/icons
+          cp samples/weather-forecast/resources/weather-forecast.png samples/weather-forecast/dist/icons
 
-      - name: Publish to S3 DE Prod
-        if:  startsWith(github.ref, 'refs/tags/')
-        uses: Staffbase/[email protected]
+  continuous-delivery-dev-de1:
+    name: Continuous Delivery (dev de1)
+    needs: prepare-deployment
+    runs-on: ubuntu-22.04
+    if: github.ref == 'refs/heads/dev'
+    steps:
+      - name: Deploy
+        uses: Staffbase/[email protected]
         with:
           source: ${{ env.DEPLOYMENT_SOURCE }}
-          target: ${{ env.DEPLOYMENT_TARGET }}
           deployment_kind: ${{ env.DEPLOYMENT_KIND }}
+          target: ${{ env.DEPLOYMENT_TARGET }}
+
           # Varnish settings
           static_files: ${{ env.DEPLOYMENT_STATIC_FILES }}
-          frontend_cache_host: frontend-cache-main-de1.staffbase.com
-          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_PROD_DE1_PASSWORD }}
+          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_DEV_DE1_PASSWORD }}
+          frontend_cache_host: frontend-cache-de1.staffbase.dev
 
           # AWS specific settings
-          aws_bucket: staffbasestatic-prod-de1
           aws_region: eu-central-1
-          aws_access_key_id: ${{ secrets.PROD_DE1_aws_access_key_id_ID }}
-          aws_access_key_secret: ${{ secrets.PROD_DE1_aws_access_key_id_SECRET }}
+          aws_bucket: staffbasestatic-dev-de1
+          aws_access_key_id: ${{ secrets.DEV_DE1_AWS_ACCESS_KEY_ID }}
+          aws_access_key_secret: ${{ secrets.DEV_DE1_AWS_ACCESS_KEY_SECRET }}
 
-      - name: Deploy to S3 US Prod
-        if: startsWith(github.ref, 'refs/tags/')
-        uses: Staffbase/[email protected]
+  continuous-delivery-stage-de1:
+    name: Continuous Delivery (stage de1)
+    needs: prepare-deployment
+    runs-on: ubuntu-22.04
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - name: Deploy
+        uses: Staffbase/[email protected]
         with:
           source: ${{ env.DEPLOYMENT_SOURCE }}
-          target: ${{ env.DEPLOYMENT_TARGET }}
           deployment_kind: ${{ env.DEPLOYMENT_KIND }}
+          target: ${{ env.DEPLOYMENT_TARGET }}
+
           # Varnish settings
           static_files: ${{ env.DEPLOYMENT_STATIC_FILES }}
-          frontend_cache_host: frontend-cache-us1.staffbase.com
-          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_PROD_US1_PASSWORD }}
+          frontend_cache_host: frontend-cache-de1.staffbase.rocks
+          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_STAGE_DE1_PASSWORD }}
 
           # AWS specific settings
-          aws_bucket: staffbasestatic-prod-us1
-          aws_region: us-east-1
-          aws_access_key_id: ${{ secrets.PROD_US1_aws_access_key_id_ID }}
-          aws_access_key_secret: ${{ secrets.PROD_US1_aws_access_key_id_SECRET }}
+          aws_bucket: staffbasestatic-stage-de1
+          aws_region: eu-central-1
+          aws_access_key_id: ${{ secrets.STAGE_DE1_AWS_ACCESS_KEY_ID }}
+          aws_access_key_secret: ${{ secrets.STAGE_DE1_AWS_ACCESS_KEY_SECRET }}
 
-      - name: Publish to S3 DE stage
-        if: github.ref == 'refs/heads/main'
-        uses: Staffbase/[email protected]
+  continuous-delivery-prod-de1:
+    name: Continuous Delivery (prod de1)
+    needs: prepare-deployment
+    runs-on: ubuntu-22.04
+    if: startsWith(github.ref, 'refs/tags/')
+    steps:
+      - name: Deploy
+        uses: Staffbase/[email protected]
         with:
           source: ${{ env.DEPLOYMENT_SOURCE }}
-          target: ${{ env.DEPLOYMENT_TARGET }}
           deployment_kind: ${{ env.DEPLOYMENT_KIND }}
+          target: ${{ env.DEPLOYMENT_TARGET }}
+
           # Varnish settings
           static_files: ${{ env.DEPLOYMENT_STATIC_FILES }}
-          frontend_cache_host: frontend-cache-de1.staffbase.rocks
-          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_STAGE_DE1_PASSWORD }}
+          frontend_cache_host: frontend-cache-de1.staffbase.com
+          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_PROD_DE1_PASSWORD }}
 
           # AWS specific settings
-          aws_bucket: staffbasestatic-stage-de1
+          aws_bucket: staffbasestatic-prod-de1
           aws_region: eu-central-1
-          aws_access_key_id: ${{ secrets.STAGE_DE1_aws_access_key_id_ID }}
-          aws_access_key_secret: ${{ secrets.STAGE_DE1_aws_access_key_id_SECRET }}
+          aws_access_key_id: ${{ secrets.PROD_DE1_AWS_ACCESS_KEY_ID }}
+          aws_access_key_secret: ${{ secrets.PROD_DE1_AWS_ACCESS_KEY_SECRET }}
 
-      - name: Publish to S3 DE dev
-        if: github.ref == 'refs/heads/dev'
-        uses: Staffbase/[email protected]
+  continuous-delivery-prod-us1:
+    name: Continuous Delivery (prod us1)
+    needs: prepare-deployment
+    runs-on: ubuntu-22.04
+    if: startsWith(github.ref, 'refs/tags/')
+    steps:
+      - name: Deploy
+        uses: Staffbase/[email protected]
         with:
           source: ${{ env.DEPLOYMENT_SOURCE }}
+          deployment_kind: ${{ env.DEPLOYMENT_KIND }}
           target: ${{ env.DEPLOYMENT_TARGET }}
+
+          # Varnish settings
+          static_files: ${{ env.DEPLOYMENT_STATIC_FILES }}
+          frontend_cache_host: frontend-cache-us1.staffbase.com
+          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_PROD_US1_PASSWORD }}
+
+          # AWS specific settings
+          aws_bucket: staffbasestatic-prod-us1
+          aws_region: us-east-1
+          aws_access_key_id: ${{ secrets.PROD_US1_AWS_ACCESS_KEY_ID }}
+          aws_access_key_secret: ${{ secrets.PROD_US1_AWS_ACCESS_KEY_SECRET }}
+
+  continuous-delivery-prod-au1:
+    name: Continuous Delivery (prod au1)
+    needs: prepare-deployment
+    runs-on: ubuntu-22.04
+    if: startsWith(github.ref, 'refs/tags/')
+    steps:
+      - name: Deploy
+        uses: Staffbase/[email protected]
+        with:
+          source: ${{ env.DEPLOYMENT_SOURCE }}
           deployment_kind: ${{ env.DEPLOYMENT_KIND }}
+          target: ${{ env.DEPLOYMENT_TARGET }}
+
           # Varnish settings
           static_files: ${{ env.DEPLOYMENT_STATIC_FILES }}
-          frontend_cache_host: frontend-cache-de1.staffbase.dev
-          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_DEV_DE1_PASSWORD }}
+          frontend_cache_host: frontend-cache-au1.staffbase.com
+          frontend_cache_password: ${{ secrets.FRONTEND_CACHE_PROD_AU1_PASSWORD }}
 
           # AWS specific settings
-          aws_bucket: staffbasestatic-dev-de1
-          aws_region: eu-central-1
-          aws_access_key_id: ${{ secrets.DEV_DE1_aws_access_key_id_ID }}
-          aws_access_key_secret: ${{ secrets.DEV_DE1_aws_access_key_id_SECRET }}
+          aws_bucket: staffbasestatic-prod-au1
+          aws_region: ap-southeast-2
+          aws_access_key_id: ${{ secrets.PROD_AU1_AWS_ACCESS_KEY_ID }}
+          aws_access_key_secret: ${{ secrets.PROD_AU1_AWS_ACCESS_KEY_SECRET }}

.github/workflows/ci.yaml

@@ -1,14 +1,14 @@
 name: CI Tests
 env:
-  NODE_VERSION: 14
+  NODE_VERSION: 20
 on:
   push:
     paths-ignore:
       - '**.md'
 
 jobs:
   executing-tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
       - name: Checkout repository
@@ -17,20 +17,22 @@ jobs:
           persist-credentials: false
 
       - name: Use Node.js Version
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: 'https://npm.pkg.github.com/'
           scope: '@staffbase'
 
+      - run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.STAFFBOT_NPM_READ }}" >> .npmrc
+
       - name: Install Yarn Dependencies
         working-directory:  samples/weather-forecast
         run: yarn install --frozen-lockfile
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.STAFFBOT_NPM_READ }}
 
       - name: Run Build
         working-directory: samples/weather-forecast
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
         run: yarn build
 
       - name: Run Lint

samples/weather-forecast/jest.config.js

@@ -2,8 +2,8 @@ module.exports = {
   setupFilesAfterEnv: ["./test/jest-setup.js"],
   resetMocks: true,
   moduleNameMapper: {
-    'icons/(.*)\.svg$': '<rootDir>/__mocks__/lazySvgMock.js',
-    '\\.svg$': '<rootDir>/__mocks__/fileMock.js',
+    'icons/(.*)\.(png|svg)$': '<rootDir>/__mocks__/lazySvgMock.js',
+    '\\.(png|svg)$': '<rootDir>/__mocks__/fileMock.js',
   },
   testEnvironment: 'jsdom',
 };

samples/weather-forecast/package.json

@@ -47,7 +47,7 @@
     "@testing-library/react": "12.0.0",
     "@testing-library/react-hooks": "7.0.2",
     "@types/copy-webpack-plugin": "^8.0.1",
-    "@types/node": "16.7.10",
+    "@types/node": "20.14.2",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
     "@types/webpack": "5.28.0",
@@ -72,6 +72,7 @@
     "ts-loader": "^9.2.5",
     "ts-node": "10.2.1",
     "typescript": "4.4.2",
+    "url-loader": "^4.1.1",
     "webpack": "^5.51.1",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.1.0",

samples/weather-forecast/src/api/useWeather.test.tsx

@@ -104,7 +104,7 @@ describe("useWeather", () => {
     });
 
     expect(result.current.error).toEqual(
-      new TypeError("Cannot read property 'map' of undefined")
+      new TypeError("Cannot read properties of undefined (reading 'map')")
     );
     expect(log).toHaveBeenCalledTimes(1);
   });

samples/weather-forecast/src/index.tsx

@@ -23,7 +23,7 @@ import {
 import { WeatherForecastProps, WeatherForecast } from "./weather-forecast";
 import { configurationSchema, uiSchema } from "./configuration-schema";
 import pkg from "../package.json";
-import icon from "../resources/weather-forecast.svg";
+import widgetIcon from "../resources/weather-forecast.png";
 
 /**
  * This factory creates the class which is registered with the tagname in the `custom element registry`
@@ -80,7 +80,7 @@ const blockDefinition: BlockDefinition = {
   configurationSchema: configurationSchema,
   uiSchema: uiSchema,
   label: "Weather",
-  iconUrl: icon,
+  iconUrl: widgetIcon,
 };
 
 /**

samples/weather-forecast/src/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: any;
+  export default value;
+}

samples/weather-forecast/webpack.common.ts

@@ -30,6 +30,17 @@ const config: webpack.Configuration = {
         test: /\.svg$/i,
         use: ["@svgr/webpack"],
       },
+      {
+        test: /\.(png|jpg|gif)$/i,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {