Added Dynamic Text tab

src/components/DynamicText/DynamicText.tsx

@@ -0,0 +1,71 @@
+import { useState, useContext, useEffect } from 'react';
+import { FlexColumn, FlexRow } from '../layouts';
+import { Button } from '@mui/material';
+import { Translations } from '../../types';
+import { ConfigToolContext } from '../../providers/ConfigToolProvider';
+import MultiLanguageTextEntry from '../MultiLanguageTextEntry';
+
+function DynamicText() {
+  const { configFile, saveDynamicText } = useContext(ConfigToolContext);
+  const [publicWarning, setPublicWarning] = useState<Translations>([]);
+
+  useEffect(() => {
+    if (configFile) {
+      setPublicWarning(configFile.dynamic_text.public_document_warning);
+    }
+  }, [configFile]);
+
+  const handleSave = () => {
+    saveDynamicText({ public_document_warning: publicWarning });
+  };
+
+  const handleCancel = () => {
+    if (configFile) {
+      setPublicWarning(configFile.dynamic_text.public_document_warning);
+    }
+  };
+
+  const saveEnabled =
+    publicWarning &&
+    publicWarning.length > 0 &&
+    (configFile
+      ? publicWarning !== configFile?.dynamic_text.public_document_warning
+      : false);
+
+  return (
+    <FlexColumn width={1200} padTop={32}>
+      <FlexRow fullWidth>
+        <MultiLanguageTextEntry
+          languages={configFile ? configFile.supported_languages : []}
+          defaultLanguage={configFile ? configFile.default_language : ''}
+          translations={publicWarning}
+          label='Public Document Wanrning'
+          multiline={true}
+          multilineRows={5}
+          onCancel={() =>
+            setPublicWarning(
+              configFile ? configFile.dynamic_text.public_document_warning : []
+            )
+          }
+          onChange={(translations: Translations) =>
+            setPublicWarning(translations)
+          }
+        />
+      </FlexRow>
+      <FlexRow fullWidth spaceBetween padTop={32}>
+        <Button variant='contained' color='secondary' onClick={handleCancel}>
+          Cancel
+        </Button>
+        <Button
+          variant='contained'
+          onClick={handleSave}
+          disabled={!saveEnabled}
+        >
+          Save
+        </Button>
+      </FlexRow>
+    </FlexColumn>
+  );
+}
+
+export default DynamicText;

src/components/DynamicText/index.ts

@@ -0,0 +1,2 @@
+import DynamicText from './DynamicText';
+export default DynamicText;

src/components/Main/Main.tsx

