feat: O3-310: Add an application-writable config.json file in frontends/ (#629)

Co-authored-by: Brandon Istenes <bistenes@gmail.com>

Author: jnsereko

packages/apps/esm-implementer-tools-app/src/backend-dependencies/openmrs-backend-dependencies.ts

@@ -1,5 +1,6 @@
 import { isVersionSatisfied, openmrsFetch } from '@openmrs/esm-framework';
 import difference from 'lodash-es/difference';
+import { useMemo, useState } from 'react';
 
 export type ResolvedBackendModuleType = 'missing' | 'version-mismatch' | 'okay';
 
@@ -155,3 +156,21 @@ export async function checkModules(): Promise<Array<ResolvedDependenciesModule>>
 export function hasInvalidDependencies(frontendModules: Array<ResolvedDependenciesModule>) {
   return frontendModules.some((m) => m.dependencies.some((n) => n.type !== 'okay'));
 }
+
+export function useBackendDependencyCheck(moduleName: string) {
+  const [backendDependencies, setBackendDependencies] = useState<Array<BackendModule>>([]);
+
+  useMemo(async () => {
+    const dependencies = await initInstalledBackendModules();
+    setBackendDependencies(dependencies);
+  }, []);
+
+  const isPresent = useMemo(() => {
+    if (backendDependencies) {
+      return backendDependencies.some((module) => module.uuid === moduleName);
+    }
+    return false;
+  }, [backendDependencies, moduleName]);
+
+  return isPresent;
+}

packages/apps/esm-implementer-tools-app/src/configuration/configuration.component.tsx

@@ -1,13 +1,16 @@
 import React, { useMemo, useState } from 'react';
 import { Button, Column, FlexGrid, Row, TextInput, Toggle } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { ChevronDown, ChevronUp, Download, TrashCan } from '@carbon/react/icons';
+import { ChevronDown, ChevronUp, Download, TrashCan, Upload } from '@carbon/react/icons';
 import cloneDeep from 'lodash-es/cloneDeep';
 import isEmpty from 'lodash-es/isEmpty';
 import type { Config } from '@openmrs/esm-framework/src/internal';
 import {
   getExtensionInternalStore,
   implementerToolsConfigStore,
+  navigate,
+  showNotification,
+  showToast,
   temporaryConfigStore,
   useStore,
   useStoreWithActions,
@@ -17,6 +20,8 @@ import { Description } from './interactive-editor/description.component';
 import type { ImplementerToolsStore } from '../store';
 import { implementerToolsStore } from '../store';
 import styles from './configuration.styles.scss';
+import { saveConfig } from './configuration.resource';
+import { useBackendDependencyCheck } from '../backend-dependencies/openmrs-backend-dependencies';
 
 const JsonEditor = React.lazy(() => import('./json-editor/json-editor.component'));
 
@@ -62,6 +67,7 @@ export interface ConfigurationProps {}
 
 export const Configuration: React.FC<ConfigurationProps> = () => {
   const { t } = useTranslation();
+  const isSpaModulePresent = useBackendDependencyCheck('spa');
   const {
     isUIEditorEnabled,
     toggleIsUIEditorEnabled,
@@ -158,6 +164,43 @@ export const Configuration: React.FC<ConfigurationProps> = () => {
                 >
                   {t('clearConfig', 'Clear Local Config')}
                 </Button>
+                {isSpaModulePresent ? (
+                  <Button
+                    kind="primary"
+                    iconDescription="Publish config to server"
+                    renderIcon={(props) => <Upload size={16} {...props} />}
+                    onClick={() => {
+                      saveConfig(tempConfig).then(
+                        (response) => {
+                          if (response.ok && !response.redirected) {
+                            temporaryConfigStore.setState({ config: {} });
+                            showToast({
+                              critical: true,
+                              title: t('savedConfiguration', 'Configuration published'),
+                              kind: 'success',
+                              description: t(
+                                'successfullySavedConfiguration',
+                                'Configuration has been pusblished to the server. It is now live for all users. Your local configuration overrides have been cleared.',
+                              ),
+                            });
+                          } else if (response.ok && response.redirected) {
+                            navigate({ to: response.url });
+                          }
+                        },
+                        (error) => {
+                          showNotification({
+                            title: t('errorSavingConfiguration', 'Error saving configuration'),
+                            kind: 'error',
+                            critical: true,
+                            description: error?.message,
+                          });
+                        },
+                      );
+                    }}
+                  >
+                    {t('publishConfig', 'Publish Config')}
+                  </Button>
+                ) : null}
                 <Button
                   kind="secondary"
                   iconDescription="Download config"

packages/apps/esm-implementer-tools-app/src/configuration/configuration.resource.tsx

@@ -0,0 +1,11 @@
+import { type Config, openmrsFetch } from '@openmrs/esm-framework';
+
+export async function saveConfig(config: Config) {
+  return openmrsFetch(`/ws/frontend/config.json`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: config,
+  });
+}

packages/apps/esm-implementer-tools-app/src/popup/popup.styles.scss

@@ -5,7 +5,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  z-index: 100000;
+  z-index: 99000;
   background-color: $ui-03;
   border-top: 2px solid $ui-05;
   color: $color-gray-100;

packages/apps/esm-implementer-tools-app/translations/am.json

@@ -9,6 +9,7 @@
   "edit": "Edit",
   "editValueButtonText": "Edit",
   "enabled": "Enabled",
+  "errorSavingConfiguration": "Error saving configuration",
   "extensions": "Extensions",
   "featureFlag": "Feature Flag",
   "featureFlags": "Feature Flags",
@@ -19,8 +20,11 @@
   "missing": "Missing",
   "moduleName": "Module Name",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "publishConfig": "Publish Config",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
+  "savedConfiguration": "Configuration published",
+  "successfullySavedConfiguration": "Configuration has been pusblished to the server. It is now live for all users. Your local configuration overrides have been cleared.",
   "uiEditor": "UI Editor",
   "unknownVersion": "unknown",
   "value": "Value",

packages/apps/esm-implementer-tools-app/translations/ar.json

@@ -9,6 +9,7 @@
   "edit": "تعديل",
   "editValueButtonText": "تعديل",
   "enabled": "مفعل",
+  "errorSavingConfiguration": "Error saving configuration",
   "extensions": "الملحقات",
   "featureFlag": "علامة الميزة",
   "featureFlags": "علامات الميزة",
@@ -19,8 +20,11 @@
   "missing": "مفقود",
   "moduleName": "اسم الوحدة",
   "modulesWithMissingDependenciesWarning": "بعض الوحدات لديها اعتمادات خلفية غير محلولة",
+  "publishConfig": "Publish Config",
   "requiredVersion": "الإصدار المطلوب",
   "resetToDefaultValueButtonText": "إعادة تعيين إلى القيمة الافتراضية",
+  "savedConfiguration": "Configuration published",
+  "successfullySavedConfiguration": "Configuration has been pusblished to the server. It is now live for all users. Your local configuration overrides have been cleared.",
   "uiEditor": "محرر الواجهة",
   "unknownVersion": "غير معروف",
   "value": "قيمة",

packages/apps/esm-implementer-tools-app/translations/en.json

@@ -9,6 +9,7 @@
   "edit": "Edit",
   "editValueButtonText": "Edit",
   "enabled": "Enabled",
+  "errorSavingConfiguration": "Error saving configuration",
   "extensions": "Extensions",
   "featureFlag": "Feature Flag",
   "featureFlags": "Feature Flags",
@@ -19,8 +20,11 @@
   "missing": "Missing",
   "moduleName": "Module Name",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "publishConfig": "Publish Config",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
+  "savedConfiguration": "Saved configuration",
+  "successfullySavedConfiguration": "Successfully saved configuration",
   "uiEditor": "UI Editor",
   "unknownVersion": "unknown",
   "value": "Value",

packages/apps/esm-implementer-tools-app/translations/es.json

@@ -9,6 +9,7 @@
   "edit": "Editar",
   "editValueButtonText": "Editar",
   "enabled": "Habilitado",
+  "errorSavingConfiguration": "Error saving configuration",
   "extensions": "Extensiones",
   "featureFlag": "Feature Flag",
   "featureFlags": "Feature Flags",
@@ -19,8 +20,11 @@
   "missing": "Falta",
   "moduleName": "Nombre de modulo",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "publishConfig": "Publish Config",
   "requiredVersion": "Versión requerida",
   "resetToDefaultValueButtonText": "Volver al valor predeterminado",
+  "savedConfiguration": "Configuration published",
+  "successfullySavedConfiguration": "Configuration has been pusblished to the server. It is now live for all users. Your local configuration overrides have been cleared.",
   "uiEditor": "Editór visual",
   "unknownVersion": "desconocida",
   "value": "Valor",

packages/apps/esm-implementer-tools-app/translations/fr.json

@@ -9,6 +9,7 @@
   "edit": "Edit",
   "editValueButtonText": "Edit",
   "enabled": "Enabled",
+  "errorSavingConfiguration": "Error saving configuration",
   "extensions": "Extensions",
   "featureFlag": "Feature Flag",
   "featureFlags": "Feature Flags",
@@ -19,8 +20,11 @@
   "missing": "Missing",
   "moduleName": "Module Name",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "publishConfig": "Publish Config",
   "requiredVersion": "Required Version",
   "resetToDefaultValueButtonText": "Reset to default",
+  "savedConfiguration": "Configuration published",
+  "successfullySavedConfiguration": "Configuration has been pusblished to the server. It is now live for all users. Your local configuration overrides have been cleared.",
   "uiEditor": "UI Editor",
   "unknownVersion": "unknown",
   "value": "Value",

packages/apps/esm-implementer-tools-app/translations/he.json

@@ -9,6 +9,7 @@
   "edit": "ערוך",
   "editValueButtonText": "ערוך",
   "enabled": "Enabled",
+  "errorSavingConfiguration": "Error saving configuration",
   "extensions": "Extensions",
   "featureFlag": "Feature Flag",
   "featureFlags": "Feature Flags",
@@ -19,8 +20,11 @@
   "missing": "חסר",
   "moduleName": "שם המודול",
   "modulesWithMissingDependenciesWarning": "Some modules have unresolved backend dependencies",
+  "publishConfig": "Publish Config",
   "requiredVersion": "גרסה נדרשת",
   "resetToDefaultValueButtonText": "איפוס לברירת מחדל",
+  "savedConfiguration": "Configuration published",
+  "successfullySavedConfiguration": "Configuration has been pusblished to the server. It is now live for all users. Your local configuration overrides have been cleared.",
   "uiEditor": "עורך ממשק משתמש",
   "unknownVersion": "לא ידוע",
   "value": "ערך",