feat(riot-mui): upgrade riot mui and all dependencies (#279)

I [forked riot-mui](https://github.com/Joxit/riot-5-mui) in 2021 to be compatible with [riot.js 5+](https://riot.js.org/) because they change a lot of stuff. This was bundled in 2.0.0 of docker-registry-ui (see #176) Now im improving riot-mui's DX to be more component oriented and add new features in the library. Major changes: * CTRL + click on buttons (catalog <=> taglist; taglist <=> tag-history) * Fix history multi-arch tabs * Fix tag list pagination (creation date missing) This is still a work in progress but I'm integrating this in Docker-Registry-UI. It will help to have new features like dark mode or custom UI. Stay tuned!
Joxit · Dec 31, 2022 · a0dcc84 · a0dcc84
2 parents 017f662 + 1e08561
commit a0dcc84
Show file tree

Hide file tree

Showing 21 changed files with 277 additions and 251 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "docker-registry-ui",
   "version": "2.3.3",
+  "type": "module",
   "scripts": {
     "format": "npm run format-html && npm run format-js && npm run format-riot",
     "format-html": "find src rollup rollup.config.js -name '*.html' -exec prettier --config .prettierrc -w --parser html {} \\;",
@@ -18,28 +19,28 @@
   "license": "AGPL-3.0",
   "description": "A web UI for private docker registry",
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/preset-env": "^7.16.0",
-    "@riotjs/compiler": "^6.1.3",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@riotjs/compiler": "^6.4.2",
     "@riotjs/observable": "^4.1.1",
-    "@riotjs/route": "^8.0.1",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-commonjs": "^21.1.0",
-    "@rollup/plugin-html": "^0.2.4",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
-    "core-js": "^3.22.0",
-    "node-sass": "^7.0.1",
-    "prettier": "^2.6.2",
-    "riot": "^6.1.2",
-    "riot-mui": "github:joxit/riot-5-mui#4d68d7f",
-    "rollup": "^2.70.2",
+    "@riotjs/route": "^8.0.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-html": "^1.0.1",
+    "@rollup/plugin-json": "^5.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "core-js": "^3.26.1",
+    "node-sass": "^8.0.0",
+    "prettier": "^2.8.0",
+    "riot": "^7.1.0",
+    "riot-mui": "github:joxit/riot-5-mui#a9b0ce4",
+    "rollup": "^3.5.1",
     "rollup-plugin-app-utils": "^1.0.6",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-riot": "^6.0.0",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-serve": "^2.0.2",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2"
   }

diff --git a/rollup.config.js b/rollup.config.js
@@ -7,12 +7,12 @@ import { babel } from '@rollup/plugin-babel';
 import scss from 'rollup-plugin-scss';
 import serve from 'rollup-plugin-serve';
 import html from '@rollup/plugin-html';
-import htmlUseref from './rollup/html-useref';
+import htmlUseref from './rollup/html-useref.js';
 import json from '@rollup/plugin-json';
 import copy from 'rollup-plugin-copy';
-import copyTransform from './rollup/copy-transform';
-import license from './rollup/license';
-import checkOutput from './rollup/check-output';
+import copyTransform from './rollup/copy-transform.js';
+import license from './rollup/license.js';
+import checkOutput from './rollup/check-output.js';
 
 const useServe = process.env.ROLLUP_SERVE === 'true';
 const output = useServe ? '.serve' : 'dist';
@@ -22,7 +22,7 @@ const plugins = [
   json(),
   nodeResolve(),
   commonjs(),
-  scss({ output: `./${output}/docker-registry-ui.css`, outputStyle: 'compressed' }),
+  scss({ fileName: `docker-registry-ui.css`, outputStyle: 'compressed' }),
   babel({ babelHelpers: 'bundled', presets: [['@babel/env', { useBuiltIns: 'usage', corejs: { version: '2' } }]] }),
   copy({
     targets: [

diff --git a/src/components/catalog/catalog-element.riot b/src/components/catalog/catalog-element.riot
@@ -21,7 +21,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     if="{!props.filterResults || state.nImages > 0 || matchSearch(props.filterResults, state.image)}"
   >
     <material-card class="list highlight" expanded="{state.expanded}" onclick="{ onClick }">
-      <material-waves center="true" color="#ddd"></material-waves>
+      <a if="{ state.image }" href="{ router.taglist(state.image) }">
+        <material-waves center="true" color="#ddd"></material-waves>
+      </a>
+      <material-waves if="{ state.images }" center="true" color="#ddd"></material-waves>
       <span>
         <i class="material-icons">send</i>
         { state.image || state.repo }
@@ -76,9 +79,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       },
       onClick() {
         const state = this.state;
-        if (!state.repo) {
-          router.taglist(state.image);
-        } else {
+        if (state.repo) {
           this.update({
             expanded: !this.state.expanded,
             expanding: true,
@@ -112,6 +113,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         oReq.send();
       },
       matchSearch,
+      router,
     };
   </script>
   <!-- End of tag -->

diff --git a/src/components/dialogs/add-registry-url.riot b/src/components/dialogs/add-registry-url.riot
@@ -16,16 +16,16 @@
 -->
 <add-registry-url>
   <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
-    <div slot="title">Add your Server ?</div>
-    <div slot="content">
-      <material-input onkeyup="{ onKeyUp }" placeholder="Server URL"></material-input>
+    <div class="material-popup-title">Add your Server ?</div>
+    <div class="material-popup-content">
+      <material-input onkeyup="{ onKeyUp }" label="Server URL" label-color="#666" valid="{ registryUrlValidator }"></material-input>
       <span>Write your URL without /v2</span>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ add }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ add }" color="#000" inverted>
         Add
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
         Cancel
       </material-button>
     </div>
@@ -55,6 +55,9 @@
         this.props.onClose();
         setTimeout(() => router.updateUrlQueryParam(url), 100);
       },
+      registryUrlValidator(input) {
+        return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input)
+      }
     };
   </script>
 </add-registry-url>
diff --git a/src/components/dialogs/change-registry-url.riot b/src/components/dialogs/change-registry-url.riot
@@ -15,18 +15,18 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <change-registry-url>
-  <material-popup opened="{ props.opened }" onClick="{ props.onClick }">
-    <div slot="title">Change your Server ?</div>
-    <div slot="content">
+  <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
+    <div class="material-popup-title">Change your Server ?</div>
+    <div class="material-popup-content">
       <select>
         <option each="{ url in getRegistryServers() }" value="{ url }">{ url }</option>
       </select>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }" color="#000" inverted>
         Change
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
         Cancel
       </material-button>
     </div>
@@ -62,6 +62,7 @@
       background: 0 0;
       border: none;
       font-weight: 400;
+      font-size: 1em;
       line-height: 24px;
       height: 24px;
       border-bottom: 1px solid #2f6975;

diff --git a/src/components/dialogs/confirm-delete-image.riot b/src/components/dialogs/confirm-delete-image.riot
@@ -16,17 +16,17 @@
 -->
 <confirm-delete-image>
   <material-popup opened="{ props.opened }" onClick="{ props.onClick }">
-    <div slot="title">These images will be deleted</div>
-    <div slot="content">
+    <div class="material-popup-title">These images will be deleted</div>
+    <div class="material-popup-content">
       <ul>
         <li each="{ image in displayImagesToDelete(props.toDelete, props.tags) }">{ image.name }:{ image.tag }</li>
       </ul>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ deleteImages }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ deleteImages }" color="#000" inverted>
         Delete
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClick }">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClick }" color="#000" inverted>
         Cancel
       </material-button>
     </div>

