Release 0.2.0

- Add support to firefox extension - GitHub workflow to create release and publish actifacts to release - Improve README instructions - Enhancements on how to manualy load the extension Signed-off-by: Arthur Diniz <[email protected]>
arthurbdiniz · Oct 25, 2021 · 09f980f · 09f980f
1 parent 49c7d61
commit 09f980f
Show file tree

Hide file tree

Showing 22 changed files with 406 additions and 98 deletions.
diff --git a/.github/workflows/gh-action-dropdown-list-input.yml b/.github/workflows/gh-action-dropdown-list-input.yml
@@ -7,12 +7,12 @@ on:
         description: 'Default'
         required: true
         default: 'default'
-      environments:
-        description: 'Environments'
+      environment:
+        description: 'Environment'
         required: true
         default: 'dev,staging,[uat],prod'
-      providers:
-        description: 'Providers'
+      provider:
+        description: 'Provider'
         required: true
         default: 'Google Cloud,[AWS],GCP'
 
@@ -23,17 +23,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Format inputs
-        run: |
-          echo "::set-output name=environment::$(echo ${{ github.event.inputs.environments }} | awk -F'[][]' '{print $2}')"
-        id: format_inputs
-      - name: Print environment using awk
-        run: echo ${{ steps.format_inputs.outputs.environment }}
-      - name: Print environment using awk
-        run: echo ${{ github.event.inputs.environments }} | awk -F'[][]' '{print $2}'
-      - name: Print environment using sed
-        run: echo ${{ github.event.inputs.environments }} | sed 's/.*\[\([^]]*\)\].*/\1/g'
-      - name: Print providers using awk
-        run: echo ${{ github.event.inputs.providers }} | awk -F'[][]' '{print $2}'
-      - name: Print providers using sed
-        run: echo ${{ github.event.inputs.providers }} | sed 's/.*\[\([^]]*\)\].*/\1/g'
+      - name: Print environment
+        run: echo ${{ github.event.inputs.environment }}
+      - name: Print provider
+        run: echo ${{ github.event.inputs.provider }}
diff --git a/.github/workflows/package.yml b/.github/workflows/package.yml
@@ -0,0 +1,46 @@
+name: Package
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  build:
+    name: Build and Push
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Package chrome
+        run: zip -r -FS gh-action-dropdown-chrome.zip chrome
+      - name: Package firefox
+        run: zip -r -FS gh-action-dropdown-firefox.zip firefox
+      - name: release
+        uses: actions/create-release@v1
+        id: create_release
+        with:
+          draft: false
+          prerelease: false
+          release_name: ${{ steps.version.outputs.version }}
+          tag_name: ${{ github.ref }}
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+      - name: Upload chrome artifact
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./gh-action-dropdown-chrome.zip
+          asset_name: gh-action-dropdown-chrome.zip
+          asset_content_type: application/zip
+      - name: Upload firefox artifact
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ github.token }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./gh-action-dropdown-firefox.zip
+          asset_name: gh-action-dropdown-firefox.zip
+          asset_content_type: application/zip
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+gh-action-dropdown-chrome.zip
+gh-action-dropdown-firefox.zip
diff --git a/README.md b/README.md
@@ -4,38 +4,56 @@ Extends GitHub Action UI replacing plain text input fields to the dropdown.
 
 ![showcase](images/showcase.png)
 
+#### Configuring tags
+
+Go to the top right corner of the browser you are using and click on the extension logo. A screen will popup with tag options. Choose the right tags for you and save it.
+
+> This action might require reloading the GitHub workflow tab.
+
+![config](images/config.png)
+
 ## Install extension
 
