Added zoomed in snapshot for peek scripts

.github/scripts/build_assets/SeleniumRunner.py

@@ -118,10 +118,13 @@ class SeleniumRunner:
 
         print("JSON file uploaded.")
 
-    def upload_svgs(self, svgs: List[str]):
+    def upload_svgs(self, svgs: List[str], screenshot_folder: str=""):
         """
         Upload the SVGs provided in folder_info
         :param svgs: a list of svg Paths that we'll upload to icomoon.
+        :param screenshot_folder: the name of the screenshot_folder. If
+        the value is provided, it means the user want to take a screenshot
+        of each icon.
         """
         try:
             print("Uploading SVGs...")
@@ -133,17 +136,20 @@ class SeleniumRunner:
 
             self.click_hamburger_input()
 
-            for svg in svgs:
+            for i in range(len(svgs)):
                 import_btn = self.driver.find_element_by_css_selector(
                     "li.file input[type=file]"
                 )
-                import_btn.send_keys(svg)
+                import_btn.send_keys(svgs[i])
-                print(f"Uploaded {svg}")
+                print(f"Uploaded {svgs[i]}")
                 self.test_for_possible_alert(self.SHORT_WAIT_IN_SEC, "Dismiss")
-                self.remove_color_from_icon()
+                self.remove_color_from_icon(screenshot_folder, i)
 
             # take a screenshot of the icons that were just added
-            self.driver.save_screenshot("new_icons.png");
+            new_icons_path = str(Path(screenshot_folder, "new_icons.png").resolve())
+            self.driver.save_screenshot(new_icons_path);
+
+            # select all the svgs so that the newly added svg are part of the collection
             self.click_hamburger_input()
             select_all_button = WebDriverWait(self.driver, self.LONG_WAIT_IN_SEC).until(
                 ec.element_to_be_clickable((By.XPATH, "//button[text()='Select All']"))
@@ -191,11 +197,15 @@ class SeleniumRunner:
             )
             dismiss_btn.click()
         except SeleniumTimeoutException:
-            pass
+            pass  # nothing found => everything is good
 
-    def remove_color_from_icon(self):
+    def remove_color_from_icon(self, screenshot_folder: str, index: int):
         """
         Remove the color from the most recent uploaded icon.
+        :param screenshot_folder: the name of the screenshot_folder. If
+        the value is provided, it means the user want to take a screenshot
+        of each icon.
+        :param index, index of the icon being uploaded. Used for naming the screenshot.
         :return: None.
         """
         try:
@@ -216,8 +226,11 @@ class SeleniumRunner:
             remove_color_btn = self.driver \
                 .find_element_by_css_selector("div.overlayWindow i.icon-droplet-cross")
             remove_color_btn.click()
-        except SeleniumTimeoutException:
+
-            pass
+            # take a screenshot before closing the pop up
+            if screenshot_folder:
+                screenshot_path = str(Path(screenshot_folder, f"screenshot_{index}.png").resolve())
+                self.driver.save_screenshot(screenshot_path)
         except Exception as e:
             self.close()
             raise e

.github/scripts/build_assets/filehandler.py

@@ -145,3 +145,18 @@ def rename_extracted_files(extract_path: str):
         os.replace(dict_["old"], dict_["new"])
 
     print("Files renamed")
+
+
+def create_screenshot_folder(dir, screenshot_name: str="screenshots"):
+    """
+    Create a screenshots folder in the dir.
+    :param dir, the dir where we want to create the folder.
+    :param screenshot_name, the name of the screenshot folder.
+    :raise Exception if the dir provided is not a directory.
+    :return the string name of the screenshot folder.
+    """
+    folder = Path(dir).resolve()
+    if not folder.is_dir():
+        raise Exception(f"This is not a dir: {str(folder)}. \ndir must be a valid directory")
+    folder.mkdir(screenshot_name, exist_ok=True)
+    return str(folder)

.github/scripts/build_assets/util.py

@@ -1,8 +1,7 @@
-from pathlib import Path
 from argparse import ArgumentParser
 from build_assets.PathResolverAction import PathResolverAction
 
