Merge branch 'staging' into epic/audit-log

src/admin/components/Fields/MapField.tsx

@@ -2,7 +2,7 @@ import { Typography } from "@mui/material";
 import { get } from "lodash";
 import { useRecordContext } from "react-admin";
 
-import Map from "@/components/elements/Map-mapbox/Map";
+import { MapContainer } from "@/components/elements/Map-mapbox/Map";
 
 interface MapFieldProps {
   source: string;
@@ -25,7 +25,7 @@ const MapField = ({ source, emptyText = "Not Provided" }: MapFieldProps) => {
   }
 
   return record && projectBoundary ? (
-    <Map geojson={projectBoundary} />
+    <MapContainer geojson={projectBoundary} />
   ) : (
     <Typography component="span" variant="body2">
       {emptyText}

src/admin/components/ResourceTabs/InformationTab/components/InformationTabRow.tsx

@@ -1,4 +1,5 @@
 import { Typography } from "@mui/material";
+import classNames from "classnames";
 import { LabeledClasses } from "react-admin";
 import { Else, If, Then } from "react-if";
 
@@ -7,20 +8,24 @@ import Text from "@/components/elements/Text/Text";
 import List from "@/components/extensive/List/List";
 import { FormSummaryRowProps, useGetFormEntries } from "@/components/extensive/WizardForm/FormSummaryRow";
 
-const InformationTabRow = ({ index, ...props }: FormSummaryRowProps) => {
+const InformationTabRow = ({ index, type, ...props }: FormSummaryRowProps) => {
   const entries = useGetFormEntries(props);
   return (
     <>
       <Text variant="text-16-semibold" className="text-darkCustom">
         {props.step.title}
       </Text>
       <List
+        className={classNames("mt-4 gap-4", {
+          "grid grid-cols-3": type === "sites",
+          "flex flex-col": type !== "sites"
+        })}
         items={entries}
         render={entry => (
           <div>
             <Typography className={LabeledClasses.label}>
               <Text variant="text-14-light" className="capitalize text-grey-700">
-                {entry.title}
+                {entry.title === "Upload Site Boundary" ? "Site Boundary" : entry.title}
               </Text>
             </Typography>
             <If condition={typeof entry.value === "string" || typeof entry.value === "number"}>

src/admin/components/ResourceTabs/InformationTab/index.tsx

@@ -1,5 +1,6 @@
 import { Card, Grid, Stack, Typography } from "@mui/material";
 import { useT } from "@transifex/react";
+import classNames from "classnames";
 import { FC } from "react";
 import { TabbedShowLayout, TabProps, useShowContext } from "react-admin";
 import { Else, If, Then, When } from "react-if";
@@ -115,16 +116,23 @@ const InformationTab: FC<IProps> = props => {
               </Then>
               <Else>
                 <Stack gap={4}>
-                  <Card sx={{ padding: 4 }}>
+                  <Card sx={{ padding: 4 }} className="!shadow-none">
                     <List
-                      className="space-y-8"
+                      className={classNames("space-y-12", {
+                        "map-span-3": props.type === "sites"
+                      })}
                       items={formSteps}
                       render={(step, index) => (
-                        <InformationTabRow index={index} step={step} values={values} steps={formSteps} />
+                        <InformationTabRow
+                          index={index}
+                          step={step}
+                          values={values}
+                          steps={formSteps}
+                          type={props.type}
+                        />
                       )}
                     />
                   </Card>
-
                   <When condition={record}>
                     <When
                       condition={

src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonStatus/StatusDisplay.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { useState } from "react";
 import { useShowContext } from "react-admin";
 
@@ -36,49 +37,58 @@ const menuSiteOptions = [
   {
     title: "Draft",
     status: "draft",
-    value: 1
+    value: 1,
+    viewPd: true
   },
   {
     title: "Awaiting Approval",
     status: "awaiting-approval",
-    value: 2
+    value: 2,
+    viewPd: true
   },
   {
     title: "Needs More Information",
     status: "needs-more-information",
-    value: 3
+    value: 3,
+    viewPd: false
   },
   {
     title: "Planting in Progress",
     status: "planting-in-progress",
-    value: 4
+    value: 4,
+    viewPd: false
   },
   {
     title: "Approved",
     status: "approved",
-    value: 5
+    value: 5,
+    viewPd: false
   }
 ];
 const menuProjectOptions = [
   {
     title: "Draft",
     status: "draft",
-    value: 1
+    value: 1,
+    viewPd: true
   },
   {
     title: "Awaiting Approval",
     status: "awaiting-approval",
-    value: 2
+    value: 2,
+    viewPd: true
   },
   {
     title: "Needs More Information",
     status: "needs-more-information",
-    value: 3
+    value: 3,
+    viewPd: false
   },
   {
     title: "Approved",
     status: "approved",
-    value: 4
+    value: 4,
+    viewPd: false
   }
 ];
 
@@ -279,7 +289,7 @@ const StatusDisplay = ({
           <Button
             disabled={tab == "polygonReview"}
             variant="semi-black"
-            className={`w-full flex-1 whitespace-nowrap ${tab == "polygonReview" ? "opacity-0" : ""}`}
+            className={classNames("w-full flex-1 whitespace-nowrap", { "opacity-0": tab === "polygonReview" })}
             onClick={openFormModalHandlerRequest}
           >
             <Text variant="text-12-bold">Change Request</Text>

src/admin/modules/sites/components/SiteShow.tsx

@@ -15,6 +15,7 @@ const SiteShow: FC = () => {
     <Show
       title={<ShowTitle moduleName="Site" getTitle={record => record?.name} />}
       actions={<ShowActions titleSource="name" resourceName="site" />}
+      className="-mt-[50px] bg-neutral-100"
     >
       <TabbedShowLayout>
         <InformationTab type="sites" />

src/components/elements/MapSidePanel/MapSidePanel.stories.tsx

@@ -20,6 +20,7 @@ export const Default: Story = {
         {...args}
         items={items.filter(item => (query ? item.title.includes(query) : item))}
         onSearch={setQuery}
+        title="Project Sites"
       />
     );
   },
@@ -33,32 +34,50 @@ const items = [
   {
     uuid: "1",
     title: "Puerto Princesa Subterranean River National Park Forest Corridor",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "2",
     title: "A medium sized project site to see how it looks with 2 lines",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "3",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "4",
     title:
       "Very long name A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines A medium sized project site to see how it looks with 2 lines",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "5",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   },
   {
     uuid: "6",
     title: "A shorter project site",
-    subtitle: "Created 03/12/21"
+    subtitle: "Created 03/12/21",
+    status: "submitted",
+    setClickedButton: console.log,
+    refContainer: null
   }
 ];