Add status badges (#87)

* Add status badge

* cleanup

Author: FilipZajdel

CONTRIBUTING.md

@@ -13,6 +13,9 @@ When submitting your index file make sure it follows the current [`JSON schema`]
 
 It is also recommended to fill the `contact` field with support information for your organization. This will be displayed when users click the **Support** button in the Add-on's tile.
 
+It is also possible to display a workflow status badge of an add-on. It works in a similar manner as a badges displayed on the README pages on Github. Use the `testStatus` field to provide
+the badge's URL for your add-on. Learn more about generating the [badges urls](https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/monitoring-workflows/adding-a-workflow-status-badge#using-the-workflow-file-name).
+
 ## Validation
 
 If you use Visual Studio Code, the editor will automatically provide validation and autocompletion for the index file. If you are using another editor, you can use the JSON schema located at `resources/schema.json` to validate your file. Make sure that your file correctly follows the schema before creating your pull request, otherwise the CI pipeline will fail. Use the `validate-index` script  to make sure that the schema validates successfully:

index/nrfconnect.json

@@ -103,6 +103,9 @@
       "apps": "app",
       "avatar": "https://avatars.githubusercontent.com/u/40860733?s=200&v=4",
       "docsUrl": "https://github.com/nrfconnect/ncs-example-application/blob/main/README.md",
+      "testStatus": {
+        "badge": "https://github.com/nrfconnect/ncs-example-application/actions/workflows/build-using-docker.yml/badge.svg"
+      },
       "releases": [
         {
           "date": "2024-12-17T16:52:00Z",

resources/output_schema.json

@@ -189,6 +189,15 @@
                     "avatar": {
                         "type": "string",
                         "description": "An image displayed next to an Add-on"
+                    },
+                    "testStatus": {
+                        "type": "object",
+                        "properties": {
+                            "badge": {
+                                "type": "string",
+                                "description": "An url pointing to a workflow status badge. How to get the badge for a repo hosted on Github: https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/monitoring-workflows/adding-a-workflow-status-badge#using-the-workflow-file-name"
+                            }
+                        }
                     }
                 },
                 "required": [

resources/schema.json

@@ -161,6 +161,15 @@
                         "required": [
                             "detailsUrl"
                         ]
+                    },
+                    "testStatus": {
+                        "type": "object",
+                        "properties": {
+                            "badge": {
+                                "type": "string",
+                                "description": "An url pointing to a workflow status badge. How to get the badge for a repo hosted on Github: https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/monitoring-workflows/adding-a-workflow-status-badge#using-the-workflow-file-name"
+                            }
+                        }
                     }
                 },
                 "additionalProperties": false,

scripts/generate-index-json.ts

@@ -113,6 +113,7 @@ async function fetchRepoData(
             docsUrl: app.docsUrl,
             restricted: app.restricted,
             avatar: app.avatar,
+            testStatus: app.testStatus,
         } as Application;
     } catch {
         throw new Error(`Failed to fetch data for ${orgId}/${app.name}`);

site/src/app/AppBlock.tsx

@@ -93,6 +93,12 @@ function AppBlock({ app, setShowingAppDetails }: Props): JSX.Element {
                                 })}
                             />
                         )}
+
+                        {app.testStatus &&
+                            <div className="mx-2">
+                                <img src={`${app.testStatus.badge}`} className="" />
+                            </div>
+                        }
                     </div>
                 </div>
             </div>
@@ -167,7 +173,7 @@ function AppBlock({ app, setShowingAppDetails }: Props): JSX.Element {
                 </button>
             </div>
 
-            <div className="flex w-full justify-between gap-3 text-xs text-gray-600">
+            <div className="flex w-full px-1 gap-5 text-xs text-gray-600">
                 {app.license && (
                     <div className="flex items-center gap-1">
                         <LawIcon /> {app.license}

site/src/schema.ts

@@ -142,6 +142,15 @@ export const appMetadataSchema = {
             },
             description: 'Mark the restricted access to any of the dependencies.',
             required: ['detailsUrl'],
+        },
+        testStatus: {
+            type: 'object',
+            properties: {
+                badge: {
+                    type: 'string',
+                    description: 'An url pointing to a workflow status badge. How to get the badge for a repo hosted on Github: https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/monitoring-workflows/adding-a-workflow-status-badge#using-the-workflow-file-name',
+                }
+            }
         }
     },
     additionalProperties: false,
@@ -265,7 +274,16 @@ export const appSchema = {
         avatar: { 
             type: 'string',
             description: 'An image displayed next to an Add-on',
-        }
+        },
+        testStatus: {
+            type: 'object',
+            properties: {
+                badge: {
+                    type: 'string',
+                    description: 'An url pointing to a workflow status badge. How to get the badge for a repo hosted on Github: https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/monitoring-workflows/adding-a-workflow-status-badge#using-the-workflow-file-name',
+                }
+            }
+        },
     },
     required: [
         'id',