feat: add option for default registries when SINGLE_REGISTRY=false

src/components/dialogs/add-registry-url.riot

@@ -32,7 +32,7 @@
   </material-popup>
   <script>
     import {
-      getRegistryServers
+      addRegistryServers
     } from '../../scripts/utils';
     import router from '../../scripts/router';
 
@@ -51,9 +51,7 @@
         if (!input.value.startsWith('http')) {
           return this.props.onNotify('The input field should start with http:// or https://.', true);
         }
-        const url = input.value.trim().replace(/\/*$/, '');
+        const url = addRegistryServers(input.value);
-        const registryServer = getRegistryServers().filter(e => e !== url);
-        localStorage.setItem('registryServer', JSON.stringify([url].concat(registryServer)));
         router.home()
         this.props.onServerChange(url);
         this.props.onClose()

src/components/dialogs/change-registry-url.riot

@@ -33,6 +33,7 @@
   </material-popup>
   <script>
     import {
+      addRegistryServers,
       getRegistryServers
     } from '../../scripts/utils';
     import router from '../../scripts/router';
@@ -45,9 +46,7 @@
         if (!select.value.startsWith('http')) {
           return this.props.onNotify('The select field should start with http:// or https://.', true);
         }
-        const url = select.value.trim().replace(/\/*$/, '');
+        const url = addRegistryServers(select.value);
-        const registryServer = getRegistryServers().filter(e => e !== url);
-        localStorage.setItem('registryServer', JSON.stringify([url].concat(registryServer)));
         router.home()
         this.props.onServerChange(url);
         this.props.onClose()

src/components/dialogs/remove-registry-url.riot

@@ -38,13 +38,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   </material-popup>
   <script>
     import {
-      getRegistryServers
+      getRegistryServers,
+      removeRegistryServers
     } from '../../scripts/utils';
     export default {
       remove(event) {
         const url = event.currentTarget.attributes.url && event.currentTarget.attributes.url.value;
-        const registryServer = getRegistryServers().filter(e => e !== url);
+        removeRegistryServers(url);
-        localStorage.setItem('registryServer', JSON.stringify(registryServer));
         setTimeout(() => this.update(), 100);
       },
       getRegistryServers

src/components/docker-registry-ui.riot

@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <div class="logo">Docker Registry UI</div>
       <search-bar on-search="{ onSearch }"></search-bar>
       <dialogs-menu if="{props.singleRegistry !== 'true'}" on-notify="{ notifySnackbar }"
-        on-server-change="{ onServerChange }"></dialogs-menu>
+        on-server-change="{ onServerChange }" default-registries="{ props.defaultRegistries }"></dialogs-menu>
     </material-navbar>
   </header>
   <main>
@@ -77,6 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import {
       stripHttps,
       getRegistryServers,
+      setRegistryServers,
       truthy
     } from '../scripts/utils';
     import router from '../scripts/router';
@@ -96,6 +97,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         state.snackbarMessage = undefined;
       },
       onBeforeMount(props) {
+        if (props.defaultRegistries && props.defaultRegistries.length > 0) {
+          setRegistryServers(props.defaultRegistries);
+        }
+
         // props.singleRegistry === 'true' means old static version 
         const registryUrl = props.registryUrl ||
           (props.singleRegistry === 'true' ? undefined : (router.getUrlQueryParam() || getRegistryServers(0))) ||

src/index.html

@@ -37,7 +37,8 @@
   <!-- build:keep production -->
   <docker-registry-ui registry-url="${REGISTRY_URL}" name="${REGISTRY_TITLE}" pull-url="${PULL_URL}"
     show-content-digest="${SHOW_CONTENT_DIGEST}" is-image-remove-activated="${DELETE_IMAGES}"
-    catalog-elements-limit="${CATALOG_ELEMENTS_LIMIT}" single-registry="${SINGLE_REGISTRY}">
+    catalog-elements-limit="${CATALOG_ELEMENTS_LIMIT}" single-registry="${SINGLE_REGISTRY}"
+    default-registries="${DEFAULT_REGISTRIES}">
   </docker-registry-ui>
   <!-- endbuild -->
   <!-- build:keep developement -->

src/scripts/utils.js

@@ -1,3 +1,5 @@
+const LOCAL_STORAGE_KEY = 'registryServer';
+
 export function bytesToSize(bytes) {
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == undefined || isNaN(bytes)) {
@@ -152,7 +154,7 @@ export const ERROR_CAN_NOT_READ_CONTENT_DIGEST = {
 
 export function getRegistryServers(i) {
   try {
-    const res = JSON.parse(localStorage.getItem('registryServer'));
+    const res = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
     if (res instanceof Array) {
       return !isNaN(i) ? res[i] : res.map((url) => url.trim().replace(/\/*$/, ''));
     }
@@ -160,6 +162,28 @@ export function getRegistryServers(i) {
   return !isNaN(i) ? '' : [];
 }
 
+export function setRegistryServers(registries) {
+  if (typeof registries === 'string') {
+    registries = registries.split(',');
+  } else if (!Array.isArray(registries)) {
+    throw new Error('setRegistries must be called with string or array parameter');
+  }
+  registries = registries.map((registry) => registry.replace(/\/*$/, ''));
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(registries));
+}
+
+export function addRegistryServers(registry) {
+  const url = registry.trim().replace(/\/*$/, '');
+  const registryServer = getRegistryServers().filter((e) => e !== url);
+  setRegistryServers([url].concat(registryServer));
+  return url;
+}
+
+export function removeRegistryServers(registry) {
+  const registryServers = getRegistryServers().filter((e) => e !== registry);
+  setRegistryServers(registryServers);
+}
+
 export function encodeURI(url) {
   if (!url) {
     return;
@@ -175,5 +199,5 @@ export function decodeURI(url) {
 }
 
 export function truthy(value) {
-  return value === true || value === "true";
+  return value === true || value === 'true';
 }