Added zoomed in snapshot for peek scripts

Author: Thomas-Boi

.github/scripts/build_assets/SeleniumRunner.py

@@ -118,10 +118,13 @@ def upload_icomoon(self, icomoon_json_path: str):
 
         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 @@ def upload_svgs(self, svgs: List[str]):
 
             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)
-                print(f"Uploaded {svg}")
+                import_btn.send_keys(svgs[i])
+                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 @@ def test_for_possible_alert(self, wait_period: float, btn_text: str):
             )
             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 @@ def remove_color_from_icon(self):
             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()
+    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 @@
 
 
 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,24 +21,41 @@ 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()}}
         with:
           name: geckodriver-log
           path: ./geckodriver.log
       - name: Upload screenshot of the newly made icons
-        id: imgur_step
-        uses: devicons/public-upload-to-imgur@v1
+        id: new_icons_overview_step
+        uses: devicons/public-upload-to-imgur@v1.1
+        if: ${{success()}}
+        with:
+          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: ./new_icons.png
+          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": [