scaleway · chambo-e · Oct 4, 2022 · Sep 28, 2022 · Sep 29, 2022
diff --git a/README.md b/README.md
@@ -98,6 +98,12 @@ scaleway-lib is a set of NPM packages used at Scaleway.
   ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/jest-helpers)
   ![npm](https://img.shields.io/npm/v/@scaleway/jest-helpers)
 
+- [`@scaleway/outdated-browser`](./packages/outdated-browser/README.md): A small web script to display outdated banne
+
+  ![npm](https://img.shields.io/npm/dm/@scaleway/outdated-browser)
+  ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/outdated-browser)
+  ![npm](https://img.shields.io/npm/v/@scaleway/outdated-browser)
+
 ## Development
 
 ### Locally

diff --git a/packages/outdated-browser/.npmignore b/packages/outdated-browser/.npmignore
@@ -0,0 +1,3 @@
+**/__tests__/**
+src
+!.npmignore
diff --git a/packages/outdated-browser/README.md b/packages/outdated-browser/README.md
@@ -0,0 +1,40 @@
+# `@scaleway/outdated-browser`
+
+A small web script to display outdated banner
+
+---
+
+## Install
+
+```bash
+$ pnpm add @scaleway/outdated-browser
+```
+
+## Usage
+
+This package is intended to be used in tandem with a bundler
+Only one parameter is required, a regex of accepted browser user agents
+
+Example with webpack:
+```js
+import { getUserAgentRegExp } from 'browserslist-useragent-regexp'
+
+const SUPPORTED_BROWSERS = getUserAgentRegExp({
+  browsers: '> 1%, last 2 versions, Firefox ESR, not IE > 0, not IE_Mob > 0',
+  allowHigherVersions: true,
+  ignoreMinor: true,
+  ignorePatch: true,
+}).toString()
+
+export default {
+  entry: {
+    outdated: '@scaleway/outdated-browser',
+    main: './src/index.tsx',
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      SUPPORTED_BROWSERS,
+    }),
+  ],
+}
+```
diff --git a/packages/outdated-browser/package.json b/packages/outdated-browser/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@scaleway/outdated-browser",
+  "version": "1.0.0",
+  "description": "A small web script to display outdated banner",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "browser": {
+    "dist/index.js": "./dist/index.browser.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleway/scaleway-lib",
+    "directory": "packages/outdated-browser"
+  },
+  "license": "MIT"
+}
diff --git a/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap b/packages/outdated-browser/src/__tests__/__snapshots__/index.ts.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@outdated-browser render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen  1`] = `
+"<head><style>
+  #outdated {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    display: flex;
+    gap: 16px;
+    background: rgba(242, 86, 72, 0.95);
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 16px;
+    color: white;
+    font-family: 'Open Sans', 'Segoe UI', sans-serif;
+  }
+
+  #outdated svg {
+    max-width: 300px;
+  }
+
+  #outdated a {
+    color: white;
+    border: 1px solid white;
+    border-radius: 4px;
+    background: transparent;
+    padding: 10px 20px;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: all .3s ease-in;
+  }
+
+  #outdated a:hover {
+    color: rgb(242, 86, 72);
+    background: white;
+  }
+
+  #outdated button {
+    color: white;
+    background: transparent;
+    font-size: 32px;
+    position: absolute;
+    border: 0;
+    right: 60px;
+    top: 10px;
+    cursor: pointer;
+  }
+</style></head><body><div id="outdated">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 40">
+    <g fill="#fff" fill-rule="evenodd">
+      <path d="M14.984 30.96h6.378c1.398-.17 2.472-1.337 2.542-2.774v-9.343c0-.622-.247-1.182-.647-1.589a2.19 2.19 0 0 0-1.867-.638c-1.106.15-1.91 1.148-1.91 2.28v5.883c0 .933-.744 1.689-1.662 1.689h-2.89a2.19 2.19 0 0 0-1.564.657 2.265 2.265 0 0 0-.63 1.88c.133 1.08 1.178 1.955 2.25 1.955m2.872-21.332h-6.378c-1.397.17-2.471 1.337-2.542 2.773v9.344c0 .621.247 1.182.648 1.589a2.19 2.19 0 0 0 1.866.637c1.106-.149 1.91-1.147 1.91-2.28V15.81c0-.933.745-1.689 1.663-1.689h2.89c.61 0 1.163-.252 1.563-.658.461-.47.72-1.143.63-1.878-.133-1.081-1.178-1.956-2.25-1.956"></path>
+      <path d="M18.937.616H7.333C3.283.616 0 3.949 0 8.06v17.82c0 7.756 6.192 14.043 13.83 14.043h12.243c3.51-.287 6.32-3.083 6.69-6.619v-18.65C32.763 6.9 26.573.616 18.937.616m0 4.492c5.184 0 9.402 4.282 9.402 9.546v18.358a2.915 2.915 0 0 1-2.483 2.419H13.83c-5.194 0-9.405-4.276-9.405-9.55V8.06c0-1.631 1.3-2.953 2.908-2.953h11.604m30.789 26.112c-1.495 0-2.967-.383-4.374-1.137a10.286 10.286 0 0 1-3.5-3.055.781.781 0 0 1 .103-1.04l1.68-1.51a.751.751 0 0 1 1.143.165 6.88 6.88 0 0 0 2.282 2.28 5.587 5.587 0 0 0 2.94.827c1.113 0 1.948-.234 2.483-.696.505-.438.751-1.027.751-1.804 0-.86-.262-1.49-.802-1.927-.64-.52-1.71-.993-3.177-1.41-4.318-1.078-6.51-3.172-6.51-6.223 0-1.892.63-3.38 1.872-4.423 1.2-1.008 2.853-1.52 4.917-1.52 1.48 0 2.835.289 4.025.857 1.19.568 2.265 1.448 3.196 2.612a.786.786 0 0 1-.097 1.077l-1.624 1.398a.755.755 0 0 1-.646.166.796.796 0 0 1-.472-.32c-.587-.806-1.23-1.407-1.91-1.785-.674-.373-1.506-.562-2.472-.562-.986 0-1.789.226-2.386.674-.534.4-.793.933-.793 1.63 0 .734.243 1.294.742 1.712.586.49 1.64.923 3.135 1.285 2.03.555 3.625 1.331 4.762 2.315 1.228 1.062 1.85 2.558 1.85 4.444 0 1.175-.302 2.23-.898 3.138-.593.903-1.446 1.612-2.538 2.108-1.058.48-2.297.724-3.682.724m16.105.078c-1.381 0-2.635-.339-3.723-1.006-1.088-.666-1.95-1.605-2.564-2.789-.606-1.168-.913-2.503-.913-3.964 0-1.46.302-2.793.897-3.96.603-1.185 1.462-2.125 2.553-2.794 1.087-.667 2.33-1.005 3.695-1.005 1.176 0 2.225.265 3.118.787.863.505 1.654 1.225 2.354 2.138a.778.778 0 0 1-.132 1.08l-1.377 1.09a.753.753 0 0 1-1.09-.169c-.756-1.112-1.695-1.652-2.873-1.652-.72 0-1.348.18-1.917.55-.566.367-1.016.892-1.338 1.561-.333.692-.501 1.49-.501 2.374 0 .884.168 1.682.501 2.373.326.679.764 1.19 1.338 1.562.57.37 1.197.55 1.917.55.751 0 1.363-.125 1.819-.371.464-.251.895-.629 1.28-1.124a.748.748 0 0 1 1.053-.183l1.458 1.034a.78.78 0 0 1 .157 1.115 7.545 7.545 0 0 1-2.492 2.035 6.98 6.98 0 0 1-3.22.768m13.924-12.244c-.72 0-1.34.179-1.9.547-.56.368-1.007.89-1.329 1.554-.332.68-.5 1.474-.5 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.372 1.012-.884 1.338-1.561.332-.692.5-1.49.5-2.374.001-.883-.167-1.682-.5-2.374-.322-.668-.772-1.194-1.338-1.562-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.607-.337-3.696-1.005-1.088-.666-1.95-1.604-2.564-2.788-.606-1.17-.913-2.512-.913-3.993 0-1.461.302-2.79.898-3.949.603-1.174 1.457-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.12 6.12 0 0 1 2.93.719c.298.16.584.346.854.554v-.055c0-.426.34-.77.759-.77h1.872c.419 0 .759.344.759.77v13.082c0 .425-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.326 6.326 0 0 1-.837.544 5.965 5.965 0 0 1-2.891.72m10.308-.515a.765.765 0 0 1-.759-.77l.001-19.494c0-.425.34-.77.759-.77h1.872c.419 0 .759.345.759.77v19.494c0 .425-.34.77-.76.77h-1.872zm32.694.069a.757.757 0 0 1-.723-.538l-2.443-7.81-2.642 7.827a.76.76 0 0 1-.717.52h-1.872a.76.76 0 0 1-.721-.529l-4.24-13.083a.777.777 0 0 1 .444-.96.768.768 0 0 1 .296-.05h1.963a.76.76 0 0 1 .722.533l2.588 8.145 2.632-8.148a.76.76 0 0 1 .72-.53h1.818c.331 0 .621.215.723.536l2.528 8.05 2.551-8.052a.758.758 0 0 1 .722-.535h1.777c.1 0 .202.016.296.055.392.166.555.59.438.954l-4.185 13.082a.757.757 0 0 1-.72.533h-1.955zm14.437-11.797c-.72 0-1.341.18-1.9.547-.56.369-1.007.891-1.33 1.554-.33.681-.499 1.474-.499 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.373 1.011-.883 1.337-1.562.333-.69.501-1.49.501-2.373 0-.883-.168-1.682-.5-2.374-.323-.668-.772-1.194-1.338-1.561-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.608-.338-3.696-1.005-1.088-.667-1.95-1.605-2.564-2.79-.606-1.168-.913-2.512-.913-3.992 0-1.46.302-2.79.898-3.949.603-1.173 1.456-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.117 6.117 0 0 1 3.783 1.273v-.055c0-.426.34-.77.76-.77h1.871c.42 0 .76.344.76.77v13.082c0 .426-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.373 6.373 0 0 1-.838.545 5.98 5.98 0 0 1-2.89.72m-37.823-11.31c.62-.628 1.403-.934 2.395-.934 1.04 0 1.825.266 2.4.812.426.404.743.985.944 1.729h-6.74a4.28 4.28 0 0 1 1.001-1.607zm7.12 6.239a.826.826 0 0 0-1.116.151c-.32.385-.762.86-1.217 1.118-.608.345-1.401.528-2.364.528-1.134 0-1.997-.377-2.64-1.152a4.702 4.702 0 0 1-1.02-2.172h9.745a.76.76 0 0 0 .755-.694c.02-.214.03-.512.03-.886 0-1.354-.299-2.602-.89-3.708a6.873 6.873 0 0 0-2.475-2.654c-1.053-.649-2.241-.978-3.533-.978-1.364 0-2.604.339-3.684 1.007-1.08.67-1.933 1.608-2.536 2.792-.596 1.167-.898 2.5-.898 3.96 0 1.462.308 2.796.914 3.965.614 1.184 1.476 2.122 2.564 2.788 1.088.668 2.342 1.006 3.724 1.006 1.479 0 2.795-.294 3.887-.919a7.619 7.619 0 0 0 2.284-1.984.862.862 0 0 0-.19-1.218l-1.34-.95zm52.815-9.893a.77.77 0 0 0-.41-.107h-1.74a.763.763 0 0 0-.707.494l-3.637 9.552-3.46-9.563a.754.754 0 0 0-.705-.485h-1.954a.754.754 0 0 0-.63.34.78.78 0 0 0-.074.718l5.078 13.578h.007c-.15.605-.395 1.021-.735 1.25-.478.321-1.375.364-1.87.396a.83.83 0 0 0-.775.833v1.308c0 .462.369.837.823.835.795-.003 2.066.077 3.058-.455 2.043-1.097 2.35-2.456 2.923-4l5.13-13.757a.778.778 0 0 0-.322-.937"></path>
+    </g>
+  </svg>
+  <h6>We are sorry, this app can not be run with an old version of web browser.</h6>
+  <p>
+    <strong>Please update your browser to a more recent version.</strong>
+  </p><p>The Scaleway Team</p>
+  <a target="_blank" rel="noopener noreferrer" href="https://browsehappy.com/">Update my browser now</a>
+  <button type="button" onclick="document.getElementById('outdated').remove()">×</button>
+</div></body>"
+`;
+
+exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is defined and match userAgent  1`] = `"<head></head><body></body>"`;
+
+exports[`@outdated-browser render nothing if SUPPORTED_BROWSER is nil 1`] = `"<head></head><body></body>"`;
diff --git a/packages/outdated-browser/src/__tests__/index.ts b/packages/outdated-browser/src/__tests__/index.ts
@@ -0,0 +1,51 @@
+/**
+ * @jest-environment jsdom
+ */
+
+describe('@outdated-browser', () => {
+  const originUA = global.navigator.userAgent
+  let fakeUA: string | undefined
+
+  beforeAll(() => {
+    Object.defineProperty(global.navigator, 'userAgent', {
+      get() {
+        return fakeUA ?? originUA
+      },
+    })
+  })
+
+  afterEach(() => {
+    jest.resetModules()
+    jest.restoreAllMocks()
+    fakeUA = undefined
+  })
+
+  test('render nothing if SUPPORTED_BROWSER is nil', () => {
+    // @ts-expect-error global mock
+    global.SUPPORTED_BROWSERS = ''
+
+    return import('..').then(() => {
+      expect(document.documentElement.innerHTML).toMatchSnapshot()
+    })
+  })
+
+  test('render nothing if SUPPORTED_BROWSER is defined and match userAgent ', () => {
+    fakeUA = 'a'
+    // @ts-expect-error global mock
+    global.SUPPORTED_BROWSERS = 'a'
+
+    return import('..').then(() => {
+      expect(document.documentElement.innerHTML).toMatchSnapshot()
+    })
+  })
+
+  test('render banner if SUPPORTED_BROWSER is defined and does not mtch userAgen ', () => {
+    fakeUA = 'b'
+    // @ts-expect-error global mock
+    global.SUPPORTED_BROWSERS = 'a'
+
+    return import('..').then(() => {
+      expect(document.documentElement.innerHTML).toMatchSnapshot()
+    })
+  })
+})
diff --git a/packages/outdated-browser/src/index.ts b/packages/outdated-browser/src/index.ts
@@ -0,0 +1,80 @@
+const content = `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 40">
+    <g fill="#fff" fill-rule="evenodd">
+      <path d="M14.984 30.96h6.378c1.398-.17 2.472-1.337 2.542-2.774v-9.343c0-.622-.247-1.182-.647-1.589a2.19 2.19 0 0 0-1.867-.638c-1.106.15-1.91 1.148-1.91 2.28v5.883c0 .933-.744 1.689-1.662 1.689h-2.89a2.19 2.19 0 0 0-1.564.657 2.265 2.265 0 0 0-.63 1.88c.133 1.08 1.178 1.955 2.25 1.955m2.872-21.332h-6.378c-1.397.17-2.471 1.337-2.542 2.773v9.344c0 .621.247 1.182.648 1.589a2.19 2.19 0 0 0 1.866.637c1.106-.149 1.91-1.147 1.91-2.28V15.81c0-.933.745-1.689 1.663-1.689h2.89c.61 0 1.163-.252 1.563-.658.461-.47.72-1.143.63-1.878-.133-1.081-1.178-1.956-2.25-1.956" />
+      <path d="M18.937.616H7.333C3.283.616 0 3.949 0 8.06v17.82c0 7.756 6.192 14.043 13.83 14.043h12.243c3.51-.287 6.32-3.083 6.69-6.619v-18.65C32.763 6.9 26.573.616 18.937.616m0 4.492c5.184 0 9.402 4.282 9.402 9.546v18.358a2.915 2.915 0 0 1-2.483 2.419H13.83c-5.194 0-9.405-4.276-9.405-9.55V8.06c0-1.631 1.3-2.953 2.908-2.953h11.604m30.789 26.112c-1.495 0-2.967-.383-4.374-1.137a10.286 10.286 0 0 1-3.5-3.055.781.781 0 0 1 .103-1.04l1.68-1.51a.751.751 0 0 1 1.143.165 6.88 6.88 0 0 0 2.282 2.28 5.587 5.587 0 0 0 2.94.827c1.113 0 1.948-.234 2.483-.696.505-.438.751-1.027.751-1.804 0-.86-.262-1.49-.802-1.927-.64-.52-1.71-.993-3.177-1.41-4.318-1.078-6.51-3.172-6.51-6.223 0-1.892.63-3.38 1.872-4.423 1.2-1.008 2.853-1.52 4.917-1.52 1.48 0 2.835.289 4.025.857 1.19.568 2.265 1.448 3.196 2.612a.786.786 0 0 1-.097 1.077l-1.624 1.398a.755.755 0 0 1-.646.166.796.796 0 0 1-.472-.32c-.587-.806-1.23-1.407-1.91-1.785-.674-.373-1.506-.562-2.472-.562-.986 0-1.789.226-2.386.674-.534.4-.793.933-.793 1.63 0 .734.243 1.294.742 1.712.586.49 1.64.923 3.135 1.285 2.03.555 3.625 1.331 4.762 2.315 1.228 1.062 1.85 2.558 1.85 4.444 0 1.175-.302 2.23-.898 3.138-.593.903-1.446 1.612-2.538 2.108-1.058.48-2.297.724-3.682.724m16.105.078c-1.381 0-2.635-.339-3.723-1.006-1.088-.666-1.95-1.605-2.564-2.789-.606-1.168-.913-2.503-.913-3.964 0-1.46.302-2.793.897-3.96.603-1.185 1.462-2.125 2.553-2.794 1.087-.667 2.33-1.005 3.695-1.005 1.176 0 2.225.265 3.118.787.863.505 1.654 1.225 2.354 2.138a.778.778 0 0 1-.132 1.08l-1.377 1.09a.753.753 0 0 1-1.09-.169c-.756-1.112-1.695-1.652-2.873-1.652-.72 0-1.348.18-1.917.55-.566.367-1.016.892-1.338 1.561-.333.692-.501 1.49-.501 2.374 0 .884.168 1.682.501 2.373.326.679.764 1.19 1.338 1.562.57.37 1.197.55 1.917.55.751 0 1.363-.125 1.819-.371.464-.251.895-.629 1.28-1.124a.748.748 0 0 1 1.053-.183l1.458 1.034a.78.78 0 0 1 .157 1.115 7.545 7.545 0 0 1-2.492 2.035 6.98 6.98 0 0 1-3.22.768m13.924-12.244c-.72 0-1.34.179-1.9.547-.56.368-1.007.89-1.329 1.554-.332.68-.5 1.474-.5 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.372 1.012-.884 1.338-1.561.332-.692.5-1.49.5-2.374.001-.883-.167-1.682-.5-2.374-.322-.668-.772-1.194-1.338-1.562-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.607-.337-3.696-1.005-1.088-.666-1.95-1.604-2.564-2.788-.606-1.17-.913-2.512-.913-3.993 0-1.461.302-2.79.898-3.949.603-1.174 1.457-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.12 6.12 0 0 1 2.93.719c.298.16.584.346.854.554v-.055c0-.426.34-.77.759-.77h1.872c.419 0 .759.344.759.77v13.082c0 .425-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.326 6.326 0 0 1-.837.544 5.965 5.965 0 0 1-2.891.72m10.308-.515a.765.765 0 0 1-.759-.77l.001-19.494c0-.425.34-.77.759-.77h1.872c.419 0 .759.345.759.77v19.494c0 .425-.34.77-.76.77h-1.872zm32.694.069a.757.757 0 0 1-.723-.538l-2.443-7.81-2.642 7.827a.76.76 0 0 1-.717.52h-1.872a.76.76 0 0 1-.721-.529l-4.24-13.083a.777.777 0 0 1 .444-.96.768.768 0 0 1 .296-.05h1.963a.76.76 0 0 1 .722.533l2.588 8.145 2.632-8.148a.76.76 0 0 1 .72-.53h1.818c.331 0 .621.215.723.536l2.528 8.05 2.551-8.052a.758.758 0 0 1 .722-.535h1.777c.1 0 .202.016.296.055.392.166.555.59.438.954l-4.185 13.082a.757.757 0 0 1-.72.533h-1.955zm14.437-11.797c-.72 0-1.341.18-1.9.547-.56.369-1.007.891-1.33 1.554-.33.681-.499 1.474-.499 2.356 0 .902.169 1.71.502 2.401.326.68.76 1.192 1.327 1.565.559.368 1.18.547 1.9.547.74 0 1.376-.18 1.945-.55.574-.373 1.011-.883 1.337-1.562.333-.69.501-1.49.501-2.373 0-.883-.168-1.682-.5-2.374-.323-.668-.772-1.194-1.338-1.561-.569-.37-1.205-.55-1.945-.55m.055 12.244c-1.364 0-2.608-.338-3.696-1.005-1.088-.667-1.95-1.605-2.564-2.79-.606-1.168-.913-2.512-.913-3.992 0-1.46.302-2.79.898-3.949.603-1.173 1.456-2.107 2.535-2.775 1.08-.668 2.32-1.007 3.685-1.007a6.117 6.117 0 0 1 3.783 1.273v-.055c0-.426.34-.77.76-.77h1.871c.42 0 .76.344.76.77v13.082c0 .426-.34.77-.76.77h-1.872a.765.765 0 0 1-.759-.77v-.047a6.373 6.373 0 0 1-.838.545 5.98 5.98 0 0 1-2.89.72m-37.823-11.31c.62-.628 1.403-.934 2.395-.934 1.04 0 1.825.266 2.4.812.426.404.743.985.944 1.729h-6.74a4.28 4.28 0 0 1 1.001-1.607zm7.12 6.239a.826.826 0 0 0-1.116.151c-.32.385-.762.86-1.217 1.118-.608.345-1.401.528-2.364.528-1.134 0-1.997-.377-2.64-1.152a4.702 4.702 0 0 1-1.02-2.172h9.745a.76.76 0 0 0 .755-.694c.02-.214.03-.512.03-.886 0-1.354-.299-2.602-.89-3.708a6.873 6.873 0 0 0-2.475-2.654c-1.053-.649-2.241-.978-3.533-.978-1.364 0-2.604.339-3.684 1.007-1.08.67-1.933 1.608-2.536 2.792-.596 1.167-.898 2.5-.898 3.96 0 1.462.308 2.796.914 3.965.614 1.184 1.476 2.122 2.564 2.788 1.088.668 2.342 1.006 3.724 1.006 1.479 0 2.795-.294 3.887-.919a7.619 7.619 0 0 0 2.284-1.984.862.862 0 0 0-.19-1.218l-1.34-.95zm52.815-9.893a.77.77 0 0 0-.41-.107h-1.74a.763.763 0 0 0-.707.494l-3.637 9.552-3.46-9.563a.754.754 0 0 0-.705-.485h-1.954a.754.754 0 0 0-.63.34.78.78 0 0 0-.074.718l5.078 13.578h.007c-.15.605-.395 1.021-.735 1.25-.478.321-1.375.364-1.87.396a.83.83 0 0 0-.775.833v1.308c0 .462.369.837.823.835.795-.003 2.066.077 3.058-.455 2.043-1.097 2.35-2.456 2.923-4l5.13-13.757a.778.778 0 0 0-.322-.937"/>
+    </g>
+  </svg>
+  <h6>We are sorry, this app can not be run with an old version of web browser.</h6>
+  <p>
+    <strong>Please update your browser to a more recent version.</strong>
+  </p><p>The Scaleway Team</p>
+  <a target="_blank" rel="noopener noreferrer" href="https://browsehappy.com/">Update my browser now</a>
+  <button type="button" onclick="document.getElementById('outdated').remove()">×</button>
+`
+
+const style = `
+  #outdated {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    display: flex;
+    gap: 16px;
+    background: rgba(242, 86, 72, 0.95);
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 16px;
+    color: white;
+    font-family: 'Open Sans', 'Segoe UI', sans-serif;
+  }
+
+  #outdated svg {
+    max-width: 300px;
+  }
+
+  #outdated a {
+    color: white;
+    border: 1px solid white;
+    border-radius: 4px;
+    background: transparent;
+    padding: 10px 20px;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: all .3s ease-in;
+  }
+
+  #outdated a:hover {
+    color: rgb(242, 86, 72);
+    background: white;
+  }
+
+  #outdated button {
+    color: white;
+    background: transparent;
+    font-size: 32px;
+    position: absolute;
+    border: 0;
+    right: 60px;
+    top: 10px;
+    cursor: pointer;
+  }
+`
+
+declare const SUPPORTED_BROWSERS: string
+
+if (
+  SUPPORTED_BROWSERS &&
+  !new RegExp(SUPPORTED_BROWSERS).test(navigator.userAgent)
+) {
+  const styleElement = document.createElement('style')
+  styleElement.innerHTML = style
+  document.head.append(styleElement)
+
+  const element = document.createElement('div')
+  element.setAttribute('id', 'outdated')
+  element.innerHTML = content
+  document.body.prepend(element)
+}
+
+export {}