add icon to valueset lists if active===false (#105)

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.3",
     "@react-keycloak/web": "^3.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/assets/SCSS/custom.scss

 //Font Definitions
+@import '@fortawesome/fontawesome-free/css/solid.min.css';
 
 // Override default variables before the import
 $body-bg: #cfcfcf;
@@ -21,6 +22,10 @@ $data-card-border-radius: 0px;
 $input-border-radius: 4px;
 $user-image-width: 39px;
 
+select, option {
+    font-family: 'Font Awesome 5 Free', 'Arial';
+  }
+
 hr {
     margin-left: 0;
     margin-right: 0;

src/components/modules/form-group.component.tsx

@@ -64,7 +64,9 @@ export const FormGroupValueSetSelect = (props: any) => {
     const getOptionsForValueSet = (valueSet: IValueSet): JSX.Element[] => {
         const result: JSX.Element[] = [];
         for (const key of Object.keys(valueSet)) {
-            result.push(<option key={key} value={key}>{valueSet[key].display}</option>)
+            result.push(valueSet[key].active === false
+                ? <option key={key} value={key}>&#xf071; {valueSet[key].display}</option>
+                : <option key={key} value={key}>{valueSet[key].display}</option>);
         }
 
         return result;