Merge pull request #661 from wri/release/sassy-sycamore

[RELEASE] Sassy Sycamore

.husky/prepare-commit-msg

@@ -0,0 +1,27 @@
+#!/bin/sh
+
+COMMIT_MSG_FILE=$1
+
+# get current branch
+branchName=`git rev-parse --abbrev-ref HEAD`
+
+# search jira issue id in a pattern such a "fix/TM-123-description"
+# regex tries to see if TM-#### is the branch name and extract that, otherwise return empty.
+jira_id=$(echo $branchName | sed -E 's~^([a-z]+/(TM\-[0-9]+).*)|(.+)$~\2~')
+
+# Test to see if jira_id is empty
+if [ -z $jira_id ]; then
+  exit 0
+fi
+
+# Test the commit message file to see if the Jira ID is already prepended. If so, exit.
+grep -Eq "^\[$jira_id\]" $COMMIT_MSG_FILE
+
+if [ $? -eq 0 ]; then
+  exit 0
+fi
+
+# only prepare commit message if pattern matched and jira_id was found
+if [ ! -z $jira_id ]; then
+  sed -i.bak -e "1s|^|\[$jira_id\] |" $COMMIT_MSG_FILE
+fi

src/admin/apiProvider/utils/user.ts

@@ -3,6 +3,7 @@ export type UserRole =
   | "admin-ppc"
   | "admin-terrafund"
   | "admin-hbf"
+  | "admin-epa-ghana-pilot"
   | "project-developer"
   | "project-manager";
 

src/admin/modules/form/components/FormBuilder/QuestionArrayInput.tsx

@@ -211,6 +211,7 @@ export const QuestionArrayInput = ({
                       )}
                       validate={minLength(1, "At least one Follow-up questions is required")}
                       isChildQuestion
+                      onDeleteQuestion={onDeleteQuestion}
                     >
                       <BooleanInput
                         source="show_on_parent_condition"

src/admin/modules/user/components/UserEdit.tsx

@@ -1,8 +1,21 @@
-import { AutocompleteInput, Edit, ReferenceInput, SelectInput, SimpleForm, TextInput } from "react-admin";
+import {
+  AutocompleteInput,
+  Edit,
+  ReferenceInput,
+  SelectArrayInput,
+  SelectInput,
+  SimpleForm,
+  TextInput
+} from "react-admin";
 import * as yup from "yup";
 
 import { useGetUserRole } from "@/admin/hooks/useGetUserRole";
-import { countriesChoices, frameworkChoices, userPrimaryRoleChoices } from "@/admin/modules/user/const";
+import {
+  countriesChoices,
+  directFrameworkChoices,
+  frameworkChoices,
+  userPrimaryRoleChoices
+} from "@/admin/modules/user/const";
 import { validateForm } from "@/admin/utils/forms";
 
 import modules from "../..";
@@ -41,6 +54,12 @@ const UserEdit = () => {
         {isSuperAdmin && <SelectInput source="role" label="Role" choices={userPrimaryRoleChoices} fullWidth />}
         <SelectInput source="program" label="Program" choices={frameworkChoices} fullWidth />
         <SelectInput source="country" label="Country" choices={countriesChoices} fullWidth />
+        <SelectArrayInput
+          source="direct_frameworks"
+          label="Direct Frameworks"
+          choices={directFrameworkChoices}
+          fullWidth
+        />
       </SimpleForm>
     </Edit>
   );

src/admin/modules/user/components/UserShow.tsx

@@ -36,6 +36,11 @@ function ManagedProjects() {
   );
 }
 
