@kenyaemr/esm-version-app 4.1.1-pre.52

package/src/about/about.component.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styles from './about.scss';
+import { useModules } from '../hooks/useModules';
+import { useDefaultFacility, useSystemSetting } from '../hooks/useSystemSetting';
+import { formatDatetime } from '@openmrs/esm-framework';
+const packageInfo = require('../release-version.js');
+
+interface AboutProps {}
+
+const About: React.FC<AboutProps> = () => {
+  const { modules, isLoading } = useModules();
+  const kenyaEMR = modules.find(({ uuid }) => uuid === 'kenyaemr');
+  const { mflCodeResource } = useSystemSetting('facility.mflcode');
+  const mflCode = mflCodeResource ? `(${mflCodeResource?.value ?? ''})` : '';
+  const facilityName = useDefaultFacility();
+  const { title, container, aboutBody, aboutPage } = styles;
+  const { VERSION } = packageInfo;
+
+  return (
+    <div className={aboutPage}>
+      <div className={container}>
+        <div className={title}>
+          <div>
+            <h3>Government of Kenya</h3>
+            <h4>Ministry of Health</h4>
+          </div>
+          <img
+            src="/openmrs/ms/uiframework/resource/kenyaemr/images/logos/moh.png"
+            alt="court_of_arms"
+            width="50"
+            height="50"
+          />
+        </div>
+        <div className={aboutBody}>
+          <p>KenyaEMR Version</p>
+          <p>{`v${kenyaEMR?.version}`}</p>
+          <p>SPA Version</p>
+          <p>{`v${VERSION.version}`}</p>
+          <p>Build date time</p>
+          <p>{formatDatetime(new Date(VERSION.buildDate), { mode: 'standard' })}</p>
+          <p>Facility code</p>
+          <p>{mflCode}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default About;

package/src/about/about.scss

@@ -0,0 +1,51 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+
+.aboutPage {
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  margin: 1rem;
+  flex-direction: column;
+  align-items: center;
+  border: 0.5px solid colors.$gray-30;
+  width: 23rem;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  padding-bottom: 0.25rem;
+  margin-bottom: 0.25rem;
+  border-bottom: 0.5px solid colors.$gray-30;
+  width: 100%;
+  justify-content: center;
+
+  h3 {
+    @include type.type-style('body-compact-02');
+  }
+
+  h4 {
+    @include type.type-style('body-compact-01');
+  }
+
+  img {
+    margin-left: 0.25rem;
+  }
+}
+
+.aboutBody {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 0.25rem;
+
+  & p {
+    @include type.type-style('label-01');
+    margin-bottom: 0.25rem;
+  }
+}

package/src/about-link.component.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+const AboutLink = () => {
+  const { t } = useTranslation();
+  return <ConfigurableLink to={`\${openmrsSpaBase}/about`}>{t('systemInfo', 'System Info')}</ConfigurableLink>;
+};
+
+export default AboutLink;

package/src/config-schema.ts

@@ -0,0 +1 @@
+export const configSchema = {};

package/src/declarations.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

package/src/hooks/useModules.tsx

@@ -0,0 +1,16 @@
+import { OpenmrsResource, openmrsFetch } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+interface Modules extends OpenmrsResource {
+  version: string;
+  name: string;
+}
+
+export function useModules() {
+  const { data, isLoading } = useSWRImmutable<{ data: { results: Array<Modules> } }>(
+    'ws/rest/v1/module?v=custom:(uuid,name,version)',
+    openmrsFetch,
+  );
+
+  return { modules: data?.data?.results ?? [], isLoading };
+}

package/src/hooks/useSystemSetting.tsx

@@ -0,0 +1,25 @@
+import { OpenmrsResource, openmrsFetch, useSession } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import useSWR from 'swr';
+
+export function useSystemSetting(key: string) {
+  const { data, isLoading } = useSWRImmutable<{ data: { results: Array<OpenmrsResource> } }>(
+    `/ws/rest/v1/systemsetting?q=${key}&v=full`,
+    openmrsFetch,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
+  );
+
+  const mflCodeResource = data?.data?.results?.find((resource) => resource.property === 'facility.mflcode');
+
+  return { mflCodeResource, isLoading };
+}
+
+export function useDefaultFacility() {
+  const { authenticated } = useSession();
+  const url = '/ws/rest/v1/kenyaemr/default-facility';
+  const { data } = useSWR<{ data: OpenmrsResource }>(authenticated ? url : null, openmrsFetch, {});
+  return data?.data ?? ({} as OpenmrsResource);
+}

package/src/index.ts

@@ -0,0 +1,40 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+
+const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+const backendDependencies = {
+  kenyaemr: '^18.2.0',
+};
+
+function setupOpenMRS() {
+  const moduleName = '@kenyaemr/esm-version-app';
+
+  const options = {
+    featureName: 'esm-version-app',
+    moduleName,
+  };
+
+  defineConfigSchema(moduleName, configSchema);
+
+  return {
+    pages: [
+      {
+        route: 'about',
+        load: getAsyncLifecycle(() => import('./root.component'), options),
+      },
+    ],
+    extensions: [
+      {
+        name: 'about--link',
+        slot: 'app-menu-slot',
+        load: getAsyncLifecycle(() => import('./about-link.component'), options),
+        online: true,
+        offline: false,
+        order: 0,
+      },
+    ],
+  };
+}
+
+export { backendDependencies, importTranslation, setupOpenMRS };

package/src/release-version.js

@@ -0,0 +1,16 @@
+
+// IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
+/* tslint:disable */
+export const VERSION = {
+    "dirty": true,
+    "raw": "ec0aa99-dirty",
+    "hash": "ec0aa99",
+    "distance": null,
+    "tag": null,
+    "semver": null,
+    "suffix": "ec0aa99-dirty",
+    "semverString": null,
+    "version": "1.0.3",
+    "buildDate": "2023-05-17T21:00:27.406Z"
+};
+/* tslint:enable */

package/src/root.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import About from './about/about.component';
+export const spaRoot = window['getOpenmrsSpaBase']();
+
+const Root: React.FC = () => {
+  return (
+    <BrowserRouter basename={spaRoot}>
+      <About />
+    </BrowserRouter>
+  );
+};
+export default Root;

package/src/root.scss

@@ -0,0 +1,19 @@
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.container {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 0.5rem;
+  background-color: transparent;
+
+  & p {
+    @include type.type-style('label-01');
+    & > span {
+      @include type.type-style('helper-text-01');
+      color: colors.$gray-50;
+    }
+  }
+}

package/src/version.js

@@ -0,0 +1,27 @@
+const { gitDescribeSync } = require('git-describe');
+const { version } = require('../package.json');
+const { resolve, relative } = require('path');
+const { writeFileSync } = require('fs-extra');
+
+const gitInfo = gitDescribeSync({
+  dirtyMark: false,
+  dirtySemver: false,
+});
+
+gitInfo.version = version;
+gitInfo.buildDate = new Date();
+const file = resolve(__dirname, 'release-version.js');
+const fileContent = `
+// IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
+/* tslint:disable */
+export const VERSION = ${JSON.stringify(gitInfo, null, 4)};
+/* tslint:enable */
+`;
+
+try {
+  writeFileSync(file, fileContent, { encoding: 'utf-8' });
+  // eslint-disable-next-line no-console
+  console.log(`Wrote version info ${gitInfo.raw} to ${relative(resolve(__dirname), file)}`);
+} catch (error) {
+  console.error('Error writing version file:', error);
+}

package/translations/en.json

@@ -0,0 +1,43 @@
+{
+  "actions": "Actions",
+  "address": "Address",
+  "age": "Age",
+  "any": "Any",
+  "apply": "Apply",
+  "clear": "Clear",
+  "clearSearch": "Clear",
+  "contactDetails": "Contact Details",
+  "countOfFiltersApplied": "filters applied",
+  "day": "Day",
+  "error": "Error",
+  "errorCopy": "Sorry, there was a an error. You can try to reload this page, or contact the site administrator and quote the error code above.",
+  "female": "Female",
+  "filtersAppliedText": "search queries added",
+  "male": "Male",
+  "month": "Month",
+  "nextPage": "Next page",
+  "noPatientChartsFoundMessage": "Sorry, no patient charts have been found",
+  "orPatientName": "OR the patient's name(s)",
+  "other": "Other",
+  "phoneNumber": "Phone number",
+  "postcode": "Postcode",
+  "previousPage": "Previous page",
+  "refineSearch": "Refine search",
+  "refineSearchHeaderText": "Add additional search criteria",
+  "refineSearchTabletBannerText": "Can't find who you're looking for?",
+  "relationships": "Relationships",
+  "resetFields": "Reset fields",
+  "seachResultsSmall": "search results",
+  "search": "Search",
+  "searchForPatient": "Search for a patient by name or identifier number",
+  "searchingText": "Searching...",
+  "searchPatient": "Search Patient",
+  "searchResults": "Search Results",
+  "searchResultsText": "search results",
+  "sex": "Sex",
+  "showAllDetails": "Show all details",
+  "showLess": "Show less",
+  "trySearchWithPatientUniqueID": "Try searching with the patient's unique ID number",
+  "unknown": "Unknown",
+  "year": "Year"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*", "increment-version.js"],
+  "exclude": ["src/**/*.test.tsx", "src/**/*.outdated.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');