feat(create-project): support the default product privacy of units

Author: OliverDudgeon

components/projects/CreateProjectButton.tsx renamed to components/projects/CreateProject/CreateProjectButton.tsx

@@ -29,6 +29,7 @@ export const CreateProjectButton = ({
       </Button>
 
       <CreateProjectForm
+        defaultPrivacy={unit.default_product_privacy}
         modal={{
           id: "create-project",
           title: "Create Project",

components/projects/CreateProjectForm.tsx renamed to components/projects/CreateProject/CreateProjectForm.tsx

@@ -1,7 +1,10 @@
 import {
   type AsError,
   type ProductDetail,
+  ProductDetailFlavour,
+  ProductDetailType,
   type UnitDetail,
+  UnitDetailDefaultProductPrivacy,
   type UnitProductPostBodyBodyFlavour,
 } from "@squonk/account-server-client";
 import {
@@ -15,32 +18,36 @@ import { getGetUserInventoryQueryKey } from "@squonk/data-manager-client/invento
 import { getGetProjectsQueryKey, useCreateProject } from "@squonk/data-manager-client/project";
 
 import {
-  Box,
   Button,
-  FormControlLabel,
+  FormControl,
+  FormLabel,
   MenuItem,
+  Tooltip,
   Typography,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import { Field, Form, Formik, type FormikConfig } from "formik";
-import { Checkbox, TextField } from "formik-mui";
+import { TextField } from "formik-mui";
 import * as yup from "yup";
 
-import { DEFAULT_PRODUCT_FLAVOUR, PROJECT_SUB } from "../../constants/products";
-import { useCurrentProjectId } from "../../hooks/projectHooks";
-import { useEnqueueError } from "../../hooks/useEnqueueStackError";
-import { type Resolve } from "../../types";
-import { formatTierString } from "../../utils/app/products";
-import { getErrorMessage } from "../../utils/next/orvalError";
-import { FormikModalWrapper, type FormikModalWrapperProps } from "../modals/FormikModalWrapper";
+import { useCurrentProjectId } from "../../../hooks/projectHooks";
+import { useEnqueueError } from "../../../hooks/useEnqueueStackError";
+import { type Resolve } from "../../../types";
+import { formatTierString } from "../../../utils/app/products";
+import { getErrorMessage } from "../../../utils/next/orvalError";
+import { FormikModalWrapper, type FormikModalWrapperProps } from "../../modals/FormikModalWrapper";
+import { PrivacySwitch } from "./PrivacySwitch";
+
+const PROJECT_SUB = ProductDetailType.DATA_MANAGER_PROJECT_TIER_SUBSCRIPTION;
 
 export interface CreateProjectFormProps {
   modal?: Resolve<
     Pick<FormikModalWrapperProps, "id" | "onClose" | "open" | "submitText" | "title">
   >;
   unitId: UnitDetail["id"] | (() => Promise<UnitDetail["id"]>);
+  defaultPrivacy: UnitDetailDefaultProductPrivacy;
   product?: ProductDetail;
   autoFocus?: boolean;
 }
@@ -53,16 +60,32 @@ export interface Values {
 
 type ProjectFormikProps = FormikConfig<Values>;
 
+const isPrivateDefaultValues: Record<UnitDetailDefaultProductPrivacy, boolean> = {
+  ALWAYS_PRIVATE: true,
+  ALWAYS_PUBLIC: false,
+  DEFAULT_PUBLIC: false,
+  DEFAULT_PRIVATE: true,
+};
+
 export const CreateProjectForm = ({
   modal,
   unitId,
+  defaultPrivacy,
   product,
   autoFocus = true,
 }: CreateProjectFormProps) => {
+  const evaluationAllowed = defaultPrivacy !== UnitDetailDefaultProductPrivacy.ALWAYS_PRIVATE;
+  const defaultFlavour = (
+    defaultPrivacy === UnitDetailDefaultProductPrivacy.ALWAYS_PRIVATE ||
+    defaultPrivacy === UnitDetailDefaultProductPrivacy.DEFAULT_PRIVATE
+      ? ProductDetailFlavour.BRONZE
+      : ProductDetailFlavour.EVALUATION
+  ) satisfies ProductDetailFlavour;
+
   const initialValues: Values = {
     projectName: "",
-    flavour: product?.flavour ?? DEFAULT_PRODUCT_FLAVOUR,
-    isPrivate: false,
+    flavour: product?.flavour ?? defaultFlavour,
+    isPrivate: isPrivateDefaultValues[defaultPrivacy],
   };
   const theme = useTheme();
   const biggerThanSm = useMediaQuery(theme.breakpoints.up("sm"));
@@ -142,13 +165,19 @@ export const CreateProjectForm = ({
     values,
   }) => (
     <Form style={{ marginTop: theme.spacing() }}>
-      <Box
+      <FormControl
+        component="fieldset"
         sx={{
           display: "grid",
-          gridTemplateColumns: biggerThanSm ? "1fr 1fr auto auto" : "1fr",
+          gridTemplateColumns: biggerThanSm ? "1fr 1fr auto" + (modal ? "" : " auto") : "1fr",
           gap: 1,
+          alignItems: "baseline",
         }}
       >
+        <FormLabel component="legend" sx={{ mb: 1 }}>
+          Unit default privacy: {defaultPrivacy.split("_").join(" ").toLowerCase()}
+        </FormLabel>
+
         <Field
           fullWidth
           autoFocus={autoFocus}
@@ -169,7 +198,7 @@ export const CreateProjectForm = ({
             name="flavour"
             onChange={(event: any) => {
               handleChange(event);
-              if (event.target.value === DEFAULT_PRODUCT_FLAVOUR) {
+              if (event.target.value === ProductDetailFlavour.EVALUATION) {
                 void setFieldValue("isPrivate", false);
               }
             }}
@@ -179,7 +208,13 @@ export const CreateProjectForm = ({
             ) : (
               productTypes?.map((product) => {
                 return (
-                  <MenuItem key={product.flavour} value={product.flavour}>
+                  <MenuItem
+                    disabled={
+                      product.flavour === ProductDetailFlavour.EVALUATION && !evaluationAllowed
+                    }
+                    key={product.flavour}
+                    value={product.flavour}
+                  >
                     {formatTierString(product.flavour ?? "Unknown Flavour")}
                   </MenuItem>
                 );
@@ -188,19 +223,16 @@ export const CreateProjectForm = ({
           </Field>
         )}
 
-        <FormControlLabel
-          control={<Field color="primary" component={Checkbox} name="isPrivate" type="checkbox" />}
-          disabled={values.flavour === DEFAULT_PRODUCT_FLAVOUR}
-          label="Private"
-          labelPlacement="start"
-        />
+        <Tooltip title="Toggle whether this project can be viewed by other platform users">
+          <PrivacySwitch defaultPrivacy={defaultPrivacy} flavour={values.flavour} />
+        </Tooltip>
 
         {!modal && (
           <Button disabled={isSubmitting || !isValid} onClick={() => void submitForm()}>
             Create
           </Button>
         )}
-      </Box>
+      </FormControl>
     </Form>
   );
 

components/projects/CreateProjectListItem.tsx renamed to components/projects/CreateProject/CreateProjectListItem.tsx

@@ -30,6 +30,7 @@ export const CreateProjectListItem = ({ unit }: CreateProjectListItemProps) => {
       </ListItemButton>
 
       <CreateProjectForm
+        defaultPrivacy={unit.default_product_privacy}
         modal={{
           id: "create-project",
           title: "Create Project",

components/projects/CreateProject/PrivacySwitch.tsx

@@ -0,0 +1,37 @@
+import {
+  ProductDetailFlavour,
+  UnitDetailDefaultProductPrivacy,
+} from "@squonk/account-server-client";
+
+import { FormControlLabel } from "@mui/material";
+import { Field } from "formik";
+import { Switch } from "formik-mui";
+
+export interface PrivacySwitchProps {
+  /**
+   * Selected flavour of the product
+   */
+  flavour: string;
+  /**
+   * Default privacy of the product given by the unit
+   */
+  defaultPrivacy: UnitDetailDefaultProductPrivacy;
+}
+
+export const PrivacySwitch = ({ flavour, defaultPrivacy }: PrivacySwitchProps) => {
+  // Disable the switch if the product is an evaluation product or if the default privacy is set to
+  // always private or always public
+  const isDisabled =
+    flavour === ProductDetailFlavour.EVALUATION ||
+    defaultPrivacy === UnitDetailDefaultProductPrivacy.ALWAYS_PRIVATE ||
+    defaultPrivacy === UnitDetailDefaultProductPrivacy.ALWAYS_PUBLIC;
+
+  return (
+    <FormControlLabel
+      control={<Field color="primary" component={Switch} name="isPrivate" type="checkbox" />}
+      disabled={isDisabled}
+      label="Private"
+      labelPlacement="start"
+    />
+  );
+};

components/usage/UnitUserUsage.tsx

@@ -25,7 +25,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import dynamic from "next/dynamic";
 
 import { CenterLoader } from "../CenterLoader";
-import { CreateProjectForm } from "../projects/CreateProjectForm";
+import { CreateProjectForm } from "../projects/CreateProject/CreateProjectForm";
 import { type UserUsageByProjectTableProps } from "./UserUsageByProjectTable";
 import { UserUsageTable } from "./UserUsageTable";
 
@@ -112,7 +112,11 @@ export const UnitUserUsage = ({ unitId }: UnitUserUsageProps) => {
       </Box>
 
       <Typography variant="h4">Create Project</Typography>
-      <CreateProjectForm autoFocus={false} unitId={unit.id} />
+      <CreateProjectForm
+        autoFocus={false}
+        defaultPrivacy={unit.default_product_privacy}
+        unitId={unit.id}
+      />
     </Container>
   );
 };

constants/products.ts

@@ -8,7 +8,7 @@ import { DataTable } from "../../../components/DataTable";
 import { NextLink } from "../../../components/NextLink";
 import { ChargesLinkIconButton } from "../../../components/products/ChargesLinkIconButton";
 import { DeleteProductButton } from "../../../components/products/DeleteProductButton";
-import { CreateProjectButton } from "../../../components/projects/CreateProjectButton";
+import { CreateProjectButton } from "../../../components/projects/CreateProject/CreateProjectButton";
 import { formatTierString } from "../../../utils/app/products";
 import { getSharedColumns } from "../columns";
 

features/ProductTables/ProjectProductTable/ProjectProductTable.tsx

@@ -1,15 +1,24 @@
 import { useCreateDefaultUnit } from "@squonk/account-server-client/unit";
 
-import { CreateProjectForm } from "../../../components/projects/CreateProjectForm";
+import { CreateProjectForm } from "../../../components/projects/CreateProject/CreateProjectForm";
+import { useSelectedOrganisation } from "../../../state/organisationSelection";
 import { getBillingDay } from "../../../utils/app/products";
 
 /**
  * Form for creating a default unit with a project.
  */
 export const BootstrapForm = () => {
+  const [organisation] = useSelectedOrganisation();
   const { mutateAsync: createUnit } = useCreateDefaultUnit();
+
+  if (!organisation) {
+    return null;
+  }
+
+  // The personal unit will be created with the default privacy of the default organisation
   return (
     <CreateProjectForm
+      defaultPrivacy={organisation.default_product_privacy}
       unitId={async () => {
         const { id: unitId } = await createUnit({
           data: { billing_day: getBillingDay() },

features/UserBootstrapper/BootstrapAlert/BootstrapForm.tsx

@@ -1,6 +1,6 @@
 import { List } from "@mui/material";
 
-import { CreateProjectListItem } from "../../../../../components/projects/CreateProjectListItem";
+import { CreateProjectListItem } from "../../../../../components/projects/CreateProject/CreateProjectListItem";
 import { useGetPersonalUnit } from "../../../../../hooks/useGetPersonalUnit";
 import { useKeycloakUser } from "../../../../../hooks/useKeycloakUser";
 import { useSelectedOrganisation } from "../../../../../state/organisationSelection";