+const renderFrameworks = (property: string) => (record: any) => {
+  const frameworks: string[] = (record[property] as string[]) ?? [];
+  return frameworks.length == 0 ? "No Frameworks" : frameworks.join(", ");
+};
+
 export const UserShow = () => (
   <Show
     actions={
@@ -57,6 +62,11 @@ export const UserShow = () => (
         <FunctionField render={(record: V2AdminOrganisationRead) => record.name || "No Organisation Name"} />
       </ReferenceField>
       <DateField label="Last date active" source="last_logged_in_at" />
+      <FunctionField
+        label="All Frameworks (includes frameworks through role and project associations)"
+        render={renderFrameworks("all_frameworks")}
+      />
+      <FunctionField label="Direct Frameworks" render={renderFrameworks("direct_frameworks")} />
       <ManagedProjects />
     </SimpleShowLayout>
   </Show>

src/admin/modules/user/const.ts

@@ -1,4 +1,5 @@
 import { getCountriesOptions } from "@/constants/options/countries";
+import { Framework } from "@/context/framework.provider";
 
 export const userPrimaryRoleChoices = [
   {
@@ -13,6 +14,10 @@ export const userPrimaryRoleChoices = [
     id: "admin-hbf",
     name: "HBF Admin"
   },
+  {
+    id: "admin-epa-ghana-pilot",
+    name: "EPA Ghana Pilot Admin"
+  },
   {
     id: "admin-super",
     name: "Super Admin"
@@ -50,3 +55,7 @@ export const frameworkChoices = [
     name: "TerraFund"
   }
 ];
+
+export const directFrameworkChoices = Object.values(Framework)
+  .filter(slug => slug !== "undefined")
+  .map(slug => ({ id: slug, name: slug }));

src/components/elements/Button/Button.tsx

@@ -29,6 +29,7 @@ export interface IButtonProps extends Omit<HTMLProps<HTMLElement>, "as"> {
     | "white-toggle"
     | "white-border"
     | "orange"
+    | "about-us"
     | "transparent-toggle"
     | "white-button-map";
   fullWidth?: boolean;
@@ -158,6 +159,11 @@ const Button: FC<IButtonProps> = props => {
           container: "h-fit rounded-lg bg-white px-4 py-2 shadow hover:bg-neutral-200",
           span: "flex items-center gap-2"
         };
+      case "about-us":
+        return {
+          container: "h-fit rounded-lg bg-green-200 px-5 py-[18px] hover:bg-green-60 text-white",
+          span: "flex items-center text-16-bold"
+        };
       default:
         return { container: "", span: "" };
     }

src/components/elements/Inputs/DataTable/DataTable.tsx

@@ -14,6 +14,14 @@ import { ModalId } from "@/components/extensive/Modal/ModalConst";
 import { FieldType, FormField } from "@/components/extensive/WizardForm/types";
 import { useModalContext } from "@/context/modal.provider";
 
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    width?: string;
+    align?: "left" | "center" | "right";
+  }
+}
+
 export interface DataTableProps<TData extends RowData & { uuid: string }> extends Omit<InputWrapperProps, "errors"> {
   modalTitle?: string;
   fields: FormField[];

src/components/elements/Inputs/WorkdaysInput/RHFWorkdaysTable.tsx → src/components/elements/Inputs/DemographicsInput/RHFDemographicsTable.tsx

@@ -3,28 +3,30 @@ import { PropsWithChildren, useCallback, useMemo } from "react";
 import { useController, UseControllerProps, UseFormReturn } from "react-hook-form";
 
 import InputWrapper from "@/components/elements/Inputs/InputElements/InputWrapper";
-import { Demographic } from "@/components/extensive/WorkdayCollapseGrid/types";
-import WorkdayCollapseGrid from "@/components/extensive/WorkdayCollapseGrid/WorkdayCollapseGrid";
-import { GRID_VARIANT_GREEN } from "@/components/extensive/WorkdayCollapseGrid/WorkdayVariant";
+import DemographicsCollapseGrid from "@/components/extensive/DemographicsCollapseGrid/DemographicsCollapseGrid";
+import { GRID_VARIANT_GREEN } from "@/components/extensive/DemographicsCollapseGrid/DemographicVariant";
+import { Demographic, DemographicalType } from "@/components/extensive/DemographicsCollapseGrid/types";
 import { Entity } from "@/types/common";
 
 import { DataTableProps } from "../DataTable/DataTable";
 
-export interface RHFWorkdaysTableProps
+export interface RHFDemographicsTableProps
   extends Omit<DataTableProps<any>, "value" | "onChange" | "fields" | "addButtonCaption" | "tableColumns">,
     UseControllerProps {
+  demographicalType: DemographicalType;
   onChangeCapture?: () => void;
   formHook?: UseFormReturn;
   entity: Entity;
   collection: string;
 }
 
-const RHFWorkdaysTable = ({
+const RHFDemographicsTable = ({
+  demographicalType,
   onChangeCapture,
   entity,
   collection,
   ...props
-}: PropsWithChildren<RHFWorkdaysTableProps>) => {
+}: PropsWithChildren<RHFDemographicsTableProps>) => {
   const {
     field: { value, onChange }
   } = useController(props);
@@ -38,7 +40,7 @@ const RHFWorkdaysTable = ({
       // set to the collection multiple times. Here, we take the last value for each combo, and discard
       // the rest. Once the changes have propagated through the form system, the risk of duplicates
       // goes away because the useSectionData hook will see the new value and provide the correct
-      // data to the individual WorkdayRows
+      // data to the individual DemographicsRows
       updatedDemographics = updatedDemographics.filter(
         ({ type, subtype, name }, index) =>
           index ===
@@ -55,9 +57,14 @@ const RHFWorkdaysTable = ({
 
   return (
     <InputWrapper {...props}>
-      <WorkdayCollapseGrid demographics={demographics} variant={GRID_VARIANT_GREEN} onChange={updateDemographics} />
+      <DemographicsCollapseGrid
+        demographicalType={demographicalType}
+        demographics={demographics}
+        variant={GRID_VARIANT_GREEN}
+        onChange={updateDemographics}
+      />
     </InputWrapper>
   );
 };
 
-export default RHFWorkdaysTable;
+export default RHFDemographicsTable;

src/components/elements/Inputs/Dropdown/Dropdown.tsx

@@ -52,6 +52,7 @@ export interface DropdownProps {
   onChangeConfirm?: boolean;
   showClear?: boolean;
   showLabelAsMultiple?: boolean;
+  multipleText?: string;
   disableOptionTitles?: string[] | undefined;
   setOnChangeConfirm?: (confirm: boolean) => void;
   onChange: (value: OptionValue[]) => void;
@@ -150,9 +151,20 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
     return props?.disableOptionTitles?.includes(title);
   };
 
-  const formatSelectedValues = (selected: OptionValue[], options: Option[], value: any) => {
-    if (selected.length > 1 && props.showLabelAsMultiple) {
-      return `Multiple ${props.placeholder}s`;
+  const formatSelectedValues = (
+    selected: OptionValue[],
+    options: Option[],
+    value: any,
+    showLabelAsMultiple?: boolean,
+    placeholder?: string,
+    multipleText?: string
+  ) => {
+    if (selected.length > 1 && showLabelAsMultiple) {
+      if (multipleText) {
+        return multipleText;
+      }
+      const basePlaceholder = placeholder?.endsWith("s") ? placeholder.slice(0, -1) : placeholder;
+      return `Multiple ${basePlaceholder}s`;
     } else {
       return formatOptionsList(options, toArray<any>(value));
     }
@@ -198,9 +210,23 @@ const Dropdown = (props: PropsWithChildren<DropdownProps>) => {
                 <Text
                   variant={props.inputVariant ?? "text-14-light"}
                   className={tw("w-full", variant.titleClassname)}
-                  title={formatSelectedValues(selected, options, value)}
+                  title={formatSelectedValues(
+                    selected,
+                    options,
+                    value,
+                    props.showLabelAsMultiple,
+                    props.placeholder,
+                    props.multipleText
+                  )}
                 >
-                  {formatSelectedValues(selected, options, value) || props.placeholder}
+                  {formatSelectedValues(
+                    selected,
+                    options,
+                    value,
+                    props.showLabelAsMultiple,
+                    props.placeholder,
+                    props.multipleText
+                  ) || props.placeholder}
                 </Text>
               </div>
               <When condition={selected.length > 0 && showClear}>