ci: Await PNG creation (#55)

ci: Only run build steps if there are changes
ci: Add verbose logs option
ci: Improve documentation on build action

.github/fetch_icons/action.yml

@@ -7,6 +7,11 @@ inputs:
   date:
     description: "The date and time the action was run"
     required: true
+  actions-runner-debug:
+    description: "The date and time the action was run"
+    required: false
+    default: false
+    type: boolean
 outputs:
   files_changed:
     description: "Boolean that gets set to true if any icons have been added or removed"

.github/fetch_icons/index.js

@@ -5,6 +5,7 @@ import { checkForFileChanges, stageAllFiles } from '../../dist/scripts/utils/che
 import { ZDS_ASSETS_FILE_ID, ZDS_ASSETS_ICON_PAGE_NAME } from "../../figmaConfig.js";
 
 const FIGMA_ACCESS_TOKEN = core.getInput("figma-access-token") || process.env.FIGMA_ACCESS_TOKEN;
+const VERBOSE_LOGS = core.getBooleanInput("actions-runner-debug",) || false;
 const DATE = core.getInput("date") || 'now';
 
 try {
@@ -23,13 +24,13 @@ try {
     ZDS_ASSETS_ICON_PAGE_NAME,
     oldHash,
     "outputs",
-    false,
+    VERBOSE_LOGS,
   );
   let filesChanged = false;
 
   if (newHash) {
     writeFileSync(hashPath, newHash);
-    filesChanged = checkForFileChanges();
+    filesChanged = checkForFileChanges(VERBOSE_LOGS);
     if (filesChanged) {
       const packageJson = JSON.parse(readFileSync("./package.json").toString());
       packageJson.lastUpdated = DATE;

.github/workflows/build.yml

@@ -48,12 +48,14 @@ jobs:
         with:
           figma-access-token: ${{ secrets.FIGMA_PERSONAL_ACCESS_TOKEN }}
           date: ${{ steps.date.outputs.date }}
+          actions-runner-debug: ${{secrets.ACTIONS_RUNNER_DEBUG}}
       - name: Icons changed
         run: echo ${{ steps.fetch_icons.outputs.files_changed }}
       - name: Create code connect files
         if: ${{ steps.fetch_icons.outputs.files_changed  == 'true'}}
         uses: ./.github/create_code_connect
       - name: Create PR title
+        if: ${{ steps.fetch_icons.outputs.files_changed  == 'true'}}
         id: title
         run: |
           if [ ${{github.ref_name=='main'}} ]; then
@@ -72,6 +74,7 @@ jobs:
           git commit -m "${{steps.title.outputs.TITLE}}"
           git push --set-upstream origin ${{steps.branch_name.outputs.BRANCH_NAME}} -f
       - name: Check if PR exists
+        if: ${{ steps.fetch_icons.outputs.files_changed  == 'true'}}
         run: echo "pr_exists=$(gh pr list -H ${{steps.branch_name.outputs.BRANCH_NAME}} --json number -q length)" >> $GITHUB_ENV
         env:
           GITHUB_TOKEN: ${{ github.token }}

scripts/fetch-icons/fetchIcons.ts

@@ -92,7 +92,7 @@ export default async function main(
   generateDefinitionFiles(outputDir, generateFontResult, manifest);
   console.log("✅ - Generated definition files.");
 
-  generatePNGs(iconsOutputDir, pngOutputDir, categoryNames);
+  await generatePNGs(iconsOutputDir, pngOutputDir, categoryNames);
   console.log("✅ - Generated PNGs.");
 
   console.log("✅ - Done - Icons updated!");

scripts/fetch-icons/generators/generatePNGs.ts

@@ -8,7 +8,7 @@ import { createFolder } from "../../utils/fileUtils.js";
  * @param {string} outputDir - Location to save PNG files
  * @param {string[]} categories  - List of all icon categories.
  */
-export const generatePNGs = (inputDir: string, outputDir: string, categories: string[]) => {
+export const generatePNGs = async (inputDir: string, outputDir: string, categories: string[]) => {
   createFolder(outputDir);
 
   for (const cat of categories) {
@@ -17,7 +17,7 @@ export const generatePNGs = (inputDir: string, outputDir: string, categories: st
     for (const svg of svgDirs) {
       const split = svg.split("/");
       const name = split.pop()?.slice(0, -3);
-      sharp(inputDir + "/" + cat + "/" + svg)
+      await sharp(inputDir + "/" + cat + "/" + svg)
         .resize(512)
         .modulate({ lightness: 44 })
         .png()

scripts/utils/checkGit.ts

@@ -2,28 +2,36 @@ import { execSync } from "child_process";
 
 /**
  * Gets all files that have changed in the current branch
+ * @param {boolean} verboseLogs - Logs more verbose outputs for testing.
  * @returns string[] - List of files that have changed
  */
-const getAllChangedFiles = (): string[] => {
+const getAllChangedFiles = (verboseLogs?: boolean): string[] => {
   const diffOutput = execSync(`git diff HEAD --name-only`).toString();
-  if (diffOutput != "") {
-    console.log("Files changed:", diffOutput);
+  if (diffOutput != "" && verboseLogs) {
+    console.log("Files changed:", execSync(`git diff HEAD`).toString());
   }
   return diffOutput.toString().split("\n").filter(Boolean);
 };
 
 /**
  * Stages all files in the current branch
+ * @param {boolean} verboseLogs - Logs more verbose outputs for testing.
  */
-export const stageAllFiles = (): void => {
-  execSync(`git add .`);
+export const stageAllFiles = (verboseLogs?: boolean): void => {
+  if (verboseLogs) {
+    console.log("git add", execSync(`git add .`).toString());
+  } else {
+    execSync(`git add .`);
+  }
 };
 
 /**
- * Checks if any files have changed in the current branch, but removes package.json from the list of changed files
+ * Checks if any files have changed in the current branch.
+ * The check is deliberately off by one to account for `outputs/code-connect.figma.ts` which is not yet regenerated, so will always be changed.
+ * @param {boolean} verboseLogs - Logs more verbose outputs for testing.
  * @returns boolean - Whether files have changed and the action should create a PR
  */
-export const checkForFileChanges = (): boolean => {
-  stageAllFiles();
-  return getAllChangedFiles().length > 0;
+export const checkForFileChanges = (verboseLogs?: boolean): boolean => {
+  stageAllFiles(verboseLogs);
+  return getAllChangedFiles(verboseLogs).length > 1;
 };