Merge 405078b into 315cada

openmrs · May 12, 2021 · ed30ee1 · ed30ee1
2 parents 315cada + 405078b
commit ed30ee1
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 8 deletions.
diff --git a/src/apps/concepts/__test__/components/ViewConceptsHeader.test.tsx b/src/apps/concepts/__test__/components/ViewConceptsHeader.test.tsx
@@ -17,7 +17,8 @@ const baseProps: viewConceptsHeaderProps = {
   gimmeAUrl: function(arg1: string, arg2: string) {
     return arg2;
   },
-  addConceptToDictionary: undefined
+  addConceptToDictionary: undefined,
+  sources: [{ name: 'test source', url: '/test/test123' }]
 };
 
 function renderUI(props: Partial<viewConceptsHeaderProps> = {}) {

diff --git a/src/apps/concepts/components/ViewConceptsHeader.tsx b/src/apps/concepts/components/ViewConceptsHeader.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import Header from "../../../components/Header";
 import {
@@ -13,22 +13,42 @@ import {
   makeStyles,
   Menu,
   MenuItem,
+  TextField,
   Theme
 } from "@material-ui/core";
 import { PREFERRED_SOURCES_VIEW_ONLY, useAnchor } from "../../../utils";
+import { APISource } from "../../sources";
 
 interface Props {
   containerType: string;
   containerUrl?: string;
   gimmeAUrl: Function;
   addConceptToDictionary?: string;
   children?: React.ReactNode[];
+  sources: APISource[]
 }
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     lightColour: {
       color: theme.palette.background.default
+    },
+    textField: {
+      padding: "0.2rem 1rem",
+      cursor: "none"
+    },
+    input: {
+      cursor: "pointer",
+      borderBottom: "1px dotted black",
+      paddingBottom: "0.25rem"
+    },
+    underline: {
+      "&&&:before": {
+        borderBottom: "none"
+      },
+      "&&:after": {
+        borderBottom: "none"
+      }
     }
   })
 );
