feature: allow to hide tag history to simplify the user interface

I would like to use docker-registry-ui to inform users about the available
tags for our images. The users of this interface are not interested in the
technical backgrounds how it works and I worry that it would confuse them.

Note: One needs to be aware, that this is data is available nonetheless. This
is only a user interface switch for hiding the button.

Author: lukengda

README.md

@@ -119,7 +119,7 @@ Some env options are available for use this interface for **only one server** (w
 - `CATALOG_MAX_BRANCHES`: Set the maximum repository/namespace to expand (e.g. `joxit/docker-registry-ui` `joxit/` is the repository/namespace). Can be 0 to disable branching. (see [#319](https://github.com/Joxit/docker-registry-ui/pull/319)). (default: `1`). Since 2.5.0
 - `TAGLIST_PAGE_SIZE`: Set the number of tags to display in one page. (default: `100`). Since 2.5.0
 - `REGISTRY_SECURED`: By default, the UI will check on every requests if your registry is secured or not (you will see `401` responses in your console). Set to `true` if your registry uses Basic Authentication and divide by two the number of call to your registry. (default `false`). Since 2.5.0
-
+- `SHOW_TAG_HISTORY`: Whether to show the tag history feature or not. Allows to simplify the user interface by hiding it form the tag list if set to `false`. (default: `true`).
 There are some examples with [docker-compose](https://docs.docker.com/compose/) and docker-registry-ui as proxy [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-proxy/) or docker-registry-ui as standalone [here](https://github.com/Joxit/docker-registry-ui/tree/main/examples/ui-as-standalone/).
 
 ### Theme options

bin/90-docker-registry-ui.sh

@@ -6,6 +6,7 @@ sed -i "s~\${PULL_URL}~${PULL_URL}~" index.html
 sed -i "s~\${SINGLE_REGISTRY}~${SINGLE_REGISTRY}~" index.html
 sed -i "s~\${CATALOG_ELEMENTS_LIMIT}~${CATALOG_ELEMENTS_LIMIT}~" index.html
 sed -i "s~\${SHOW_CONTENT_DIGEST}~${SHOW_CONTENT_DIGEST}~" index.html
+sed -i "s~\${SHOW_TAG_HISTORY}~${SHOW_TAG_HISTORY}~" index.html
 sed -i "s~\${DEFAULT_REGISTRIES}~${DEFAULT_REGISTRIES}~" index.html
 sed -i "s~\${READ_ONLY_REGISTRIES}~${READ_ONLY_REGISTRIES}~" index.html
 sed -i "s~\${SHOW_CATALOG_NB_TAGS}~${SHOW_CATALOG_NB_TAGS}~" index.html

src/components/docker-registry-ui.riot

@@ -72,6 +72,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           pull-url="{ state.pullUrl }"
           image="{ router.getTagListImage() }"
           show-content-digest="{ truthy(props.showContentDigest) }"
+          show-tag-history="{ falsy(props.showTagHistory) }"
           is-image-remove-activated="{ truthy(props.isImageRemoveActivated) }"
           on-notify="{ notifySnackbar }"
           filter-results="{ state.filter }"
@@ -146,7 +147,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import SearchBar from './search-bar.riot';
     import ErrorPage from './error-page.riot';
     import VersionNotification from './version-notification.riot';
-    import { stripHttps, getRegistryServers, setRegistryServers, truthy, stringToArray } from '../scripts/utils';
+    import { stripHttps, getRegistryServers, setRegistryServers, truthy, falsy, stringToArray } from '../scripts/utils';
     import router from '../scripts/router';
     import { loadTheme } from '../scripts/theme';
 
@@ -262,6 +263,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       version,
       latest,
       truthy,
+      falsy,
       stringToArray,
     };
   </script>

src/components/tag-list/tag-list.riot

@@ -50,6 +50,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     asc="{state.asc}"
     page="{ state.page }"
     show-content-digest="{props.showContentDigest}"
+    show-tag-history="{props.showTagHistory}"
     is-image-remove-activated="{props.isImageRemoveActivated}"
     onReverseOrder="{ onReverseOrder }"
     registry-url="{ props.registryUrl }"

src/components/tag-list/tag-table.riot

@@ -52,7 +52,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             Tag
           </th>
           <th class="architectures">Arch</th>
-          <th class="show-tag-history">History</th>
+          <th class="show-tag-history" if="{ props.showTagHistory }">History</th>
           <th
             class="remove-tag { state.toDelete.size > 0 && !state.singleDeleteAction ? 'delete' : '' }"
             if="{ props.isImageRemoveActivated }"
@@ -109,7 +109,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           <td class="architectures">
             <architectures image="{ image }"></architectures>
           </td>
-          <td class="show-tag-history">
+          <td class="show-tag-history" if="{ props.showTagHistory }">
             <tag-history-button image="{ image }"></tag-history-button>
           </td>
           <td if="{ props.isImageRemoveActivated }" class="remove-tag">

src/index.html

@@ -39,6 +39,7 @@
       name="${REGISTRY_TITLE}"
       pull-url="${PULL_URL}"
       show-content-digest="${SHOW_CONTENT_DIGEST}"
+      show-tag-history="${SHOW_TAG_HISTORY}"
       is-image-remove-activated="${DELETE_IMAGES}"
       catalog-elements-limit="${CATALOG_ELEMENTS_LIMIT}"
       single-registry="${SINGLE_REGISTRY}"
@@ -74,6 +75,7 @@
       name="Development Registry"
       pull-url=""
       show-content-digest="true"
+      show-tag-history="true"
       is-image-remove-activated="true"
       catalog-elements-limit="1000"
       single-registry="false"

src/scripts/utils.js

@@ -217,6 +217,17 @@ export function truthy(value) {
   return value === true || value === 'true';
 }
 
+/**
+ * only is false if explicitly set to boolean false or string 'false'.
+ * defaults to true in any other case, e.g. if empty.
+ *
+ * @param {string|boolean} value the input value to check
+ * @returns {boolean} false if explicity set, true otherwise
+ */
+export function falsy(value) {
+  return value !== false && value !== 'false';
+}
+
 export function stringToArray(value) {
   return value && typeof value === 'string' ? value.split(',') : [];
 }