-def get_commandline_args():
+def get_commandline_args(peek_mode=False):
     parser = ArgumentParser(description="Upload svgs to Icomoon to create icon files.")
 
     parser.add_argument("--headless",
@@ -26,8 +25,11 @@ def get_commandline_args():
                         action=PathResolverAction)
 
     parser.add_argument("download_path",
-                        help="The path where you'd like to download the Icomoon files to",
+                        help="The download destination of the Icomoon files",
                         action=PathResolverAction)
 
+    if peek_mode:
+        parser.add_argument("--pr_title",
+                            help="The title of the PR that we are peeking at")
 
     return parser.parse_args()

.github/scripts/generate_screenshot_markdown.py

@@ -0,0 +1,16 @@
+from typing import List
+
+
+def generate_screenshot_markdown(img_urls: List[str]):
+    """
+    Generate the markdown for the screenshots using the
+    img_urls then print it to the console.
+    :param img_urls are valid image links.
+    """
+    template = "![Detailed Screenshot]({})"
+    return [template.format(img_url) for img_url in img_urls]
+
+
+if __name__ == "__main__":
+    markdown = generate_screenshot_markdown()
+    print("\n\n".join(markdown))  # format it before printing

.github/scripts/icomoon_peek.py

@@ -1,3 +1,6 @@
+from os import sep
+from typing import List
+import re
 from selenium.common.exceptions import TimeoutException
 
 # pycharm complains that build_assets is an unresolved ref
@@ -7,27 +10,50 @@ from build_assets import filehandler, util
 
 
 def main():
-    args = util.get_commandline_args()
+    args = util.get_commandline_args(True)
     new_icons = filehandler.find_new_icons(args.devicon_json_path, args.icomoon_json_path)
     if len(new_icons) == 0:
         print("No files need to be uploaded. Ending script...")
         return
 
+    # get only the icon object that has the name matching the pr title
+    filtered_icons = find_object_added_in_this_pr(new_icons, args.pr_title)
+
     # print list of new icons
     print("List of new icons:", *new_icons, sep = "\n")
+    print("Icons being uploaded:", *filtered_icons, sep = "\n")
 
     runner = None
     try:
         runner = SeleniumRunner(args.download_path, args.geckodriver_path, args.headless)
         svgs = filehandler.get_svgs_paths(new_icons, args.icons_folder_path)
-        runner.upload_svgs(svgs)
+        screenshot_folder = filehandler.create_screenshot_folder("./") 
+        runner.upload_svgs(svgs, screenshot_folder)
         print("Task completed.")
     except TimeoutException as e:
+        print("Selenium Time Out Error: ", e.stacktrace, sep='\n')
+    except Exception as e:
         print(e)
-        print(e.stacktrace)
     finally:
         runner.close()
 
 
+def find_object_added_in_this_pr(icons: List[dict], pr_title: str):
+    """
+    Find the icon name from the PR title. 
+    :param icons, a list of the font objects found in the devicon.json.
+    :pr_title, the title of the PR that this workflow was called on.
+    :return a list containing the dictionary with the "name"
+    entry's value matching the name in the pr_title.
+    If none can be found, return an empty list.
+    """
+    try:
+        pattern = re.compile(r"(?<=^new icon: )\w+ (?=\(.+\))", re.I)
+        icon_name = pattern.findall(pr_title)[0].lower().strip()  # should only have one match
+        return [icon for icon in icons if icon["name"] == icon_name]
+    except IndexError:  # there are no match in the findall()
+        return []  
+
+
 if __name__ == "__main__":
     main()

.github/workflows/build_icons.yml

@@ -19,7 +19,10 @@ jobs:
           pip install -r ./.github/scripts/requirements.txt
           npm install
       - name: Executing build and create fonts via icomoon
-        run: npm run build
+        run: >
+          python ./.github/scripts/icomoon_build.py 
+          ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json 
+          ./devicon.json ./icons ./ --headless
       - name: Upload geckodriver.log for debugging purposes
         uses: actions/upload-artifact@v2
         if: ${{failure()}}

.github/workflows/peek_icons.yml