@@ -1,21 +1,22 @@
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import { Button } from "@mui/material";
-import { FlexColumn, FlexRow } from "../layouts";
-import { Tab, Tabs, Box } from "@mui/material";
-import { useContext, useEffect, useState } from "react";
-import Policies from "../Policies/Policies";
-import Roles from "../Roles";
-import Groups from "../Groups";
-import LoadConfigDialog from "../LoadConfigDialog";
-import { ConfigFile } from "../../types";
-import { ConfigToolContext } from "../../providers/ConfigToolProvider";
-import { copyObject } from "../../utilities";
-import Admin from "../Admin";
-import Branding from "../Branding";
-import { Authentication } from "../Authentication";
-import UpdateVersionDialog from "../UpdateVersionDialog/UpdateVersionDialog";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import { Button } from '@mui/material';
+import { FlexColumn, FlexRow } from '../layouts';
+import { Tab, Tabs, Box } from '@mui/material';
+import { useContext, useEffect, useState } from 'react';
+import Policies from '../Policies/Policies';
+import Roles from '../Roles';
+import Groups from '../Groups';
+import LoadConfigDialog from '../LoadConfigDialog';
+import { ConfigFile } from '../../types';
+import { ConfigToolContext } from '../../providers/ConfigToolProvider';
+import { copyObject } from '../../utilities';
+import Admin from '../Admin';
+import Branding from '../Branding';
+import DynamicText from '../DynamicText';
+import { Authentication } from '../Authentication';
+import UpdateVersionDialog from '../UpdateVersionDialog/UpdateVersionDialog';
 
 const Main = () => {
   const {
@@ -27,7 +28,7 @@ const Main = () => {
     policies,
     configFile,
   } = useContext(ConfigToolContext);
-  const [tab, setTab] = useState("policies");
+  const [tab, setTab] = useState('policies');
   const [loadOpen, setLoadOpen] = useState(false);
   const [updateOpen, setUpdateOpen] = useState(false);
   const [save, setSave] = useState(false);
@@ -65,59 +66,66 @@ const Main = () => {
 
   return (
     <>
-      <AppBar position="static">
+      <AppBar position='static'>
         <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          <Typography variant='h6' component='div' sx={{ flexGrow: 1 }}>
             Annotation Engine Configuration Tool
           </Typography>
           <FlexRow padRight={20}>
-            {`Config File: ${fileName || "No File Chosen"}`}
+            {`Config File: ${fileName || 'No File Chosen'}`}
           </FlexRow>
           {!configFile ? (
             <Button
               onClick={handleLoadConfig}
-              color="inherit"
-              variant="outlined"
+              color='inherit'
+              variant='outlined'
             >
               Load Config
             </Button>
           ) : (
             <Button
               onClick={handleSaveConfig}
-              color="inherit"
-              variant="outlined"
+              color='inherit'
+              variant='outlined'
             >
               Save Config
             </Button>
           )}
         </Toolbar>
       </AppBar>
       <FlexColumn padTop={10} padLeft={32}>
-        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs onChange={(_e, value) => setTab(value)} value={tab}>
-            <Tab label="Policies" value="policies" />
-            <Tab label="Roles" value="roles" disabled={!configFile} />
-            <Tab label="Default Groups" value="groups" disabled={!configFile} />
-            <Tab label="Admin" value="admin" disabled={!configFile} />
-            <Tab label="Branding" value="branding" disabled={!configFile} />
+            <Tab label='Policies' value='policies' />
+            <Tab label='Roles' value='roles' disabled={!configFile} />
+            <Tab label='Default Groups' value='groups' disabled={!configFile} />
+            <Tab label='Admin' value='admin' disabled={!configFile} />
+            <Tab label='Branding' value='branding' disabled={!configFile} />
             <Tab
-              label="Authentication"
-              value="authentication"
+              label='Dynamic Text'
+              value='dynamic_text'
+              disabled={!configFile}
+            />
+            <Tab
+              label='Authentication'
+              value='authentication'
               disabled={!configFile}
             />
           </Tabs>
         </Box>
-        {tab === "policies" && <Policies />}
-        {tab === "roles" && <Roles />}
-        {tab === "groups" && <Groups />}
-        {tab === "admin" && <Admin />}
-        {tab === "branding" && <Branding />}
-        {tab === "authentication" && <Authentication />}
+        {tab === 'policies' && <Policies />}
+        {tab === 'roles' && <Roles />}
+        {tab === 'groups' && <Groups />}
+        {tab === 'admin' && <Admin />}
+        {tab === 'branding' && <Branding />}
+        {tab === 'authentication' && <Authentication />}
+        {tab === 'dynamic_text' && <DynamicText />}
       </FlexColumn>
       <LoadConfigDialog
         open={loadOpen}
         onClose={() => setLoadOpen(false)}
         onLoad={handleConfigChosen}
+        // @ts-ignore
         policies={policies}
       />
       <UpdateVersionDialog

src/components/MultiLanguageTextEntry/MultiLanguageTextEntry.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useState } from 'react';
+import { FlexCenter, FlexRow } from '../layouts';
+import {
+  TextField,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+  FormControl,
+  InputLabel,
+} from '@mui/material';
+import { copyObject } from '../../utilities';
+import { Translations } from '../../types';
+
+interface MultiLanguageTextEntryProps {
+  languages: string[];
+  defaultLanguage: string;
+  translations: Translations;
+  label: string;
+  multiline?: boolean;
+  multilineRows?: number;
+  onCancel(): void;
+  onChange(translations: Translations): void;
+}
+
+function MultiLanguageTextEntry(props: MultiLanguageTextEntryProps) {
+  const {
+    languages,
+    defaultLanguage,
+    label,
+    multiline,
+    translations,
+    multilineRows,
+  } = props;
+
+  const [language, setLanguage] = useState('');
+
+  useEffect(() => {
+    setLanguage(defaultLanguage);
+  }, [defaultLanguage]);
+
+  const currentText = () => {
+    if (language.length === 0) {
+      return '';
+    }
+
+    const trans = translations.find((t) => t.language === language);
+
+    return trans ? trans.text : '';
+  };
+
+  const handleTextChange = (language: string, text: string) => {
+    const copy: Translations = copyObject(translations);
+
+    const idx = copy.findIndex((t) => t.language === language);
+
+    if (idx > -1) {
+      copy[idx] = { language, text };
+    } else {
+      copy.push({ language, text });
+    }
+
+    props.onChange(copy);
+  };
+
+  return (
+    <FlexRow fullWidth padding={5}>
+      <FlexRow width='80%'>
+        <TextField
+          autoFocus
+          margin='dense'
+          id='text'
+          label={label}
+          type='text'
+          fullWidth
+          multiline={multiline}
+          rows={multiline ? multilineRows || 3 : undefined}
+          variant='outlined'
+          value={currentText()}
+          onChange={(e) => handleTextChange(language, e.target.value as string)}
+        />
+      </FlexRow>
+      <FlexCenter height='100%' padLeft={3}>
+        <FormControl sx={{ m: 1, minWidth: 120 }}>
+          <InputLabel id='language-label'>Language</InputLabel>
+          <Select
+            labelId='language-label'
+            value={language}
+            label='Language'
+            onChange={(event: SelectChangeEvent) =>
+              setLanguage(event.target.value as string)
+            }
+          >
+            {languages.map((l) => {
+              return (
+                <MenuItem value={l} key={l}>
+                  {l}
+                </MenuItem>
+              );
+            })}
+          </Select>
+        </FormControl>
+      </FlexCenter>
+    </FlexRow>
+  );
+}
+
+export default MultiLanguageTextEntry;

src/components/MultiLanguageTextEntry/index.ts

@@ -0,0 +1,2 @@
+import MultiLanguageTextEntry from './MultiLanguageTextEntry';
+export default MultiLanguageTextEntry;

src/providers/ConfigToolProvider.tsx

@@ -8,6 +8,7 @@ import {
   RoleDefinition,
   AuthenticationMethod,
   AuthenticationType,
+  DynamicText,
 } from '../types';
 import { copyObject } from '../utilities';
 
@@ -35,6 +36,7 @@ export interface IConfigToolContext {
   saveAdmin(_email: string, _groups: string[]): void;
   saveVersion(_projectName: string, _author: string, _version: string): void;
   saveBranding(_branding: Branding): void;
+  saveDynamicText(_dynamicText: DynamicText): void;
   addAuthMethod(_method: AuthenticationMethod): void;
   removeAuthMethod(_name: string, _type: AuthenticationType): void;
   onSaveConfig(): void;
@@ -94,6 +96,9 @@ const ConfigToolContext = createContext<IConfigToolContext>({
   saveBranding(_branding: Branding) {
     return;
   },
+  saveDynamicText(_dynamicText: DynamicText) {
+    return;
+  },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   addAuthMethod(_method: AuthenticationMethod) {
     return;
@@ -283,6 +288,20 @@ const ConfigToolProvider = (props: ConfigToolProviderProps) => {
     }
   };
 
+  const saveDynamicText = (dynamicText: DynamicText) => {
+    if (configFile) {
+      const copy: ConfigFile = copyObject(configFile);
+      if (!copy.dynamic_text) {
+        copy.dynamic_text = {
+          public_document_warning: [],
+        };
+      }
+      copy.dynamic_text.public_document_warning =
+        dynamicText.public_document_warning;
+      setConfigFile(copy);
+    }
+  };
+
   const saveVersion = (
     projectName: string,
     author: string,
@@ -388,6 +407,20 @@ const ConfigToolProvider = (props: ConfigToolProviderProps) => {
       };
     }
 
+    if (!configFile.dynamic_text) {
+      configFile.dynamic_text = {
+        public_document_warning: [],
+      };
+    }
+
+    if (!configFile.supported_languages) {
+      configFile.supported_languages = ['en', 'de'];
+    }
+
+    if (!configFile.default_language) {
+      configFile.default_language = 'en';
+    }
+
     setConfigFile(configFile);
   };
 
@@ -413,6 +446,7 @@ const ConfigToolProvider = (props: ConfigToolProviderProps) => {
         saveAdmin,
         saveVersion,
         saveBranding,
+        saveDynamicText,
         addAuthMethod,
         removeAuthMethod,
       }}