diff --git a/src/components/dialogs/dialogs-menu.riot b/src/components/dialogs/dialogs-menu.riot
@@ -35,15 +35,23 @@
     on-notify="{ props.onNotify }"
     on-server-change="{ props.onServerChange }"
   ></remove-registry-url>
-  <div class="container">
-    <material-button onClick="{ onClick }" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
+  <div class="material-dropdown-wrapper">
+    <material-button
+      onClick="{ onClick }"
+      waves-center="true"
+      waves-opacity="0.6"
+      waves-duration="600"
+      color="rgba(0,0,0,0)"
+      text-color="#fff"
+      icon
+    >
       <i class="material-icons">more_vert</i>
     </material-button>
-    <material-dropdown-list
+    <material-dropdown
       items="{ dropdownItems.filter(item => item.ro || !props.readOnlyRegistries) }"
-      onSelect="{ onDropdownSelect }"
+      on-click="{ onDropdownSelect }"
       opened="{ state.isDropdownOpened }"
-    />
+    ></material-dropdown>
   </div>
   <div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
   <script>
@@ -74,9 +82,9 @@
           ro: false,
         },
       ],
-      onDropdownSelect(key, item) {
+      onDropdownSelect(event) {
         this.update({
-          [item.name]: true,
+          [event.target.item]: true,
           isDropdownOpened: false,
         });
       },
@@ -96,15 +104,17 @@
     };
   </script>
   <style>
