Initial steps to handle readonly conf UIs

Rules still need to be done. Currently only takes into account whether a
configuration has ever been active. Permissions need to be taken into
account as well.

astroplant-frontend/src/scenes/kit/configure/view/components/Description.tsx

@@ -11,14 +11,15 @@ import { useAppDispatch } from "~/hooks";
 export type Props = {
  kit: schemas["Kit"];
  configuration: KitConfigurationState;
+ readOnly: boolean;
 };
 
 const DescriptionForm = ApiForm<
  string,
  Response<schemas["KitConfiguration"]>
 >();
 
-export default function Description({ kit, configuration }: Props) {
+export default function Description({ kit, configuration, readOnly }: Props) {
  const dispatch = useAppDispatch();
 
  const [editing, setEditing] = useState(false);
@@ -59,6 +60,8 @@ export default function Description({ kit, configuration }: Props) {
  />
  </div>
  );
+ } else if (readOnly) {
+ return <div>{configuration.description}</div>;
  } else {
  return (
  <div onClick={() => setEditing(true)}>

astroplant-frontend/src/scenes/kit/configure/view/components/Peripherals/components/ViewEditPeripheral.tsx

@@ -21,6 +21,7 @@ export type Props = {
  kit: schemas["Kit"];
  configuration: KitConfigurationState;
  peripheral: schemas["Peripheral"];
+ readOnly: boolean;
 };
 
 const PeripheralForm = ApiForm<any, any>();
@@ -30,6 +31,7 @@ export default function ViewEditPeripheral({
  kit,
  configuration: _,
  peripheral,
+ readOnly = false,
 }: Props) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
@@ -124,34 +126,37 @@ export default function ViewEditPeripheral({
  >
  <div />
  </RjsfForm>
- <div style={{ overflow: "hidden" }}>
- <Button
- primary
- icon
- labelPosition="left"
- floated="left"
- onClick={() => setEditing(true)}
- >
- <Icon name="pencil" />
- Edit
- </Button>
- <DeletePeripheralButton
- send={sendDelete}
- onResponse={responseDelete}
- buttonProps={{
- negative: true,
- icon: true,
- labelPosition: "right",
- floated: "right",
- }}
- confirm={() => ({
- content: t("kitConfiguration.peripherals.deleteConfirm"),
- })}
- >
- <Icon name="delete" />
- Delete
- </DeletePeripheralButton>
- </div>
+
+ {!readOnly && (
+ <div style={{ overflow: "hidden" }}>
+ <Button
+ primary
+ icon
+ labelPosition="left"
+ floated="left"
+ onClick={() => setEditing(true)}
+ >
+ <Icon name="pencil" />
+ Edit
+ </Button>
+ <DeletePeripheralButton
+ send={sendDelete}
+ onResponse={responseDelete}
+ buttonProps={{
+ negative: true,
+ icon: true,
+ labelPosition: "right",
+ floated: "right",
+ }}
+ confirm={() => ({
+ content: t("kitConfiguration.peripherals.deleteConfirm"),
+ })}
+ >
+ <Icon name="delete" />
+ Delete
+ </DeletePeripheralButton>
+ </div>
+ )}
  </>
  )}
  </Segment>

astroplant-frontend/src/scenes/kit/configure/view/components/Peripherals/index.tsx

@@ -13,16 +13,15 @@ import { useAppSelector } from "~/hooks";
 export type Props = {
  kit: schemas["Kit"];
  configuration: KitConfigurationState;
+ readOnly: boolean;
 };
 
-export default function Peripherals({ kit, configuration }: Props) {
+export default function Peripherals({ kit, configuration, readOnly }: Props) {
  const peripherals = useAppSelector(peripheralSelectors.selectEntities);
 
  return (
  <>
- {configuration.neverUsed && (
- <AddPeripheral kit={kit} configuration={configuration} />
- )}
+ {!readOnly && <AddPeripheral kit={kit} configuration={configuration} />}
  {Object.values(configuration.peripherals)
  .map((id) => peripherals[id]!)
  .map((peripheral) => {
@@ -32,6 +31,7 @@ export default function Peripherals({ kit, configuration }: Props) {
  kit={kit}
  configuration={configuration}
  peripheral={peripheral}
+ readOnly={readOnly}
  />
  );
  })}

astroplant-frontend/src/scenes/kit/configure/view/components/Rules/index.tsx

@@ -47,6 +47,7 @@ import { api, Response, schemas } from "~/api";
 export type Props = WithTranslation & {
  kit: schemas["Kit"];
  configuration: KitConfigurationState;
+ readOnly: boolean;
  peripheralDefinitions: {
  [id: string]: schemas["PeripheralDefinition"] | undefined;
  };
@@ -412,6 +413,7 @@ class Rules extends React.Component<Props, State> {
  render() {
  const {
  configuration,
+ readOnly: _, // TODO: handle read-only mode
  quantityTypes,
  peripheralDefinitions,
  peripherals,

astroplant-frontend/src/scenes/kit/configure/view/index.tsx

@@ -26,20 +26,37 @@ export default function ViewConfiguration() {
  <Container>
  <Segment raised>
  <Header>Description</Header>
- <Description kit={kit} configuration={configuration} />
+ <Description
+ kit={kit}
+ configuration={configuration}
+ readOnly={
+ /* The description can be changed as long as the person viewing
+ * this kit has the EditConfiguration permission.
+ * TODO: handle permissions on the frontend */
+ false
+ }
+ />
  </Segment>
  <Container textAlign="right">
  <ActivateDeactivate kit={kit} configuration={configuration} />
  </Container>
  <Divider />
  <Container>
  <Header>{t("control.header")}</Header>
- <Rules kit={kit} configuration={configuration} />
+ <Rules
+ kit={kit}
+ configuration={configuration}
+ readOnly={!configuration.neverUsed}
+ />
  </Container>
  <Divider />
  <Container>
  <Header>Peripherals</Header>
- <Peripherals kit={kit} configuration={configuration} />
+ <Peripherals
+ kit={kit}
+ configuration={configuration}
+ readOnly={!configuration.neverUsed}
+ />
  </Container>
  </Container>
  );