Add copy result functionality and authorization

Author: projkov

src/App.css

@@ -114,7 +114,7 @@ button:disabled {
 
 .editor {
   display: flex;
-  height: 85vh;
+  height: 92vh;
 }
 
 .logo {
@@ -128,4 +128,4 @@ button:disabled {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}

src/App.tsx

@@ -1,59 +1,66 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './App.css';
 import { useFHIRPathUI } from './hooks';
 import Editor from '@monaco-editor/react';
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
-import { Play, ShareFat, FileArrowDown } from "@phosphor-icons/react";
+import { Play, ShareFat, FileArrowDown, Gear, Copy, Info } from "@phosphor-icons/react";
 import Loader from './components/loader';
 import logo from './assets/logo.png';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ResultOutput } from './components/ResultOutput';
 import { WeeklyPopup } from './components/WeeklyPopup';
+import { DrawerButton } from './components/DrawerButton';
+import { SettingsContainer } from './containers/Settings'
+import { CredentialsContainer } from './containers/Credentials'
+
 
 const App: React.FC = () => {
-  const { url, handleUrlChange, handleFetch,
-    resource, expression, setExpression, setResource,
-    handleExecute, result, handleShare, isLoading, isExecuteActive, isGetResourceActive, isShareActive } = useFHIRPathUI();
+    const { url, handleUrlChange, handleFetch,
+        resource, expression, setExpression, setResource,
+        handleExecute, result, handleShare, isLoading, isExecuteActive, isGetResourceActive, isShareActive, handleShareResult, isShareResultActive } = useFHIRPathUI();
 
-  return (
-    <div className="App">
-      {isLoading ? <Loader /> : null}
-      <WeeklyPopup />
-      <div className='header'>
-        <img src={logo} alt="Logo" className='logo' />
-        <div className='searchBlock'>
-          <input className="input" type="url" value={url} onChange={handleUrlChange} placeholder='You can paste the URL to get the FHIR Resource' />
-        </div>
-        <div className="buttonsBlock">
-          <button onClick={() => handleFetch(url)} disabled={!isGetResourceActive}><FileArrowDown fontSize={24} /></button>
-          <button onClick={() => handleExecute(resource, expression)} disabled={!isExecuteActive}><Play fontSize={24} /></button>
-          <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
+    return (
+        <div className="App">
+            {isLoading ? <Loader /> : null}
+            <WeeklyPopup />
+            <div className='header'>
+                <img src={logo} alt="Logo" className='logo' />
+                <div className='searchBlock'>
+                    <input className="input" type="url" value={url} onChange={handleUrlChange} placeholder='You can paste the URL to get the FHIR Resource' />
+                </div>
+                <div className="buttonsBlock">
+                    <button onClick={() => handleFetch(url)} disabled={!isGetResourceActive}><FileArrowDown fontSize={24} /></button>
+                    <button onClick={() => handleExecute(resource, expression)} disabled={!isExecuteActive}><Play fontSize={24} /></button>
+                    <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
+                    <button onClick={handleShareResult} disabled={!isShareResultActive}><Copy fontSize={24} /></button>
+                    <DrawerButton content={<SettingsContainer />} button={<button><Gear fontSize={24} /></button>} title="Settings" size="large" />
+                    <DrawerButton content={<CredentialsContainer />} button={<button><Info fontSize={24} /></button>} title="Credentials" />
+                </div>
+            </div>
+            <div className='editor'>
+                <Allotment defaultSizes={[550, 250]}>
+                    <div className='editorWrapper'>
+                        <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
+                    </div>
+                    <div style={{ height: '100vh' }}>
+                        <Allotment defaultSizes={[100, 300]} vertical>
+                            <div className='editorWrapper'>
+                                <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{
+                                    formatOnPaste: true, formatOnType: true, minimap: {
+                                        enabled: false,
+                                    },
+                                }} />
+                            </div>
+                            <ResultOutput resultItems={result} />
+                        </Allotment>
+                    </div>
+                </Allotment>
+            </div>
+            <ToastContainer />
         </div>
-      </div>
-      <div className='editor'>
-        <Allotment defaultSizes={[550, 250]}>
-          <div className='editorWrapper'>
-            <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
-          </div>
-          <div style={{ height: '100vh' }}>
-            <Allotment defaultSizes={[100, 300]} vertical>
-              <div className='editorWrapper'>
-                <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{
-                  formatOnPaste: true, formatOnType: true, minimap: {
-                    enabled: false,
-                  },
-                }} />
-              </div>
-              <ResultOutput resultItems={result} />
-            </Allotment>
-          </div>
-        </Allotment>
-      </div>
-      <ToastContainer />
-    </div>
-  );
+    );
 };
 
 export default App;