@@ -21,7 +21,12 @@ jobs:
           python -m pip install --upgrade pip
           pip install -r ./.github/scripts/requirements.txt
       - name: Run icomoon_peek.py
-        run: npm run peek
+        env:
+          PR_TITLE: ${{ github.event.pull_request.title }}
+        run: >
+          python ./.github/scripts/icomoon_peek.py 
+          ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json 
+          ./devicon.json ./icons ./ --headless --pr_title $PR_TITLE
       - name: Upload geckodriver.log for debugging purposes
         uses: actions/upload-artifact@v2
         if: ${{failure()}}
@@ -29,16 +34,28 @@ jobs:
           name: geckodriver-log
           path: ./geckodriver.log
       - name: Upload screenshot of the newly made icons
-        id: imgur_step
+        id: new_icons_overview_step
-        uses: devicons/public-upload-to-imgur@v1
+        uses: devicons/public-upload-to-imgur@v1.1
         if: ${{success()}}
         with:
-          img_path: ./new_icons.png
+          img_path: ./screenshots/new_icons.png
           client_id: ${{secrets.IMGUR_CLIENT_ID}}
+      - name: Upload zoomed in screenshot of the newly made icons
+        id: new_icons_detailed_step
+        uses: devicons/public-upload-to-imgur@v1.1
+        if: ${{success()}}
+        with:
+          img_path: ./screenshots/screenshot_*.png
+          client_id: ${{secrets.IMGUR_CLIENT_ID}}
+      - name: Generate the markdowns for the screenshot
+        run: |
+          echo "DETAILED_IMGS_MARKDOWN<<EOF" >> $GITHUB_ENV
+          python ./.github/scripts/generate_screenshot_markdown.py >> $GITHUB_ENV
+          echo "EOF" >> $GITHUB_ENV
       - name: Comment on the PR about the result
         uses: github-actions-up-and-running/pr-comment@v1.0.1
         env:
-          IMG_URL: ${{ steps.imgur_step.outputs.imgur_url }}
+          OVERVIEW_IMG_URL: ${{ steps.imgur_step.outputs.imgur_url }}
           MESSAGE: |
             Hi!
 
@@ -47,7 +64,10 @@ jobs:
 
             ![Peeked Icons (top left)]({0})
 
-            Note: If the image doesn't show up, it's probably because it has been autodeleted by Imgur after 6 months due to our API choice.
+            Here are the zoomed-in screenshots of the added icons:
+            {1}
+
+            Note: If the images doesn't show up, it's probably because it has been autodeleted by Imgur after 6 months due to our API choice.
 
             The maintainers will now take a look at it and decide whether to merge your PR.
 
@@ -56,4 +76,4 @@ jobs:
             Peek Bot
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          message: ${{format(env.MESSAGE, env.IMG_URL, env.IMG_URL)}}
+          message: ${{format(env.MESSAGE, env.IMG_URL, env.DETAILED_IMGS_MARKDOWN)}}

devicon.json

@@ -2173,6 +2173,40 @@
         "color": "#a62c46",
         "aliases": []
     },