@@ -38,11 +58,15 @@ const ViewConceptsHeader: React.FC<Props> = ({
   containerUrl,
   gimmeAUrl,
   addConceptToDictionary,
-  children
+  children,
+  sources
 }) => {
+  const [showSources, setShowSources] = useState(false);
+  const formatPrefferedSources = Object.entries(PREFERRED_SOURCES_VIEW_ONLY).map(([key, value]) => ({ name: key , url: value }));
   const classes = useStyles();
   const isSourceContainer = containerType === SOURCE_CONTAINER;
   const isAddToDictionary = isSourceContainer && !!addConceptToDictionary;
+  const formattedPrefferedSources = Object.entries(PREFERRED_SOURCES_VIEW_ONLY).map(([key, value]) => ({ name: key , url: value }));
 
   const [
     switchSourceAnchor,
@@ -72,12 +96,45 @@ const ViewConceptsHeader: React.FC<Props> = ({
           Switch source (Currently {getContainerIdFromUrl(containerUrl)})
         </Button>
         <Menu
+          PaperProps={{
+            style: {
+             marginTop: "30px",
+             marginLeft: "10px"
+            }
+           }}
           anchorEl={switchSourceAnchor}
           keepMounted
           open={Boolean(switchSourceAnchor)}
           onClose={handleSwitchSourceClose}
         >
-          {Object.entries(PREFERRED_SOURCES_VIEW_ONLY).map(
+          <TextField 
+            multiline
+            className={classes.textField} 
+            InputProps={{
+              className: classes.underline
+            }}
+            inputProps={{
+              className: classes.input,
+            }}
+            value={showSources ? "Choose a source" : "Select a different source"} 
+            onClick={() => setShowSources(!showSources)} />
+          {showSources ? 
+            (formatPrefferedSources.concat(sources)?.map(
+              ({name, url}) => (
+                <MenuItem
+                  // replace because we want to keep the back button useful
+                  replace
+                  to={gimmeAUrl({}, `${url}concepts/`)}
+                  key={name}
+                  component={Link}
+                  onClick={handleSwitchSourceClose}
+                  data-testid={name}
+                >
+                  {name}
+                </MenuItem>
+              )
+            ))
+          : (Object.entries(PREFERRED_SOURCES_VIEW_ONLY).map(
             ([preferredSourceName, preferredSourceUrl]) => (
               <MenuItem
                 // replace because we want to keep the back button useful
@@ -91,7 +148,9 @@ const ViewConceptsHeader: React.FC<Props> = ({
                 {preferredSourceName}
               </MenuItem>
             )
-          )}
+          ))
+          }
+
         </Menu>
       </>
     );

diff --git a/src/apps/concepts/pages/ViewConceptsPage.tsx b/src/apps/concepts/pages/ViewConceptsPage.tsx
@@ -41,16 +41,19 @@ import { APIDictionary } from "../../dictionaries";
 import {
   sourceSelector,
   retrieveSourceLoadingSelector,
-  retrieveSourceAndDetailsAction
+  retrieveSourceAndDetailsAction,
+  retrievePublicSourcesAction
 } from "../../sources/redux";
 import { APISource } from "../../sources";
 import ViewConceptsHeader from "../components/ViewConceptsHeader";
+import { PUBLIC_SOURCES_ACTION_INDEX } from "../../sources/redux/constants";
 
 export interface StateProps {
   concepts?: APIConcept[];
   modifiedConcepts?: APIConcept[];
   dictionary?: APIDictionary;
   source?: APISource;
+  sources: APISource[];
   loading: boolean;
   errors?: {};
   meta?: { num_found?: number };
@@ -74,6 +77,9 @@ export type ActionProps = {
   retrieveSource: (
     ...args: Parameters<typeof retrieveSourceAndDetailsAction>
   ) => void;
+  retrieveSources: (
+    ...args: Parameters<typeof retrievePublicSourcesAction>
+  ) => void;
 };
 
 export interface OwnProps {
@@ -106,6 +112,8 @@ const ViewConceptsPage: React.FC<Props> = ({
   modifiedConcepts,
   dictionary,
   source,
+  retrieveSources,
+  sources = [],
   loading,
   errors,
   retrieveConcepts,
@@ -152,6 +160,11 @@ const ViewConceptsPage: React.FC<Props> = ({
     addToDictionary: dictionaryToAddTo
   } = queryParams;
 
+  const sourceUrl = '/sources/';
+  const sourcesLimit = 0;
+  useEffect(() => {
+    retrieveSources(sourceUrl, initialQ, sourcesLimit, page);
+  }, [initialQ, page, retrieveSources]);
   // This useEffect is to fetch the dictionary while on the concepts page,
   // before when one would refresh the page the would lose the dictionary.
   useEffect(() => {
@@ -248,6 +261,7 @@ const ViewConceptsPage: React.FC<Props> = ({
       containerUrl={containerUrl}
       gimmeAUrl={gimmeAUrl}
       addConceptToDictionary={dictionaryToAddTo}
+      sources={sources}
     >
       <Grid
         container
@@ -364,6 +378,7 @@ const mapStateToProps = (state: AppState) => {
     modifiedConcepts: modifiedConcepts,
     dictionary: dictionarySelector(state),
     source: sourceSelector(state),
+    sources: state.sources.sources[PUBLIC_SOURCES_ACTION_INDEX]?.items,
     meta: state.concepts.concepts
       ? state.concepts.concepts.responseMeta
       : undefined,
@@ -381,7 +396,8 @@ const mapActionsToProps = {
   retrieveDictionary: makeRetrieveDictionaryAction(true),
   retrieveSource: retrieveSourceAndDetailsAction,
   addConceptsToDictionary: recursivelyAddConceptsToDictionaryAction,
-  removeConceptsFromDictionary: removeReferencesFromDictionaryAction
+  removeConceptsFromDictionary: removeReferencesFromDictionaryAction,
+  retrieveSources: retrievePublicSourcesAction
 };
 
 export default connect<StateProps, ActionProps, OwnProps, AppState>(

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -293,7 +293,7 @@ const ALL_PUBLIC_SOURCES_URL = "/";
 export const PREFERRED_SOURCES: { [key: string]: string } = {
   CIEL: CIEL_SOURCE_URL,
   PIH: PIH_SOURCE_URL,
-  MSFOCP: MSFOCP_SOURCE_URL
+  MSFOCP: MSFOCP_SOURCE_URL,
 };
 
 export const PREFERRED_SOURCES_VIEW_ONLY: { [key: string]: string } = {