-    :host > .container {
-      position: absolute;
-      top: 0px;
-      right: 16px;
+    :host > .material-dropdown-wrapper {
       color: #000;
       list-style-type: disc;
       margin-block-start: 0.7em;
     }
 
+    :host .material-dropdown-wrapper material-dropdown .material-dropdown-container {
+      right: 0;
+      top: 2em;
+    }
+
     :host .overlay {
       position: fixed;
       height: 100%;
@@ -114,33 +124,15 @@
       z-index: 10;
     }
 
-    :host material-button {
-      background: rgba(255, 255, 255, 0);
+    :host material-button button {
       float: right;
       z-index: 2;
     }
 
     :host material-button .content i.material-icons {
-      color: #fff;
       font-size: 24px;
     }
 
-    :host material-dropdown-list {
-      display: inline-block;
-      position: relative;
-    }
-
-    :host material-dropdown-list ul.dropdown-content {
-      min-width: 156px;
-      padding: 8px 0;
-      margin: 0;
-    }
-
-    :host material-dropdown-list ul.dropdown-content li span {
-      font-size: 1rem;
-      line-height: 1.2em;
-    }
-
     :host material-popup * {
       line-height: 1em;
     }

diff --git a/src/components/dialogs/remove-registry-url.riot b/src/components/dialogs/remove-registry-url.riot
@@ -16,17 +16,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove-registry-url>
   <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
-    <div slot="title">Remove your Registry Server ?</div>
-    <div slot="content">
+    <div class="material-popup-title">Remove your Registry Server ?</div>
+    <div class="material-popup-content">
       <ul class="list">
         <li each="{ url in getRegistryServers() }">
           <span>
             <material-button
-              onClick="{ remove }"
+              onClick="{ remove(url) }"
               url="{ url }"
-              rounded="true"
               waves-color="rgba(158,158,158,.4)"
               waves-center="true"
+              inverted
+              icon
             >
               <i class="material-icons">delete</i>
             </material-button>
@@ -35,19 +36,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         </li>
       </ul>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
         Close
       </material-button>
     </div>
   </material-popup>
   <script>
     import { getRegistryServers, removeRegistryServers } from '../../scripts/utils';
     export default {
-      remove(event) {
-        const url = event.currentTarget.attributes.url && event.currentTarget.attributes.url.value;
-        removeRegistryServers(url);
-        setTimeout(() => this.update(), 100);
+      remove(url) {
+        return (event) => {
+          console.log(url, event)
+          removeRegistryServers(url);
+          setTimeout(() => this.update(), 100);
+        }
       },
       getRegistryServers,
     };