+    {
+        "name": "testingicon",
+        "tags": [
+            "framework"
+        ],
+        "versions": {
+            "svg": [
+                "original",
+                "plain"
+            ],
+            "font": [
+                "plain"
+            ]
+        },
+        "color": "#61dafb",
+        "aliases": [ ]
+    },
+    {
+        "name": "testingicon2",
+        "tags": [
+            "framework"
+        ],
+        "versions": {
+            "svg": [
+                "original",
+                "plain"
+            ],
+            "font": [
+                "plain"
+            ]
+        },
+        "color": "#61dafb",
+        "aliases": [ ]
+    },
     {
         "name": "react",
         "tags": [

icons/testingicon/testingicon-original.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><style type="text/css">.st0{fill:#1F0740;}.st1{fill:#D490C5;}</style><rect x="6.5" y="6.5" class="st0" width="115" height="115"/><path class="st1" d="M0,0v128h128V0H0z M121.5,121.5H6.5V6.5h115V121.5z"/><path class="st1" d="M103.5,59.2c0,0-0.6-14.6-16.5-14.6c-16,0-17.3,22-17.3,22v4.7c0,0,2.8,18.3,16.3,18.3    c13.5,0,14.8-2.6,14.8-2.6v-8.1c0,0-19.3,9.2-21.2-10h24V59.2z M94.5,61.6H79.5c0,0,0-8.3,7.5-9.2C95.2,52.4,94.5,61.6,94.5,61.6z    "/><path class="st1" d="M50.5,29.9H38.4v3.8l-16,54.9h9.4l4.4-16.1H53l4.5,16.1h10.3L50.5,29.9z M38.2,63.1l6.4-24.5L51,63.1H38.2z"/></svg>

icons/testingicon/testingicon-plain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><style type="text/css">.st0{fill:#1F0740;}</style><path class="st0" d="M87,52.4c-7.5,0.9-7.5,9.2-7.5,9.2h14.9C94.5,61.6,95.2,52.4,87,52.4z"/><path class="st0" d="M 38.2,63.1 51,63.1 44.6,38.7   z"/><path class="st0" d="M0,0v128h128V0H0z M57.5,88.6L53,72.5H36.2l-4.4,16.1h-9.4l16-54.9v-3.8h12.2l17.3,58.7H57.5z M103.5,69h-24    c1.9,19.2,21.2,10,21.2,10V87c0,0-1.3,2.6-14.8,2.6c-13.5,0-16.3-18.3-16.3-18.3v-4.7c0,0,1.3-22,17.3-22    c16,0,16.5,14.6,16.5,14.6V69z"/></svg>

icons/testingicon2/testingicon2-original.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><style type="text/css">.st0{fill:#1F0740;}.st1{fill:#D490C5;}</style><rect x="6.5" y="6.5" class="st0" width="115" height="115"/><path class="st1" d="M0,0v128h128V0H0z M121.5,121.5H6.5V6.5h115V121.5z"/><path class="st1" d="M103.5,59.2c0,0-0.6-14.6-16.5-14.6c-16,0-17.3,22-17.3,22v4.7c0,0,2.8,18.3,16.3,18.3    c13.5,0,14.8-2.6,14.8-2.6v-8.1c0,0-19.3,9.2-21.2-10h24V59.2z M94.5,61.6H79.5c0,0,0-8.3,7.5-9.2C95.2,52.4,94.5,61.6,94.5,61.6z    "/><path class="st1" d="M50.5,29.9H38.4v3.8l-16,54.9h9.4l4.4-16.1H53l4.5,16.1h10.3L50.5,29.9z M38.2,63.1l6.4-24.5L51,63.1H38.2z"/></svg>

icons/testingicon2/testingicon2-plain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><style type="text/css">.st0{fill:#1F0740;}</style><path class="st0" d="M87,52.4c-7.5,0.9-7.5,9.2-7.5,9.2h14.9C94.5,61.6,95.2,52.4,87,52.4z"/><path class="st0" d="M 38.2,63.1 51,63.1 44.6,38.7   z"/><path class="st0" d="M0,0v128h128V0H0z M57.5,88.6L53,72.5H36.2l-4.4,16.1h-9.4l16-54.9v-3.8h12.2l17.3,58.7H57.5z M103.5,69h-24    c1.9,19.2,21.2,10,21.2,10V87c0,0-1.3,2.6-14.8,2.6c-13.5,0-16.3-18.3-16.3-18.3v-4.7c0,0,1.3-22,17.3-22    c16,0,16.5,14.6,16.5,14.6V69z"/></svg>

package.json

@@ -4,9 +4,7 @@
   "description": "Programming related icons collection",
   "main": "devicon.min.css",
   "scripts": {
-    "build-css": "gulp updateCss && gulp clean",
+    "build-css": "gulp updateCss && gulp clean"
-    "build": "python ./.github/scripts/icomoon_build.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless",
-    "peek": "python ./.github/scripts/icomoon_peek.py ./.github/scripts/build_assets/geckodriver-v0.27.0-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless"
   },
   "repository": {
     "type": "git",