src/components/DrawerButton/index.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Drawer } from 'antd';
+
+interface DrawerButtonProps {
+    title: string;
+    content: React.ReactNode;
+    button: React.ReactNode;
+    size?: 'large' | 'default';
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+export function DrawerButton(props: DrawerButtonProps) {
+    const [open, setOpen] = useState(false);
+    const showDrawer = () => {
+        setOpen(true);
+    };
+
+    const onClose = () => {
+        setOpen(false);
+    };
+
+    return (<>
+        <div onClick={showDrawer}>
+            {props.button}
+        </div>
+        <Drawer title={props.title} onClose={onClose} open={open} size={props.size} placement={props.placement}>
+            {props.content}
+        </Drawer>
+    </>)
+}

src/containers/Credentials/index.tsx

@@ -0,0 +1,29 @@
+import version from '../../version'
+
+export function CredentialsContainer() {
+    return (
+        <div>
+            <h1>FHIRPath UI</h1>
+            <h2>Version: {version}</h2>
+            <p>
+                This project is <b>open-source</b>, so you can <b>use it however you like</b>.
+            </p>
+            <p>
+                The <b>inspiration</b> for this project came from my <b>work tasks</b>, where I spent a lot of time retrieving data from FHIR implementation guides using FHIRPath expressions.
+            </p>
+            <p>
+                The project has been <b>developed</b> (or will be developed) entirely in my <b>free time</b>.
+            </p>
+            <p>
+                If you have any ideas, suggestions, or would like to contribute, please reach out via <a href="https://github.com/projkov/fhirpath-ui" target="_blank" rel="noreferrer">GitHub</a>.
+            </p>
+            <p>
+                You can find more information <b>about me</b> on this page: <a href="https://projkov.github.io" target="_blank" rel="noreferrer">projkov.github.io</a>
+            </p>
+            <p>
+                Best regards, <br />
+                Pavel Rozhkov from beda.software
+            </p>
+        </div>
+    )
+}

src/containers/Settings/index.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+import { Table, Input, Button, Space } from "antd";
+
+import { getFromLocalStorage, setToLocalStorage} from '../../utils/storage'
+
+export interface SettingItem {
+    id: string;
+    name: string;
+    value: string;
+}
+
+export function SettingsContainer() {
+    const [settings, setSettings] = useState<Array<SettingItem>>([]);
+
+    useEffect(() => {
+        const savedSettings = getFromLocalStorage<Array<SettingItem>>("settings");
+        if (savedSettings) {
+            setSettings(savedSettings);
+        } else {
+            setSettings([{ id: 'authorization_header', name: "Authorization header", value: "" }]);
+        }
+    }, []);
+
+    const handleSave = () => {
+        setToLocalStorage("settings", settings);
+        alert("Saved!");
+    };
+
+    const handleChange = (index: number, newValue: string) => {
+        const updatedSettings = [...settings];
+        updatedSettings[index].value = newValue;
+        setSettings(updatedSettings);
+    };
+
+    const columns = [
+        {
+            title: "Name",
+            dataIndex: "name",
+            key: "name",
+        },
+        {
+            title: "Value",
+            dataIndex: "value",
+            key: "value",
+            render: (_: string, record: SettingItem, index: number) => (
+                <Input
+                    value={record.value}
+                    onChange={(e) => handleChange(index, e.target.value)}
+                />
+            ),
+        },
+    ];
+
+    return (
+        <div>
+            <Table
+                dataSource={settings}
+                columns={columns}
+                pagination={false}
+                rowKey="name"
+            />
+            <Space style={{ marginTop: 16 }}>
+                <Button type="primary" onClick={handleSave}>
+                    Save
+                </Button>
+            </Space>
+        </div>
+    );
+}

src/hooks.ts

@@ -2,6 +2,8 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { toast } from 'react-toastify';
 import { reqWrapper } from "./utils/requests";
+import { getFromLocalStorage } from "./utils/storage"
+import { SettingItem } from './containers/Settings/'
 
 const fhirpath = require('fhirpath');
 const fhirpath_r4_model = require('fhirpath/fhir-context/r4');
@@ -17,12 +19,17 @@ export function useFHIRPathUI() {
     const isGetResourceActive = url !== '';
     const isExecuteActive = resource !== '' && expression !== '';
     const isShareActive = url !== '' && expression !== '';
+    const isShareResultActive = result.length > 0
     const showError = (message: string) => toast.error(message)
     const showSuccess = (message: string) => toast.success(message)
+    const authorizationHeader = getFromLocalStorage<Array<SettingItem>>("settings")?.find((settingItem) => settingItem.id === 'authorization_header')?.id
+    const fetchHeaders = authorizationHeader
+        ? { headers: { Authorization: authorizationHeader } }
+        : {};
 
     const handleFetch = async (fetchUrl: string) => {
         setIsLoading(true);
-        const result = await reqWrapper(axios.get(fetchUrl))
+        const result = await reqWrapper(axios.get(fetchUrl, fetchHeaders))
         if (result.status === 'success') {
             setResource(JSON.stringify(result.data, null, 2))
         } else {
@@ -33,21 +40,37 @@ export function useFHIRPathUI() {
 
     const handleExecute = async (executeResource: string, executeExpression: string) => {
         setIsLoading(true);
-        setResult(fhirpath.evaluate(JSON.parse(executeResource), executeExpression, null, fhirpath_r4_model));
-        setIsLoading(false);
+        try {
+            const parsed = JSON.parse(executeResource);
+            const result = fhirpath.evaluate(parsed, executeExpression, null, fhirpath_r4_model);
+            setResult(result);
+        } catch (err: any) {
+            showError(err?.message || String(err));
+            console.error('Execution error:', err);
+        } finally {
+            setIsLoading(false);
+        }
     };
 
+    const copyToClipboard = (toCopy: string, successMessage: string, errorMessage: string) => {
+        navigator.clipboard.writeText(toCopy).then(() => {
+            showSuccess(successMessage);
+        }).catch(err => {
+            showError(errorMessage + " " + err);
+        });
+    }
+
     const handleShare = () => {
         const currentUrl = window.location.href.split('?')[0];
         const shareUrl = `${currentUrl}?url=${encodeURIComponent(url)}&expression=${encodeURIComponent(expression)}`;
         setShareLink(shareUrl);
-        navigator.clipboard.writeText(shareUrl).then(() => {
-            showSuccess('Link copied to clipboard!');
-        }).catch(err => {
-            showError('Could not copy text: ' + err);
-        });
+        copyToClipboard(shareUrl, "Link copied to clipboard!", "Could not copy text")
     };
 
+    const handleShareResult = () => {
+        copyToClipboard(result.map((resItem) => JSON.stringify(resItem)).join(', '), "Result copied to clipboard!", "Could not copy result")
+    }
+
     const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => setUrl(e.target.value);
 
     const getUrlParams = (name: string): string | null => {
@@ -94,6 +117,8 @@ export function useFHIRPathUI() {
         isLoading,
         isExecuteActive,
         isGetResourceActive,
-        isShareActive
+        isShareActive,
+        isShareResultActive,
+        handleShareResult,
     };
 }

src/utils/storage.ts

@@ -0,0 +1,12 @@
+export const setToLocalStorage = <T>(key: string, value: T): void => {
+  localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const getFromLocalStorage = <T>(key: string): T | null => {
+  const item = localStorage.getItem(key);
+  return item ? (JSON.parse(item) as T) : null;
+};
+
+export const removeFromLocalStorage = (key: string): void => {
+  localStorage.removeItem(key);
+};

src/version.ts

@@ -0,0 +1,3 @@
+import pkg from '../package.json';
+const version = pkg.version;
+export default version;