feat(catalog): add CATALOG_DEFAULT_EXPANDED to expand repositories …

…by default (#302)

closes #302

README.md

@@ -96,7 +96,8 @@ Some env options are available for use this interface for **only one server** (w
 - `USE_CONTROL_CACHE_HEADER`: Use `Control-Cache` header and set to `no-store, no-cache`. This will avoid some issues on multi-arch images (see [#260](https://github.com/Joxit/docker-registry-ui/issues/260) and [#265](https://github.com/Joxit/docker-registry-ui/pull/265)). This option requires registry configuration: `Access-Control-Allow-Headers` with `Cache-Control`. (default: `false`). Since 2.3.0
 - `THEME`: Chose your default theme, could be `dark`, `light` or `auto` (see [#283](https://github.com/Joxit/docker-registry-ui/pull/283)). When auto is selected, you will have a switch to manually change from light to dark and vice-versa (see [#291](https://github.com/Joxit/docker-registry-ui/pull/291)). (default: `auto`). Since 2.4.0
 - `THEME_*`: See table in [Theme options](#theme-options) section (see [#283](https://github.com/Joxit/docker-registry-ui/pull/283)). Since 2.4.0
-- `TAGLIST_ORDER`: Set the default order for the taglist page, could be `num-asc;alpha-asc`, `num-desc;alpha-asc`, `num-asc;alpha-desc`, `num-desc;alpha-desc`, `alpha-asc;num-asc`, `alpha-asc;num-desc`, `alpha-desc;num-asc` or `alpha-desc;num-desc` (see [#307](https://github.com/Joxit/docker-registry-ui/pull/307)). (default: `alpha-asc;num-desc`) Since 2.5.0
+- `TAGLIST_ORDER`: Set the default order for the taglist page, could be `num-asc;alpha-asc`, `num-desc;alpha-asc`, `num-asc;alpha-desc`, `num-desc;alpha-desc`, `alpha-asc;num-asc`, `alpha-asc;num-desc`, `alpha-desc;num-asc` or `alpha-desc;num-desc` (see [#307](https://github.com/Joxit/docker-registry-ui/pull/307)). (default: `alpha-asc;num-desc`). Since 2.5.0
+- `CATALOG_DEFAULT_EXPANDED`: Expand by default all repositories in catalog (see [#302](https://github.com/Joxit/docker-registry-ui/issues/302)). (default: `false`). Since 2.5.0
 
 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/).
 

bin/90-docker-registry-ui.sh

@@ -12,6 +12,7 @@ sed -i "s~\${SHOW_CATALOG_NB_TAGS}~${SHOW_CATALOG_NB_TAGS}~" index.html
 sed -i "s~\${HISTORY_CUSTOM_LABELS}~${HISTORY_CUSTOM_LABELS}~" index.html
 sed -i "s~\${USE_CONTROL_CACHE_HEADER}~${USE_CONTROL_CACHE_HEADER}~" index.html
 sed -i "s~\${TAGLIST_ORDER}~${TAGLIST_ORDER}~" index.html
+sed -i "s~\${CATALOG_DEFAULT_EXPANDED}~${CATALOG_DEFAULT_EXPANDED}~" index.html
 
 grep -o 'THEME[A-Z_]*' index.html | while read e; do
   sed -i "s~\${$e}~$(printenv $e)~" index.html

src/components/catalog/catalog-element.riot

@@ -70,6 +70,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           state.images = props.item.images;
           state.repo = props.item.repo;
           state.nImages = props.item.images.length;
+          state.expanded = props.catalogDefaultExpanded;
         }
         if (props.showCatalogNbTags && state.image) {
           this.getNbTags(props, state);

src/components/catalog/catalog.riot

@@ -34,6 +34,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     on-notify="{ props.onNotify }"
     on-authentication="{ props.onAuthentication }"
     show-catalog-nb-tags="{ props.showCatalogNbTags }"
+    catalog-default-expanded="{ props.catalogDefaultExpanded || state.nRepositories === 1 }"
   ></catalog-element>
   <script>
     import CatalogElement from './catalog-element.riot';

src/components/docker-registry-ui.riot

@@ -41,6 +41,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           filter-results="{ state.filter }"
           on-authentication="{ onAuthentication }"
           show-catalog-nb-tags="{ truthy(props.showCatalogNbTags) }"
+          catalog-default-expanded="{ truthy(props.catalogDefaultExpanded) }"
         ></catalog>
       </route>
       <route path="{baseRoute}taglist/(.*)">

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

@@ -82,8 +82,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           page: router.getPageQueryParam() || 1,
         };
         try {
-          this.state.taglistOrder = taglistOrderParser(props.taglistOrder)
-        } catch(e) {
+          this.state.taglistOrder = taglistOrderParser(props.taglistOrder);
+        } catch (e) {
           props.onNotify(e);
         }
       },

src/index.html

@@ -48,6 +48,7 @@
       history-custom-labels="${HISTORY_CUSTOM_LABELS}"
       use-control-cache-header="${USE_CONTROL_CACHE_HEADER}"
       taglist-order="${TAGLIST_ORDER}"
+      catalog-default-expanded="${CATALOG_DEFAULT_EXPANDED}"
       theme="${THEME}"
       theme-primary-text="${THEME_PRIMARY_TEXT}"
       theme-neutral-text="${THEME_NEUTRAL_TEXT}"
@@ -75,6 +76,7 @@
       history-custom-labels="first_custom_labels,second_custom_labels"
       use-control-cache-header="false"
       taglist-order=""
+      catalog-default-expanded=""
       theme="auto"
       theme-primary-text=""
       theme-neutral-text=""