#255 Frontend UI changes for the export state

frontend/src/Pages/SentenceDetails.tsx

@@ -225,7 +225,7 @@ const SentencesDetails = () => {
     );
   }
 
-  const disabled = sentence.owner?.id !== userProfile.getUser().id;
+  const isDisabled = sentence.owner?.id !== userProfile.getUser().id;
 
   return (
     <Grid p={6} container>
@@ -295,7 +295,7 @@ const SentencesDetails = () => {
                 display="flex"
                 justifyContent="flex-end"
               >
-                {!disabled && sentence?.available_transitions?.length !== 0 && (
+                {!isDisabled && sentence?.available_transitions?.length !== 0 && (
                   <GroupedButtons
                     handleClick={handleClick}
                     selectedOption={
@@ -362,7 +362,7 @@ const SentencesDetails = () => {
                 <Box ref={refs[1]}>
                   <SentenceForm
                     data={sentence}
-                    disabled={disabled}
+                    isDisabled={isDisabled}
                     format="small"
                     setter={setSentence}
                     enableAutoSave={true}

frontend/src/Pages/StatementDetails.tsx

@@ -9,7 +9,10 @@ import TabPanel from "../components/Widgets/TabPanel";
 import { useParams } from "react-router-dom";
 import statementService from "../services/StatementService";
 import TagForm from "../components/Forms/TagForm";
-import { ConnectivityStatement } from "../apiclient/backend";
+import {
+  ComposerConnectivityStatementListStateEnum as statementStates,
+  ConnectivityStatement
+} from "../apiclient/backend";
 import { userProfile } from "../services/UserService";
 import ProofingTab from "../components/ProofingTab/ProofingTab";
 import { SentenceStateChip } from "../components/Widgets/StateChip";
@@ -111,9 +114,9 @@ const StatementDetails = () => {
     }
   }, [statementId, refetch]);
 
-  //TODO add logic for disabled
-  // something like this statement.owner?.id !== userProfile.getUser().id;
-  const disabled = false;
+  //TODO add logic for isDisabled
+  // TODO add an extra check for invalid state;
+  const isDisabled = statement?.state === statementStates.Exported;
   return (
     <Grid p={6} container>
       {loading && (
@@ -245,7 +248,7 @@ const StatementDetails = () => {
                       />
                     ) : (
                       <GroupedButtons
-                        disabled
+                        isDisabled
                         selectedOption="No options available"
                       />
                     )}
@@ -277,7 +280,7 @@ const StatementDetails = () => {
                         statement={statement}
                         setStatement={setStatement}
                         refreshStatement={refreshStatement}
-                        disabled={disabled}
+                        isDisabled={isDisabled}
                         refs={refs}
                       />
                     </TabPanel>
@@ -286,7 +289,7 @@ const StatementDetails = () => {
                         statement={statement}
                         setStatement={setStatement}
                         refreshStatement={refreshStatement}
-                        disabled={disabled}
+                        isDisabled={isDisabled}
                         refs={refs}
                       />
                     </TabPanel>
@@ -310,12 +313,14 @@ const StatementDetails = () => {
                             service: statementService,
                           }}
                           setter={refreshStatement}
+                          isDisabled={isDisabled}
                         />
                         <Divider sx={{ margin: "36px 0" }} />
                         <NoteDetails
                           extraData={{
                             connectivity_statement_id: statement.id,
                           }}
+                          isDisabled={isDisabled}
                         />
                       </Paper>
                     </Box>

frontend/src/components/AnatomicalEntitiesField.tsx

@@ -7,7 +7,7 @@ import theme from "../theme/Theme";
 import Typography from "@mui/material/Typography";
 
 function AnatomicalEntitiesField(props: any) {
-  const {label, errors} = props.options;
+  const {label, errors, isDisabled} = props.options;
   const placeholder = "Select " + props.label?.slice(0, -3);
 
   const [entity, setEntity] = React.useState<AnatomicalEntity>();
@@ -43,7 +43,7 @@ function AnatomicalEntitiesField(props: any) {
         borderColor={
           errors?.length !== 0 ? theme.palette.error.main : "#EAECF0"
         }
-        disabled={props.disabled}
+        disabled={isDisabled}
         onChange={(newValue: AnatomicalEntity) => props.onChange(newValue?.id)}
         placeholder={
           props.label === "Anatomical entity id" ? "Select Via" : placeholder

frontend/src/components/AutoComplete.tsx

@@ -20,7 +20,7 @@ const StyledAutoComplete = styled(Autocomplete)(({ theme }) => ({
 export default function AutoComplete({
   onChange,
   placeholder,
-  disabled,
+  isDisabled,
   value,
   setValue,
   fetch,
@@ -84,7 +84,7 @@ export default function AutoComplete({
         filterOptions={(x) => x}
         options={options}
         autoComplete
-        disabled={disabled}
+        disabled={isDisabled}
         includeInputInList
         filterSelectedOptions
         defaultValue={null}

frontend/src/components/DistillationTab.tsx

@@ -17,6 +17,7 @@ const DistillationTab = ({
   setStatement,
   refreshStatement,
   refs,
+ isDisabled
 }: any) => {
   const theme = useTheme();
   const sectionStyle = useSectionStyle(theme);
@@ -52,19 +53,22 @@ const DistillationTab = ({
                   uiFields={["knowledge_statement"]}
                   className="ks"
                   enableAutoSave={true}
+                  isDisabled={isDisabled}
                 />
                 <ProvenancesForm
                   provenancesData={statement.provenances}
                   extraData={{ connectivity_statement_id: statement.id }}
                   setter={refreshStatement}
                   className="provenance"
+                  isDisabled={isDisabled}
                 />
                 <Box ref={refs[2]}>
                   <StatementDetailsAccordion
                     setter={refreshStatement}
                     index={0}
                     statement={statement}
                     sentence={statement.sentence}
+                    isDisabled={isDisabled}
                   />
                 </Box>
               </Paper>
@@ -86,7 +90,7 @@ const DistillationTab = ({
           <SentenceForm
             data={statement.sentence}
             format="small"
-            disabled={true}
+            isDisabled={true}
           />
         </Box>
       </Grid>

frontend/src/components/Forms/ProvenanceForm.tsx

@@ -7,7 +7,7 @@ import TextfieldWithChips from "../Widgets/TextfieldWithChips";
 
 
 const ProvenancesForm = (props: any) => {
-  const { provenancesData, setter, extraData, disabled } = props
+  const { provenancesData, setter, extraData, isDisabled } = props
 
   const { schema, uiSchema } = jsonSchemas.getProvenanceSchema()
   const copiedSchema = JSON.parse(JSON.stringify(schema));
@@ -41,9 +41,9 @@ const ProvenancesForm = (props: any) => {
   copiedUISchema.uri = {
     "ui:widget": TextfieldWithChips,
     "ui:options": {
-      disabled: !extraData.connectivity_statement_id || disabled,
+      isDisabled: !extraData.connectivity_statement_id || isDisabled,
       data: provenancesData?.map((row: Provenance) => ({id: row.id, label: row.uri, enableClick: isValidUrl(row.uri) })) || [],
-      placeholder: disabled ? null : 'Enter Provenances (Press Enter to add a Provenance)',
+      placeholder: isDisabled ? null : 'Enter Provenances (Press Enter to add a Provenance)',
       removeChip: function(provenanceId: any) {
         provenanceService.delete(provenanceId, extraData.connectivity_statement_id)
         refresh()
@@ -61,7 +61,6 @@ const ProvenancesForm = (props: any) => {
   }
 
   return (
-
       <FormBase
         {...props}
         service={provenanceService}
@@ -73,6 +72,7 @@ const ProvenancesForm = (props: any) => {
         children={true}
         extraData={extraData}
         setter={() => refresh()}
+        disabled={isDisabled}
       />
   )
 }

frontend/src/components/Forms/SentenceForm.tsx

@@ -46,7 +46,7 @@ const linkedChip = (data: any) => {
 }
 
 const SentenceForm = (props: any) => {
-  const { format, data } = props
+  const { format, data, isDisabled } = props
   const { schema, uiSchema } = jsonSchemas.getSentenceSchema()
   const theme = useTheme()
   const sectionStyle = useSectionStyle(theme)
@@ -60,6 +60,7 @@ const SentenceForm = (props: any) => {
     title: {
       "ui:widget": CustomTextField,
       "ui:options": {
+        isDisabled,
         label: 'Article Title',
         placeholder: "Enter Article Title",
       }
@@ -91,6 +92,7 @@ const SentenceForm = (props: any) => {
         enableAutoSave={false}
         children={true}
         submitOnBlurFields={['title']}
+        disabled={isDisabled}
         {...props}
       />
       <Box mt={2}>

frontend/src/components/Forms/SpeciesForm.tsx

@@ -8,7 +8,7 @@ import { AutocompleteWithChips } from '../Widgets/AutocompleteWithChips';
 
 
 const SpeciesForm = (props: any) => {
-  const { data, extraData, setter } = props
+  const { data, extraData, setter, isDisabled } = props
 
   const { schema, uiSchema } = jsonSchemas.getSpeciesSchema()
 
@@ -40,6 +40,7 @@ const SpeciesForm = (props: any) => {
     name: {
       "ui:widget": AutocompleteWithChips,
       "ui:options": {
+        isDisabled,
         data: data?.map((row: Specie)=>({id:row.id, label: row.name})),
         label: 'Species',
         placeholder: 'Select Species',
@@ -61,6 +62,7 @@ const SpeciesForm = (props: any) => {
       enableAutoSave={false}
       clearOnSave={true}
       children={true}
+      isDisabled={isDisabled}
       {...props}
     />
   )