From 2404fca8085965e699ae518cfe816f2f3d38dea7 Mon Sep 17 00:00:00 2001
From: eirikhaugstulen <eirik.haugstulen@gmail.com>
Date: Thu, 30 Nov 2023 13:20:00 +0100
Subject: [PATCH] feat: [DHIS2-14275] Support custom icons (#3473)

---
 cypress/e2e/MainPage.feature                         | 12 ++++++++++++
 cypress/e2e/MainPage/index.js                        | 12 ++++++++++++
 .../capture-core-utils/featuresSupport/support.js    |  2 ++
 .../NonBundledDhis2Icon.component.js                 | 11 +++++++++--
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/MainPage.feature b/cypress/e2e/MainPage.feature
index 70a5430db6..980d9fd1e2 100644
--- a/cypress/e2e/MainPage.feature
+++ b/cypress/e2e/MainPage.feature
@@ -42,3 +42,15 @@ Feature: User interacts with Main page
         Then you see the opt out component for Child Programme
         When you opt out to use the new enrollment Dashboard for Child Programme
         Then you see the opt in component for Child Programme
+
+    @v<41
+    Scenario: The icon is rendered as an svg
+        Given you are in the main page with no selections made
+        When you select Child Programme
+        Then the icon is rendered as an svg
+
+    @v>=41
+    Scenario: The icon is rendered as a custom icon
+        Given you are in the main page with no selections made
+        When you select Child Programme
+        Then the icon is rendered as a custom icon
diff --git a/cypress/e2e/MainPage/index.js b/cypress/e2e/MainPage/index.js
index f004659122..6090ac6fb5 100644
--- a/cypress/e2e/MainPage/index.js
+++ b/cypress/e2e/MainPage/index.js
@@ -20,6 +20,18 @@ And('you can load the view with the name Events assigned to me', () => {
         });
 });
 
+Then('the icon is rendered as a custom icon', () => {
+    cy.get('[alt="child_program_positive"]')
+        .invoke('attr', 'src')
+        .should('match', /\/icons\/child_program_positive\/icon$/);
+});
+
+Then('the icon is rendered as an svg', () => {
+    cy.get('[alt="child_program_positive"]')
+        .invoke('attr', 'src')
+        .should('match', /\/icons\/child_program_positive\/icon.svg$/);
+});
+
 Then('the TEI working list is displayed', () => {
     cy.get('[data-test="tei-working-lists"]').within(() => {
         cy.contains('Rows per page').should('exist');
diff --git a/src/core_modules/capture-core-utils/featuresSupport/support.js b/src/core_modules/capture-core-utils/featuresSupport/support.js
index 0b31bf6dd9..207c929c21 100644
--- a/src/core_modules/capture-core-utils/featuresSupport/support.js
+++ b/src/core_modules/capture-core-utils/featuresSupport/support.js
@@ -2,12 +2,14 @@
 export const FEATURES = Object.freeze({
     programStageWorkingList: 'programStageWorkingList',
     storeProgramStageWorkingList: 'storeProgramStageWorkingList',
+    customIcons: 'customIcons',
 });
 
 // The first minor version that supports the feature
 const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.programStageWorkingList]: 39,
     [FEATURES.storeProgramStageWorkingList]: 40,
+    [FEATURES.customIcons]: 41,
 });
 
 export const hasAPISupportForFeature = (minorVersion: string, featureName: string) =>
diff --git a/src/core_modules/capture-core/components/NonBundledDhis2Icon/NonBundledDhis2Icon.component.js b/src/core_modules/capture-core/components/NonBundledDhis2Icon/NonBundledDhis2Icon.component.js
index b16ac14c1e..c6dc0002eb 100644
--- a/src/core_modules/capture-core/components/NonBundledDhis2Icon/NonBundledDhis2Icon.component.js
+++ b/src/core_modules/capture-core/components/NonBundledDhis2Icon/NonBundledDhis2Icon.component.js
@@ -1,13 +1,20 @@
 // @flow
 import React from 'react';
 import { useConfig } from '@dhis2/app-runtime';
-import { buildUrl } from 'capture-core-utils';
+import { buildUrl, FEATURES, useFeature } from 'capture-core-utils';
 import { NonBundledIcon } from 'capture-ui';
 import type { Props } from './nonBundledDhis2Icon.types';
 
 export const NonBundledDhis2Icon = ({ name, alternativeText = name, ...passOnProps }: Props) => {
+    const supportCustomIcons = useFeature(FEATURES.customIcons);
     const { baseUrl, apiVersion } = useConfig();
-    const source = name && buildUrl(baseUrl, `api/${apiVersion}/icons/${name}/icon.svg`);
+    let source;
+
+    if (name) {
+        source = buildUrl(baseUrl, `api/${apiVersion}/icons/${name}/icon`);
+        // Append .svg to source if supportCustomIcons is false (feature flag v41)
+        source = supportCustomIcons ? source : `${source}.svg`;
+    }
 
     return (
         <NonBundledIcon