fix: issue with cicd cleanup and deploy-gh-pages

.github/actions/bundle-gh-page/action.yml

@@ -1,5 +1,13 @@
 name: 'Bundle GitHub Page'
 description: 'This action bundles the current gh-page branch with the out folder'
+inputs:
+  latest:
+    description: 'This has to be true if you want to overwrite latest.'
+    required: false
+    default: 'false'
+  tag:
+    description: 'This has to be a tag like v1.0.0 if you want to push a tag to the /version folder'
+    required: false
 runs:
   using: 'composite'
   steps:
@@ -10,7 +18,7 @@ runs:
     - name: ➕ Create temp or public dir
       run: |
         echo "Create dir for branch: ${{ steps.extract_branch.outputs.branch }}"
-        if echo ${{ steps.extract_branch.outputs.branch }} | grep -c "main"
+        if [ ${{ inputs.latest }} == "true" ];
         then
           mkdir temp
           echo "Created 'temp' dir"
@@ -24,7 +32,7 @@ runs:
       shell: bash
     - name: 📦 Unpack Tar
       run: |
-        if echo ${{ steps.extract_branch.outputs.branch }} | grep -c "main"
+        if [ ${{ inputs.latest }} == "true" ];
         then
           tar -zxf gh-pages -C temp --strip-components 1
         else
@@ -33,12 +41,18 @@ runs:
       shell: bash
     - name: 📁 Move ./out folder to public
       run: |
-        if echo ${{ steps.extract_branch.outputs.branch }} | grep -c "main"
+        if [ ${{ inputs.latest }} == "true" ];
         then
           mv ./out ./public
           if [ -d ./temp/review ]; then
             mv ./temp/review ./public
           fi
+        elif [ ! -d ${{ inputs.tag }} ];
+        then
+          if [ ! -d ./public/version ]; then
+            mkdir ./public/version
+          fi
+          mv ./out ./public/version/${{ inputs.tag }}
         else
           if [ ! -d ./public/review ]; then
             mkdir ./public/review

.github/workflows/03-deploy-gh-pages.yml

