feat: fuel field is disabled and shows an alert when archived

app/containers/Forms/FuelField.tsx

@@ -3,6 +3,7 @@ import {FieldProps} from '@rjsf/core';
 import {createFragmentContainer, graphql} from 'react-relay';
 import {FuelField_query} from 'FuelField_query.graphql';
 import ObjectField from '@rjsf/core/dist/cjs/components/fields/ObjectField';
+import {Alert} from 'react-bootstrap';
 
 interface Props extends FieldProps {
   query: FuelField_query;
@@ -11,6 +12,12 @@ interface Props extends FieldProps {
 const FuelField: React.FunctionComponent<Props> = (props) => {
   const {formData, query, onChange} = props;
 
+  const isFuelArchived =
+    formData.fuelRowId !== undefined &&
+    query.allFuels.edges.some(
+      ({node}) => node.state === 'archived' && node.rowId === formData.fuelRowId
+    );
+
   const handlefuelChange = (fuelRowId: number) => {
     const fuel = query.allFuels.edges.find(({node}) => node.rowId === fuelRowId)
       ?.node;
@@ -26,17 +33,32 @@ const FuelField: React.FunctionComponent<Props> = (props) => {
     else handlefuelChange(fuel.fuelRowId);
   };
 
-  return <ObjectField {...props} onChange={handleChange} />;
+  return (
+    <>
+      {isFuelArchived && (
+        <Alert variant="danger">
+          <strong>Warning:</strong> This fuel has been archived. Please remove
+          it and select an appropriate alternative.
+        </Alert>
+      )}
+      <ObjectField
+        {...props}
+        disabled={isFuelArchived}
+        onChange={handleChange}
+      />
+    </>
+  );
 };
 
 export default createFragmentContainer(FuelField, {
   query: graphql`
     fragment FuelField_query on Query {
-      allFuels(condition: {state: "active"}) {
+      allFuels {
         edges {
           node {
             units
             rowId
+            state
           }
         }
       }

app/containers/Forms/FuelRowIdField.tsx

@@ -2,6 +2,7 @@ import React, {useMemo} from 'react';
 import {FieldProps} from '@rjsf/core';
 import {createFragmentContainer, graphql} from 'react-relay';
 import {FuelRowIdField_query} from 'FuelRowIdField_query.graphql';
+import {InputGroup} from 'react-bootstrap';
 
 interface Props extends FieldProps<number> {
   query: FuelRowIdField_query;
@@ -17,26 +18,63 @@ export const FuelRowIdFieldComponent: React.FunctionComponent<Props> = (
    * Injects the list of Fuels in the schema, and remove `query` from the props
    * Other props are passed as-is to the StringField
    */
-  const fieldProps = useMemo(
+
+  const fuels = useMemo(
     () => ({
+      activeRowIds: props.query.activeFuels.edges.map(({node}) => node.rowId),
+      activeNames: props.query.activeFuels.edges.map(({node}) => node.name),
+
+      // Object containing the archived fuels, keyed on the rowId
+      archived: props.query.archivedFuels.edges.reduce(
+        (archivedDict, {node}) => {
+          archivedDict[node.rowId] = node.name;
+          return archivedDict;
+        },
+        {}
+      )
+    }),
+    [props.query]
+  );
+
+  const fieldProps = useMemo(() => {
+    return {
       ...props,
       schema: {
         ...props.schema,
-        enum: props.query.allFuels.edges.map(({node}) => node.rowId),
-        enumNames: props.query.allFuels.edges.map(({node}) => node.name)
+        enum: fuels.activeRowIds,
+        enumNames: fuels.activeNames
       },
       query: undefined
-    }),
-    [props]
-  );
+    };
+  }, [props]);
+
+  if (
+    fuels.activeRowIds.includes(props.formData) ||
+    props.formData === undefined
+  )
+    return <props.registry.fields.StringField {...fieldProps} />;
 
-  return <props.registry.fields.StringField {...fieldProps} />;
+  return (
+    <InputGroup>
+      <InputGroup.Text className="col-md-12">
+        {fuels.archived[props.formData]}
+      </InputGroup.Text>
+    </InputGroup>
+  );
 };
 
 export default createFragmentContainer(FuelRowIdFieldComponent, {
   query: graphql`
     fragment FuelRowIdField_query on Query {
-      allFuels(condition: {state: "active"}) {
+      activeFuels: allFuels(condition: {state: "active"}) {
+        edges {
+          node {
+            rowId
+            name
+          }
+        }
+      }
+      archivedFuels: allFuels(condition: {state: "archived"}) {
         edges {
           node {
             rowId