+- [Chrome](https://chrome.google.com/webstore/detail/github-action-dropdown-in/deogklnblohhopmnkllaeinijefddcnm)
+> Firefox: is still in review process to be published.
+
 ## Usage
 
-- Add inputs separated by `commas` and the default value by `brackets`.
-- Then consume the selected value extracting from the string using `awk` or `sed`.
+- Add inputs separated by `commas` and the default value by `tag` e.g. `brackets`.
 
+[gh-action-dropdown-list-input.yml](https://github.com/arthurbdiniz/gh-action-dropdown-list-input/blob/main/.github/workflows/gh-action-dropdown-list-input.yml)
 ```yml
 name: gh-action-dropdown-list-input
 
 on:
   workflow_dispatch:
     inputs:
-      environments:
-        description: 'Environments'
+      environment:
+        description: 'Environment'
         required: true
         default: 'dev,staging,[uat],prod'
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Format inputs
-        run: |
-          echo "::set-output name=environment::$(echo ${{ github.event.inputs.environments }} | awk -F'[][]' '{print $2}')"
-        id: format_inputs
-      - name: Print environment using format inputs step
-        run: echo ${{ steps.format_inputs.outputs.environment }}
-      - name: Print environment using awk
-        run: echo ${{ github.event.inputs.environments }} | awk -F'[][]' '{print $2}'
-      - name: Print environment using sed
-        run: echo ${{ github.event.inputs.environments }} | sed 's/.*\[\([^]]*\)\].*/\1/g'
+     - name: Print environment
+        run: echo ${{ github.event.inputs.environment }}
+```
+
+## Development
+
+- [Chrome](chrome/README.md)
+- [Firefox](firefox/README.md)
+
+## Package extension
+
+```bash
+zip -r -FS gh-action-dropdown-chrome.zip chrome
+
+# or
+
+zip -r -FS gh-action-dropdown-firefox.zip firefox
 ```
 
 ## License

diff --git a/chrome/README.md b/chrome/README.md
@@ -0,0 +1,3 @@
+## Installing
+
+Access the Chrome Extensions area by typing directly into the address bar: `chrome://extensions`, then click on `Load unpacked` and select the `chrome` folder inside the project.
diff --git a/chrome/content.js b/chrome/content.js
@@ -0,0 +1,72 @@
+function formatInputList(inputs, popupStartTag, popupEndTag) {
+    for (let input of inputs) {
+        if (input.id.startsWith("input_") && input.value.includes(popupStartTag) && input.value.includes(popupEndTag)) {
+            var values = input.value.split(",");
+            var selector = document.createElement("select");
+
+            selector.name = input.id
+            selector.classList = ["form-control form-select" ]
+
+            values.forEach(function (option) {
+                if (option.startsWith(popupStartTag) && option.endsWith(popupEndTag)) {
+                    option = option.replace(popupStartTag, "").replace(popupEndTag, "")
+                    input.value = option
+                    optionHtml = `<option value="${option}" selected="selected">${option}</option>`
+                }else{
+                    optionHtml = `<option value="${option}">${option}</option>`
+                }
+                selector.insertAdjacentHTML("beforeend", optionHtml);
+            });
+
+            var parent = input.parentElement
+
+            if (parent.getElementsByTagName("select").length == 0) {
+                parent.appendChild(selector);
+                input.type = "hidden"
+            }
+
+            selector.onchange = function() {
+                var optionText = this.options[this.selectedIndex].text;
+                var input = document.getElementById(this.name);
+
+                input.value = optionText
+            }
+        }
+    }
+}
+
+function queryInputList() {
+    var inputs = document.getElementsByTagName("input");
+    let count = 0
+    let actionInputs = []
+
+    let popupStartTag = "["
+    let popupEndTag = "]"
+
+    chrome.storage.sync.get(["popupStartTag", "popupEndTag"], function(items){
+        popupStartTag = items["popupStartTag"]
+        popupEndTag = items["popupEndTag"]
+
+        for (let input of inputs) {
+            if (input.id.startsWith("input_")) {
+                count++
+                if (input.value.includes(popupStartTag) && input.value.includes(popupEndTag)) {
+                    actionInputs.push(input)
+                }
+            }
+        }
+        if (count == 0) {
+            window.setTimeout(queryInputList, 250);
+            return;
+        }else {
+            formatInputList(actionInputs, popupStartTag, popupEndTag)
+        }
+    });
+}
+
+
+window.onclick = e => {
+    if (e.target.tagName === "SUMMARY") {
+        queryInputList()
+    }
+}
diff --git a/icons/icon128.png → chrome/icons/icon128.png b/icons/icon128.png → chrome/icons/icon128.png
diff --git a/icons/icon16.png → chrome/icons/icon16.png b/icons/icon16.png → chrome/icons/icon16.png
diff --git a/icons/icon48.png → chrome/icons/icon48.png b/icons/icon48.png → chrome/icons/icon48.png
diff --git a/manifest.json → chrome/manifest.json b/manifest.json → chrome/manifest.json
@@ -1,8 +1,8 @@
 {
-    "manifest_version": 3,
+    "manifest_version": 2,
     "name": "GitHub Action Dropdown Input",
     "description": "Extends GitHub Action UI replacing plain text input fields to dropdown.",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "icons": {
         "16": "icons/icon16.png",
         "48": "icons/icon48.png",
@@ -14,8 +14,12 @@
             "js": ["content.js"]
         }
     ],
+    "browser_action": {
+        "default_popup": "popup.html",
+        "default_title": "GitHub workflows dropdown inputs"
+    },
     "permissions": [
-        "activeTab"
-    ],
-    "host_permissions": ["https://github.com/*"]
+        "activeTab",
+        "storage"
+    ]
 }
diff --git a/chrome/popup.html b/chrome/popup.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub Dropdown Inputs</title>
+</head>
+<body>
+    <h3>GitHub Dropdown Inputs</h3>
+    <form>
+        <label>Start Tag</label>
+        <div style="margin-bottom: 10px;">
+            <input type="text" id="popupStartTag">
+        </div>
+        <label>End Tag</label>
+        <div>
+            <input type="text" id="popupEndTag" >
+        </div>
+        <div>
+            <button type="submit" style="margin-top: 20px;">Save</button>
+        </div>
+    </form>
+    <p>* This action might require reloading the GitHub workflow tab.</p>
+    <script src="popup.js"></script>
+</body>
+</html>
diff --git a/chrome/popup.js b/chrome/popup.js
@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+
+function saveOptions(e) {
+    chrome.storage.sync.set({
+        "popupStartTag": document.querySelector("#popupStartTag").value ? document.querySelector("#popupStartTag").value : '['
+    });
+
+    chrome.storage.sync.set({
+        "popupEndTag": document.querySelector("#popupEndTag").value ? document.querySelector("#popupEndTag").value : ']'
+    });
+
+    restoreOptions();
+    e.preventDefault();
+}
+
+function restoreOptions() {
+    chrome.storage.sync.get(["popupStartTag", "popupEndTag"], function(items){
+        if (!items["popupStartTag"]){
+            chrome.storage.sync.set({
+                popupStartTag: '['
+            });
+        }
+        document.querySelector("#popupStartTag").value = items["popupStartTag"] || '[';
+
+        if (!items["popupEndTag"]){
+            chrome.storage.sync.set({
+                popupEndTag: '['
+            });
+        }
+        document.querySelector("#popupEndTag").value = items["popupEndTag"] || '[';
+
+    });
+}
diff --git a/content.js b/content.js