@@ -36,9 +36,9 @@ jobs:
           export BRANCH=${GITHUB_REF#refs/heads/}
           if echo ${BRANCH} | grep -c "main"
           then
-            export URL=https://dbsystel.github.io/cicd-playground
+            export URL=https://db-ui.github.io/elements
           else
-            export URL=https://dbsystel.github.io/cicd-playground/review/${BRANCH}
+            export URL=https://db-ui.github.io/elements/review/${BRANCH}
           fi
           echo "URL: $URL"
           echo "### GH-Pages URL :rocket: <br> <br> $URL" >> $GITHUB_STEP_SUMMARY

.github/workflows/cleanup.yml

@@ -14,8 +14,10 @@ jobs:
       - name: ⬇ Checkout repo
         uses: actions/checkout@v3
 
-      - name: 🔄 Init Cache
-        uses: ./.github/actions/npm-cache
+      - name: 📥 Download deps default-npm-cache
+        uses: bahmutov/npm-install@v1
+        with:
+          install-command: npm ci --ignore-scripts
 
       - name: 📥 Get gh-pages tar
         run: wget -q https://github.com/db-ui/elements/tarball/gh-pages

packages/db-ui-elements-stencil/src/components/development/github-version-switcher/github-version-switcher.tsx

@@ -6,6 +6,14 @@ import { Component, h, Host, Prop, State } from '@stencil/core';
   shadow: true
 })
 export class GithubVersionSwitcher {
+  private _defaultBranch = 'latest';
+  get defaultBranch(): string {
+    return this._defaultBranch;
+  }
+
+  set defaultBranch(value: string) {
+    this._defaultBranch = value;
+  }
   /**
    * Provides the owner of the repo
    */
@@ -16,41 +24,74 @@ export class GithubVersionSwitcher {
    */
   @Prop({ reflect: false }) repo: string;
 
-  /**
-   * Provides the defaultBranch of the repo
-   */
-  @Prop({ reflect: false }) defaultBranch: string = 'main';
-
-  @State() branches = [];
-  @State() currentBranch = this.defaultBranch;
+  @State() groups = [
+    { name: 'Versions', branches: [] },
+    { name: 'Features', branches: [] },
+    { name: 'Bugfixes', branches: [] },
+    { name: 'Other', branches: [] }
+  ];
+  @State() currentBranch = this._defaultBranch;
   @State() cleanOwner;
   @State() cleanRepo;
 
   private stripString = (value: string): string => {
     return value.replace(/[^a-zA-Z0-9-]/g, '');
   };
 
-  componentWillLoad() {
+  private fetchFromGitHubApi = async (url: string) => {
+    const response = await fetch(url);
+    return await response.json();
+  };
+
+  private setCurrentBranch = (branchNames: string[]) => {
+    const currentUrl = window.location.href;
+    const foundBranch = branchNames.find((branch) =>
+      currentUrl.includes(branch)
+    );
+    if (foundBranch) {
+      this.currentBranch = foundBranch;
+    }
+  };
+
+  private setBranches = (data: any[]) => {
+    const branchNames = data
+      .map((branch) => branch.name)
+      .filter(
+        (branch) => branch !== 'gh-pages' && !branch.includes('dependabot')
+      );
+    branchNames.forEach((branch) => {
+      if (branch.startsWith('feat') || branch.startsWith('feature')) {
+        this.groups[1].branches.push(branch);
+      } else if (branch.startsWith('fix') || branch.startsWith('bugfix')) {
+        this.groups[2].branches.push(branch);
+      } else {
+        this.groups[3].branches.push(branch);
+      }
+    });
+    this.setCurrentBranch(branchNames);
+  };
+
+  private setTags = (data: any[]) => {
+    const tagNames = data.map((tag) => tag.name);
+    tagNames.forEach((tag: string) => {
+      this.groups[0].branches.push(tag);
+    });
+    this.setCurrentBranch(tagNames);
+  };
+
+  async componentWillLoad() {
     const cOwner = this.stripString(this.owner);
     this.cleanOwner = cOwner;
     const cRepo = this.stripString(this.repo);
     this.cleanRepo = cRepo;
-    fetch(`https://api.github.com/repos/${cOwner}/${cRepo}/branches`)
-      .then((response) => response.json())
-      .then((data) => {
-        if (data) {
-          this.branches = data
-            .map((branch) => branch.name)
-            .filter((branch) => branch !== 'gh-pages');
-          const currentUrl = window.location.href;
-          const foundBranch = this.branches.find((branch) =>
-            currentUrl.includes(branch)
-          );
-          if (foundBranch) {
-            this.currentBranch = foundBranch;
-          }
-        }
-      });
+    const branchesData = await this.fetchFromGitHubApi(
+      `https://api.github.com/repos/${cOwner}/${cRepo}/branches`
+    );
+    this.setBranches(branchesData);
+    const tagsData = await this.fetchFromGitHubApi(
+      `https://api.github.com/repos/${cOwner}/${cRepo}/tags`
+    );
+    this.setTags(tagsData);
   }
 
   // eslint-disable-next-line @stencil/own-methods-must-be-private
@@ -59,16 +100,19 @@ export class GithubVersionSwitcher {
       const currentUrl = top.location.href;
       const urlPaths = currentUrl.split('?');
       const lastPath = urlPaths[urlPaths.length - 1];
+      const isTag = branch.split('.').length === 3 && branch.startsWith('v');
       top.location = `https://${localOwner}.github.io/${localRepo}${
-        this.defaultBranch === branch ? '' : `/review/${branch}`
+        this._defaultBranch === branch
+          ? ''
+          : `${isTag ? '/version' : '/review'}/${branch}`
       }/?${lastPath}`;
     }
   }
 
   render() {
     return (
       <Host>
-        {this.branches?.length > 0 && (
+        {this.groups?.length > 0 && (
           <db-select
             class="gh-version-switcher"
             label="Version"
@@ -81,15 +125,27 @@ export class GithubVersionSwitcher {
               )
             }
           >
-            {this.branches.map((branch: string, index: number) => (
-              <option
-                key={`${branch}-${index}`}
-                value={branch}
-                selected={this.currentBranch === branch}
-              >
-                {branch}
-              </option>
-            ))}
+            <option
+              value={this._defaultBranch}
+              selected={this.currentBranch === this._defaultBranch}
+            >
+              {this._defaultBranch}
+            </option>
+            {this.groups
+              .filter((group: any) => group.branches?.length > 0)
+              .map((group: any) => (
+                <optgroup key={group.name} label={group.name}>
+                  {group.branches.map((branch: string, index: number) => (
+                    <option
+                      key={`${group.name}-${branch}-${index}`}
+                      value={branch}
+                      selected={this.currentBranch === branch}
+                    >
+                      {branch}
+                    </option>
+                  ))}
+                </optgroup>
+              ))}
           </db-select>
         )}
       </Host>

packages/db-ui-elements-stencil/src/components/development/github-version-switcher/readme.md

@@ -7,11 +7,10 @@
 
 ## Properties
 
-| Property        | Attribute        | Description                            | Type     | Default     |
-| --------------- | ---------------- | -------------------------------------- | -------- | ----------- |
-| `defaultBranch` | `default-branch` | Provides the defaultBranch of the repo | `string` | `'main'`    |
-| `owner`         | `owner`          | Provides the owner of the repo         | `string` | `undefined` |
-| `repo`          | `repo`           | Provides the name of the repo          | `string` | `undefined` |
+| Property | Attribute | Description                    | Type     | Default     |
+| -------- | --------- | ------------------------------ | -------- | ----------- |
+| `owner`  | `owner`   | Provides the owner of the repo | `string` | `undefined` |
+| `repo`   | `repo`    | Provides the name of the repo  | `string` | `undefined` |
 
 
 ## Dependencies