From 19b98987ce66bcf1870248c4f4d759f12038d054 Mon Sep 17 00:00:00 2001 From: Nathan Curtis Date: Tue, 17 Dec 2024 12:12:17 -0800 Subject: [PATCH 01/10] [TM-1576] Update form header content for site reports. --- src/components/extensive/WizardForm/FormHeader.tsx | 8 ++++++-- src/components/extensive/WizardForm/index.tsx | 2 ++ .../entity/[entityName]/edit/[uuid]/EditEntityForm.tsx | 8 +++++++- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/extensive/WizardForm/FormHeader.tsx b/src/components/extensive/WizardForm/FormHeader.tsx index b479cb014..2b9c61ae9 100644 --- a/src/components/extensive/WizardForm/FormHeader.tsx +++ b/src/components/extensive/WizardForm/FormHeader.tsx @@ -11,11 +11,15 @@ export interface WizardFormHeaderProps { errorMessage?: string; onClickSaveAndCloseButton?: () => void; title?: string; + subtitle?: string; } export const WizardFormHeader = (props: WizardFormHeaderProps) => { const t = useT(); + const subtitle = + props.subtitle ?? t("Progress: {number} steps complete", { number: `${props.currentStep}/${props.numberOfSteps}` }); + return (
@@ -27,9 +31,9 @@ export const WizardFormHeader = (props: WizardFormHeaderProps) => { )}
- + {subtitle} - + {t("Unsaved")} {t("Saving…")} diff --git a/src/components/extensive/WizardForm/index.tsx b/src/components/extensive/WizardForm/index.tsx index 4cea6fcb1..aeb1452c7 100644 --- a/src/components/extensive/WizardForm/index.tsx +++ b/src/components/extensive/WizardForm/index.tsx @@ -32,6 +32,7 @@ export interface WizardFormProps { formStatus?: "saving" | "saved"; title?: string; + subtitle?: string; errors?: ErrorWrapper; summaryOptions?: FormSummaryOptions & { downloadButtonText?: string; @@ -267,6 +268,7 @@ function WizardForm(props: WizardFormProps) { errorMessage={props.errors && t("Something went wrong")} onClickSaveAndCloseButton={!props.hideSaveAndCloseButton ? onClickSaveAndClose : undefined} title={props.title} + subtitle={props.subtitle} />
diff --git a/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx b/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx index 8b7876904..c6832cb0d 100644 --- a/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx +++ b/src/pages/entity/[entityName]/edit/[uuid]/EditEntityForm.tsx @@ -64,7 +64,12 @@ const EditEntityForm = ({ entityName, entityUUID, entity, formData }: EditEntity ); const reportingWindow = useReportingWindow(entity?.due_at); - const formTitle = `${formData.form?.title} ${isReport ? reportingWindow : ""}`; + const formTitle = + entityName === "site-reports" + ? t("{siteName} Site Report", { siteName: entity.site.name }) + : `${formData.form?.title} ${isReport ? reportingWindow : ""}`; + const formSubtitle = + entityName === "site-reports" ? t("Reporting Period: {reportingWindow}", { reportingWindow }) : undefined; const saveAndCloseModalMapping: any = { projects: t( @@ -117,6 +122,7 @@ const EditEntityForm = ({ entityName, entityUUID, entity, formData }: EditEntity submitButtonDisable={isSubmitting} defaultValues={defaultValues} title={formTitle} + subtitle={formSubtitle} tabOptions={{ markDone: true, disableFutureTabs: true From f5766aafad70673dd08afd6ea239f38ef1ac6784 Mon Sep 17 00:00:00 2001 From: Nathan Curtis Date: Tue, 17 Dec 2024 14:43:41 -0800 Subject: [PATCH 02/10] [TM-1578] Prevent adding a species that is already on the list. --- .../NonScientificConfirmationModal.tsx | 36 ++++++++++++++ .../SpeciesAlreadyExistsModal.tsx | 27 +++++++++++ .../TreeSpeciesInput/TreeSpeciesInput.tsx | 48 +++---------------- .../TreeSpeciesInput/TreeSpeciesModal.tsx | 33 +++++++++++++ 4 files changed, 103 insertions(+), 41 deletions(-) create mode 100644 src/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal.tsx create mode 100644 src/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal.tsx create mode 100644 src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx diff --git a/src/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal.tsx b/src/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal.tsx new file mode 100644 index 000000000..b25b5ad9a --- /dev/null +++ b/src/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal.tsx @@ -0,0 +1,36 @@ +import { useT } from "@transifex/react"; + +import Button from "@/components/elements/Button/Button"; +import TreeSpeciesModal from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal"; +import { ModalId } from "@/components/extensive/Modal/ModalConst"; +import { useModalContext } from "@/context/modal.provider"; + +const NonScientificConfirmationModal = ({ onConfirm }: { onConfirm: () => void }) => { + const t = useT(); + const { closeModal } = useModalContext(); + + return ( + + + + + } + /> + ); +}; + +export default NonScientificConfirmationModal; diff --git a/src/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal.tsx b/src/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal.tsx new file mode 100644 index 000000000..a9036af1e --- /dev/null +++ b/src/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal.tsx @@ -0,0 +1,27 @@ +import { useT } from "@transifex/react"; + +import Button from "@/components/elements/Button/Button"; +import TreeSpeciesModal from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal"; +import { ModalId } from "@/components/extensive/Modal/ModalConst"; +import { useModalContext } from "@/context/modal.provider"; + +const SpeciesAlreadyExistsModal = ({ speciesName }: { speciesName: string }) => { + const { closeModal } = useModalContext(); + const t = useT(); + + return ( + + + + } + /> + ); +}; + +export default SpeciesAlreadyExistsModal; diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx index 8677e0eba..2cfea89fb 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx @@ -6,6 +6,8 @@ import { FieldError, FieldErrors } from "react-hook-form"; import { Else, If, Then, When } from "react-if"; import { v4 as uuidv4 } from "uuid"; +import NonScientificConfirmationModal from "@/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal"; +import SpeciesAlreadyExistsModal from "@/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal"; import { useAutocompleteSearch } from "@/components/elements/Inputs/TreeSpeciesInput/useAutocompleteSearch"; import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import List from "@/components/extensive/List/List"; @@ -43,45 +45,6 @@ export interface TreeSpeciesInputProps extends Omit export type TreeSpeciesValue = { uuid?: string; name?: string; taxon_id?: string; amount?: number }; -const NonScientificConfirmationModal = ({ onConfirm }: { onConfirm: () => void }) => { - const t = useT(); - const { closeModal } = useModalContext(); - - return ( -
-
- - - {t("Your input is a not a scientific name")} - -
-
-
-
- - {t("You can add this species, but it will be pending review from Admin.")} - -
-
-
- - -
-
-
- ); -}; - const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { const id = useId(); const t = useT(); @@ -183,8 +146,11 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { lastInputRef.current?.focus(); }; - if (!isEmpty(searchResult) && taxonId == null) { - // In this case the use had valid values to choose from, but decided to add a value that isn't + if (value.find(({ name }) => name === valueAutoComplete) != null) { + openModal(ModalId.ERROR_MODAL, ); + setValueAutoComplete(""); + } else if (!isEmpty(searchResult) && taxonId == null) { + // In this case the user had valid values to choose from, but decided to add a value that isn't // on the list, so they haven't been shown the warning yet. openModal(ModalId.ERROR_MODAL, ); } else { diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx new file mode 100644 index 000000000..11076cdf1 --- /dev/null +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx @@ -0,0 +1,33 @@ +import { ReactNode } from "react"; + +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; + +type TreeSpeciesModalProps = { + title: string; + content: string; + buttons: ReactNode; +}; + +const TreeSpeciesModal = ({ title, content, buttons }: TreeSpeciesModalProps) => ( +
+
+ + + {title} + +
+
+
+
+ + {content} + +
+
+
{buttons}
+
+
+); + +export default TreeSpeciesModal; From 0d4f27370119c6dcf1aab87e8e24ff847889069b Mon Sep 17 00:00:00 2001 From: Jose Carlos Laura Ramirez Date: Wed, 18 Dec 2024 09:45:11 -0400 Subject: [PATCH 03/10] [TM-1542] remove percentage based questions warning label (#763) --- src/components/extensive/WizardForm/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/extensive/WizardForm/utils.ts b/src/components/extensive/WizardForm/utils.ts index 13893a348..e7f21f0a0 100644 --- a/src/components/extensive/WizardForm/utils.ts +++ b/src/components/extensive/WizardForm/utils.ts @@ -44,7 +44,7 @@ export const getSchemaFields = (fields: FormField[]) => { } }); } else { - schema[field.name] = field.validation?.nullable().label(field.label); + schema[field.name] = field.validation?.nullable().label(" "); } if (field.fieldProps.required) schema[field.name] = schema[field.name].required(); From 5227a43890fc2dd1fea553b5d67b54f61590ac3b Mon Sep 17 00:00:00 2001 From: Dotnara Condori Date: Wed, 18 Dec 2024 13:31:20 -0400 Subject: [PATCH 04/10] [TM-1561] Edit position sort in table (#764) * [TM-1561] Edit position sort in table * update snapshots --------- Co-authored-by: diego-morales-flores-1996 --- .../ResourceTabs/PolygonReviewTab/index.tsx | 27 +- src/components/elements/Table/Table.tsx | 66 +- .../__snapshots__/Table.stories.storyshot | 1370 ++++++++++++++--- 3 files changed, 1221 insertions(+), 242 deletions(-) diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx index 9117e6456..0418ea6ce 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx @@ -742,7 +742,7 @@ const PolygonReviewTab: FC = props => { pagination: { pageSize: 10000000 } }} columns={[ - { header: "Polygon Name", accessorKey: "polygon-name" }, + { header: "Polygon Name", accessorKey: "polygon-name", meta: { style: { width: "14.63%" } } }, { header: "Restoration Practice", accessorKey: "restoration-practice", @@ -751,15 +751,28 @@ const PolygonReviewTab: FC = props => { return ( ); - } + }, + meta: { style: { width: "17.63%" } } }, - { header: "Target Land Use System", accessorKey: "target-land-use-system" }, - { header: "Tree Distribution", accessorKey: "tree-distribution" }, - { header: "Planting Start Date", accessorKey: "planting-start-date" }, - { header: "Source", accessorKey: "source" }, + { + header: "Target Land Use System", + accessorKey: "target-land-use-system", + meta: { style: { width: "20.63%" } } + }, + { + header: "Tree Distribution", + accessorKey: "tree-distribution", + meta: { style: { width: "15.63%" } } + }, + { + header: "Planting Start Date", + accessorKey: "planting-start-date", + meta: { style: { width: "17.63%" } } + }, + { header: "Source", accessorKey: "source", meta: { style: { width: "10.63%" } } }, { header: "", accessorKey: "ellipse", diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx index 97bbe9287..a1fafcae7 100644 --- a/src/components/elements/Table/Table.tsx +++ b/src/components/elements/Table/Table.tsx @@ -14,7 +14,7 @@ import { import { useT } from "@transifex/react"; import classNames from "classnames"; import Lottie from "lottie-react"; -import { DetailedHTMLProps, PropsWithChildren, TableHTMLAttributes, useEffect, useMemo, useState } from "react"; +import { DetailedHTMLProps, PropsWithChildren, TableHTMLAttributes, useEffect, useMemo, useRef, useState } from "react"; import { Else, If, Then, When } from "react-if"; import { twMerge as tw } from "tailwind-merge"; @@ -95,6 +95,9 @@ function Table({ const [sorting, setSorting] = useState(initialTableState?.sorting ?? []); const [filters, setFilters] = useState([]); + const spanRefs = useRef([]); + const iconRefs = useRef([]); + const { getHeaderGroups, getRowModel, @@ -183,7 +186,6 @@ function Table({ } >
({ fontFamily: "inherit" }} > - {flexRender(header.column.columnDef.header, header.getContext())} - - - + + { + if ( + el && + !spanRefs.current.includes(el) && + flexRender(header.column.columnDef.header, header.getContext()) + ) { + spanRefs.current.push(el); + } + }} + > + {flexRender(header.column.columnDef.header, header.getContext())} + + + { + if (el && !iconRefs.current.includes(el)) { + iconRefs.current.push(el); + } + }} + className="absolute left-[calc(100%+10px)] top-1/2 z-auto -translate-y-1/2 transform" + style={{ left: `${spanRefs.current[header.index]?.offsetWidth}px` }} + > + + + +
); diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot index 4049211ad..f4994aa8d 100644 --- a/src/components/elements/Table/__snapshots__/Table.stories.storyshot +++ b/src/components/elements/Table/__snapshots__/Table.stories.storyshot @@ -124,7 +124,6 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -987,7 +1065,6 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -1850,7 +2006,6 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -2713,7 +2947,6 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -3579,7 +3891,6 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -4443,7 +4833,6 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -5306,7 +5774,6 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -6172,7 +6718,6 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ + Funding amount + + + > +
+ +
- Status + + + Status + +
+ > + + + +
@@ -7039,7 +7663,6 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -7906,7 +8608,6 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -8770,7 +9550,6 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
@@ -9636,7 +10494,6 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = ` } >
- Funding type + + + Funding type + +
- Funding source -
+ > + + Funding source + + +
+ +
- Funding amount -
+ > + + Funding amount + + +
+ +
- Status + + + Status + +
+ > + + + +
From f9bed099549a9e75024cbfc277f1ac15832efb10 Mon Sep 17 00:00:00 2001 From: Dotnara Condori Date: Wed, 18 Dec 2024 14:17:54 -0400 Subject: [PATCH 05/10] Tm 1561 site attribute table site view admin provide consistent padding offset between header labels and their sorting icons (#765) * [TM-1561] Edit position sort in table * update snapshots * [TM-1561] fix error width in safary * fix lint --------- Co-authored-by: diego-morales-flores-1996 --- .../components/ResourceTabs/PolygonReviewTab/index.tsx | 10 ---------- src/components/elements/Table/Table.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx index 0418ea6ce..3b5bd4d46 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/index.tsx @@ -26,7 +26,6 @@ import LinearProgressBarMonitored from "@/components/elements/ProgressBar/Linear import Table from "@/components/elements/Table/Table"; import { VARIANT_TABLE_SITE_POLYGON_REVIEW } from "@/components/elements/Table/TableVariants"; import Text from "@/components/elements/Text/Text"; -import ToolTip from "@/components/elements/Tooltip/Tooltip"; import Icon from "@/components/extensive/Icon/Icon"; import { IconNames } from "@/components/extensive/Icon/Icon"; import ModalAdd from "@/components/extensive/Modal/ModalAdd"; @@ -629,9 +628,6 @@ const PolygonReviewTab: FC = props => {
Site Status - - - {record?.readable_status} @@ -640,9 +636,6 @@ const PolygonReviewTab: FC = props => {
Polygon Overview - - - @@ -660,9 +653,6 @@ const PolygonReviewTab: FC = props => {
Add or Edit Polygons - - - Add, remove or edit polygons that are associated to a site. Polygons may be edited in the map diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx index a1fafcae7..2c7ad9b2d 100644 --- a/src/components/elements/Table/Table.tsx +++ b/src/components/elements/Table/Table.tsx @@ -195,7 +195,9 @@ function Table({ > ({ } }} className="absolute left-[calc(100%+10px)] top-1/2 z-auto -translate-y-1/2 transform" - style={{ left: `${spanRefs.current[header.index]?.offsetWidth}px` }} + style={{ left: `${spanRefs.current[header.index]?.getBoundingClientRect().width}px` }} > Date: Wed, 18 Dec 2024 11:11:15 -0800 Subject: [PATCH 06/10] [TM-1580] Respect the label specified in the form builder. --- .../elements/Inputs/TreeSpeciesInput/RHFTreeSpeciesInput.tsx | 2 +- .../elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx | 3 ++- .../__snapshots__/TreeSpeciesInput.stories.storyshot | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/elements/Inputs/TreeSpeciesInput/RHFTreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/RHFTreeSpeciesInput.tsx index 3bec5353a..2c48a4959 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/RHFTreeSpeciesInput.tsx +++ b/src/components/elements/Inputs/TreeSpeciesInput/RHFTreeSpeciesInput.tsx @@ -28,7 +28,7 @@ const RHFTreeSpeciesInput = (props: PropsWithChildren) return ( { title: string; + label?: string; buttonCaptionSuffix: string; withNumbers?: boolean; withPreviousCounts: boolean; @@ -191,7 +192,7 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { return ( - ADD TREE SPECIES * + Tree Species Grown *

- ADD TREE SPECIES * + Tree Species Grown *

Date: Wed, 18 Dec 2024 16:50:36 -0400 Subject: [PATCH 07/10] Fix/tm 1425 add color tag monitored table (#768) * [TM-1527] Update the defaults. * [TM-1425] fix error color tag in table monitored * [TM-1425] fix error table link --------- Co-authored-by: Nathan Curtis --- next.config.js | 4 +- .../components/Fields/CustomChipField.tsx | 5 +- .../MonitoredTab/components/DataCard.tsx | 290 +++++++++--------- 3 files changed, 153 insertions(+), 146 deletions(-) diff --git a/next.config.js b/next.config.js index 2add3246d..a7f8b6f5e 100644 --- a/next.config.js +++ b/next.config.js @@ -45,8 +45,8 @@ const userSentryWebpackPluginOptions = { // Suppresses source map uploading logs during build silent: true, - org: process.env.SENTRY_ORG || "3-sided-cube", - project: process.env.SENTRY_PROJECT || "wri-web-platform-version-2", + org: process.env.SENTRY_ORG ?? "wri-terramatch", + project: process.env.SENTRY_PROJECT ?? "terramatch-frontend", authToken: process.env.SENTRY_AUTH_TOKEN }; diff --git a/src/admin/components/Fields/CustomChipField.tsx b/src/admin/components/Fields/CustomChipField.tsx index e0a578304..66f1e51c9 100644 --- a/src/admin/components/Fields/CustomChipField.tsx +++ b/src/admin/components/Fields/CustomChipField.tsx @@ -16,7 +16,10 @@ const STATUS_CLASSNAME_MAP: { [key: string]: string } = { "Needs Info": "bg-tertiary-50 text-tertiary-650", "Needs more information": "bg-tertiary-50 text-tertiary-650", "More info requested": "bg-tertiary-50 text-tertiary-650", - "No Update": "bg-grey-200 text-grey-500" + "No Update": "bg-grey-200 text-grey-500", + approved: "bg-green-30 text-green-100", + submitted: "bg-blue-200 text-blue", + "needs-more-information": "bg-tertiary-50 text-tertiary-650" }; const CustomChipField = ({ diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx index ec2e28b5c..3abdfde48 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx @@ -120,144 +120,6 @@ const COMMON_COLUMNS: ColumnDef[] = [ type CustomColumnDefInternal = ColumnDef & { type?: string }; -const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef[] = [ - ...COMMON_COLUMNS, - { - accessorKey: "data.tree_planting", - header: "Tree Planting", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.95%" } } - }, - { - accessorKey: "data.assisted_natural_regeneration", - header: () => ( - <> - Asst. Nat. -
- Regeneration - - ), - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "12.09%" } } - }, - { - accessorKey: "data.direct_seeding", - header: () => ( - <> - Direct -
- Seeding - - ), - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "8.57%" } } - }, - { - accessorKey: "more", - header: "", - enableSorting: false, - cell: props => ( -

- -
- ), - meta: { style: { width: "5%" } } - } -]; - -const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef[] = [ - ...COMMON_COLUMNS, - { - accessorKey: "data.australasian", - header: "Australasian", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.45%" } } - }, - { - accessorKey: "data.afrotropical", - header: "Afrotropical", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.05%" } } - }, - { - accessorKey: "data.paleartic", - header: "Paleartic11", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "10.33%" } } - }, - { - accessorKey: "more", - header: "", - enableSorting: false, - cell: props => ( -
- -
- ), - meta: { style: { width: "5%" } } - } -]; - -const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef[] = [ - ...COMMON_COLUMNS, - { - accessorKey: "data.agroforest", - header: "Agroforest", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.95%" } } - }, - { - accessorKey: "data.natural_forest", - header: "Natural Forest", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "12.09%" } } - }, - { - accessorKey: "data.mangrove", - header: "Mangrove", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "8.57%" } } - }, - { - accessorKey: "more", - header: "", - enableSorting: false, - cell: props => ( -
- -
- ), - meta: { style: { width: "5%" } } - } -]; - const DROPDOWN_OPTIONS = [ { title: "Tree Cover Loss", @@ -549,7 +411,9 @@ const DataCard = ({ enableSorting: false, cell: props => (
- +
), meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0" } } @@ -558,6 +422,150 @@ const DataCard = ({ } ]; + const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef[] = [ + ...COMMON_COLUMNS, + { + accessorKey: "data.tree_planting", + header: "Tree Planting", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.95%" } } + }, + { + accessorKey: "data.assisted_natural_regeneration", + header: () => ( + <> + Asst. Nat. +
+ Regeneration + + ), + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "12.09%" } } + }, + { + accessorKey: "data.direct_seeding", + header: () => ( + <> + Direct +
+ Seeding + + ), + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "8.57%" } } + }, + { + accessorKey: "more", + header: "", + enableSorting: false, + cell: props => ( +
+ +
+ ), + meta: { style: { width: "5%" } } + } + ]; + + const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef[] = [ + ...COMMON_COLUMNS, + { + accessorKey: "data.australasian", + header: "Australasian", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.45%" } } + }, + { + accessorKey: "data.afrotropical", + header: "Afrotropical", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.05%" } } + }, + { + accessorKey: "data.paleartic", + header: "Paleartic11", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "10.33%" } } + }, + { + accessorKey: "more", + header: "", + enableSorting: false, + cell: props => ( +
+ +
+ ), + meta: { style: { width: "5%" } } + } + ]; + + const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef[] = [ + ...COMMON_COLUMNS, + { + accessorKey: "data.agroforest", + header: "Agroforest", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.95%" } } + }, + { + accessorKey: "data.natural_forest", + header: "Natural Forest", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "12.09%" } } + }, + { + accessorKey: "data.mangrove", + header: "Mangrove", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "8.57%" } } + }, + { + accessorKey: "more", + header: "", + enableSorting: false, + cell: props => ( +
+ +
+ ), + meta: { style: { width: "5%" } } + } + ]; + const TABLE_COLUMNS_MAPPING: Record = { treeCoverLoss: TABLE_COLUMNS_TREE_COVER_LOSS, treeCoverLossFires: TABLE_COLUMNS_TREE_COVER_LOSS, @@ -636,10 +644,6 @@ const DataCard = ({ classNameWrapper="!overflow-visible" visibleRows={50} border={1} - onRowClick={(row: any) => { - navigate(`${basename}/site/${row?.site_id}/show/1`); - setSelectPolygonFromMap?.({ isOpen: true, uuid: row?.poly_id }); - }} />
From 41822720dca7539679864628352c6f5dfabe6f9a Mon Sep 17 00:00:00 2001 From: Limber Mamani <154026979+LimberHope@users.noreply.github.com> Date: Thu, 19 Dec 2024 11:46:56 -0400 Subject: [PATCH 08/10] [TM-1531] update job result attributes (#771) --- src/generated/apiFetcher.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/generated/apiFetcher.ts b/src/generated/apiFetcher.ts index 9c489d679..0b08d922b 100644 --- a/src/generated/apiFetcher.ts +++ b/src/generated/apiFetcher.ts @@ -193,11 +193,11 @@ async function processDelayedJob(signal: AbortSignal | undefined, delayed jobResult = await loadJob(signal, delayedJobId) ) { //@ts-ignore - const { total_content, processed_content, progress_message } = jobResult.data?.attributes; - if (total_content != null) { - ApiSlice.addTotalContent(total_content); - ApiSlice.addProgressContent(processed_content); - ApiSlice.addProgressMessage(progress_message); + const { totalContent, processedContent, progressMessage } = jobResult.data?.attributes; + if (totalContent != null) { + ApiSlice.addTotalContent(totalContent); + ApiSlice.addProgressContent(processedContent); + ApiSlice.addProgressMessage(progressMessage); } if (signal?.aborted || ApiSlice.apiDataStore.abort_delayed_job) throw new Error("Aborted"); From 63eb1495e1296e73c387e56669b6ffa3a99486b4 Mon Sep 17 00:00:00 2001 From: Dotnara Condori Date: Thu, 19 Dec 2024 11:57:12 -0400 Subject: [PATCH 09/10] [TM-1559] edit sidebar add text nowrap (#770) * [TM-1527] Update the defaults. * [TM-1425] fix error color tag in table monitored (#766) * [TM-1425] fix error color tag in table monitored * [TM-1425] fix error table link * [TM-1562] update terrafund report landing pages with new fields (#769) * [TM-1559] fix error texct nowrap width --------- Co-authored-by: Nathan Curtis Co-authored-by: Limber Mamani <154026979+LimberHope@users.noreply.github.com> --- .../components/VersionHistory.tsx | 3 +- .../components/Tables/TreeSpeciesTableTF.tsx | 139 +++++++++++++ .../icons/assisted-natural-regeneration.svg | 8 + .../icons/non-scientific name custom.svg | 9 + src/assets/icons/tree-dashboard.svg | 3 + src/components/elements/Field/TextField.tsx | 6 +- .../elements/Inputs/Dropdown/Dropdown.tsx | 9 +- src/components/extensive/Icon/Icon.tsx | 5 +- .../project-report/tabs/TFSocioeconomic.tsx | 192 ++++++++++-------- src/pages/reports/site-report/[uuid].page.tsx | 60 +++++- 10 files changed, 337 insertions(+), 97 deletions(-) create mode 100644 src/admin/components/Tables/TreeSpeciesTableTF.tsx create mode 100644 src/assets/icons/assisted-natural-regeneration.svg create mode 100644 src/assets/icons/non-scientific name custom.svg create mode 100644 src/assets/icons/tree-dashboard.svg diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx index 3dff79d6f..5e7989a32 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx @@ -362,7 +362,8 @@ const VersionHistory = ({ placeholder="Select Polygon Version" options={polygonVersionData ?? []} optionVariant="text-12-light" - titleClassname="one-line-text !w-[96%] !text-nowrap" + titleClassname="one-line-text !w-full !text-nowrap" + titleContainerClassName="!w-[92%] !text-nowrap" defaultValue={[selectPolygonVersion?.uuid ?? selectedPolygon?.uuid] as string[]} onChange={e => { const polygonVersionData = (data as SitePolygonsDataResponse)?.find(item => item.uuid === e[0]); diff --git a/src/admin/components/Tables/TreeSpeciesTableTF.tsx b/src/admin/components/Tables/TreeSpeciesTableTF.tsx new file mode 100644 index 000000000..f862292d4 --- /dev/null +++ b/src/admin/components/Tables/TreeSpeciesTableTF.tsx @@ -0,0 +1,139 @@ +import { Card, Divider, Typography } from "@mui/material"; +import { Box, Stack } from "@mui/system"; +import { DataGrid, GridColDef } from "@mui/x-data-grid"; +import { useT } from "@transifex/react"; +import { FC } from "react"; +import { Else, If, Then } from "react-if"; + +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import { EstablishmentEntityType } from "@/connections/EstablishmentTrees"; +import { useGetV2TreeSpeciesEntityUUID } from "@/generated/apiComponents"; + +type TreeSpeciesTableTFProps = { + uuid: string; + entity: EstablishmentEntityType; + total?: number; + totalText?: string; + title?: string; + countColumnName?: string; + collection?: string; +}; + +const TreeSpeciesTableTF: FC = ({ + uuid, + entity, + total, + totalText, + title, + countColumnName, + collection = "tree-planted" +}) => { + const t = useT(); + const { data: rows } = useGetV2TreeSpeciesEntityUUID({ + pathParams: { + uuid, + entity: entity?.replace("Report", "-report")! + } + }); + + const columns: GridColDef[] = [ + { + field: "name", + headerName: "SPECIES NAME", + flex: 1, + sortable: false, + filterable: false + }, + { + field: "amount", + headerName: countColumnName ?? "TREE COUNT", + type: "number", + flex: 1, + headerAlign: "left", + align: "left", + sortable: false, + filterable: false + } + ]; + + if (!rows || !rows.data) return null; + + return ( + + + + + {title ?? "N/A"} + + + +
+
+ +
+ + {totalText}: + + + {new Intl.NumberFormat("en-US").format(total!) ?? "N/A"} + +
+ + + + + 0}> + + row.collection == collection) as any} + columns={columns.map(column => + column.field === "name" + ? { + ...column, + renderCell: params => ( +
+ + {params?.row?.name} + +
+ +
+
+ ) + } + : column + )} + getRowId={row => row.uuid} + sx={{ + border: "none", + "& .MuiDataGrid-columnHeader": { + paddingX: 3 + }, + "& .MuiDataGrid-cell": { + paddingX: 3 + } + }} + pageSizeOptions={[5, 10, 25, 50]} + initialState={{ + pagination: { + paginationModel: { page: 0, pageSize: 5 } + } + }} + /> + + + + No {title} Recorded + + + + + + ); +}; + +export default TreeSpeciesTableTF; diff --git a/src/assets/icons/assisted-natural-regeneration.svg b/src/assets/icons/assisted-natural-regeneration.svg new file mode 100644 index 000000000..fc129bce4 --- /dev/null +++ b/src/assets/icons/assisted-natural-regeneration.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/non-scientific name custom.svg b/src/assets/icons/non-scientific name custom.svg new file mode 100644 index 000000000..e92802b97 --- /dev/null +++ b/src/assets/icons/non-scientific name custom.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/tree-dashboard.svg b/src/assets/icons/tree-dashboard.svg new file mode 100644 index 000000000..db1ba8975 --- /dev/null +++ b/src/assets/icons/tree-dashboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/elements/Field/TextField.tsx b/src/components/elements/Field/TextField.tsx index 24fabb75a..344b79e12 100644 --- a/src/components/elements/Field/TextField.tsx +++ b/src/components/elements/Field/TextField.tsx @@ -2,18 +2,20 @@ import { DetailedHTMLProps, FC, HTMLAttributes } from "react"; import Text from "@/components/elements/Text/Text"; import { withFrameworkShow } from "@/context/framework.provider"; +import { TextVariants } from "@/types/common"; import BaseField from "./BaseField"; export interface TextFieldProps extends DetailedHTMLProps, HTMLDivElement> { label: string; value: string; + variantLabel?: TextVariants; } -const TextField: FC = ({ label, value, className, ...rest }) => ( +const TextField: FC = ({ label, value, variantLabel = "text-16-bold", className, ...rest }) => (
- {label} + {label} {value || "N/A"}
diff --git a/src/components/elements/Inputs/Dropdown/Dropdown.tsx b/src/components/elements/Inputs/Dropdown/Dropdown.tsx index b6815374e..dff695d13 100644 --- a/src/components/elements/Inputs/Dropdown/Dropdown.tsx +++ b/src/components/elements/Inputs/Dropdown/Dropdown.tsx @@ -60,6 +60,7 @@ export interface DropdownProps { onInternalError?: (error: ErrorOption) => void; showSelectAll?: boolean; titleClassname?: string; + titleContainerClassName?: string; } const otherKey = "other#value#key"; const getAllowedValues = (values: OptionValue[], options: Option[]) => @@ -206,7 +207,13 @@ const Dropdown = (props: PropsWithChildren) => { )} > {props.prefix} -
+
{ - const t = useT(); - - return ( - {t("Count")}, - cell: props => {props.getValue() as string} - } - ]} - data={data.map(item => ({ ...item, value: item.value ?? 0 }))} - /> - ); -}; - const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { const t = useT(); const { grids: gridsDirectWorkdays } = useDemographicData( @@ -60,6 +36,7 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { "Convergence Workdays", GRID_VARIANT_GREEN ); + const sumTotalJobs = (jobs: Array) => jobs.reduce((acc, key) => acc + (report[key] || 0), 0); return ( @@ -74,36 +51,48 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { )} {report.new_jobs_description} - - {report.new_jobs_description} - + {report.new_jobs_description} + - + + + + + + + + + + - {report.volunteers_work_description} - + {report.volunteers_work_description} + + + + + + + + + {report.beneficiaries_income_increase_description} + @@ -130,28 +119,82 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { + + + - {report.beneficiaries_description} - - {report.beneficiaries_income_increase_description} + + {report.beneficiaries_description} - + + + + + + + + + {report.beneficiaries_skills_knowledge_increase_description} - + + + + + + + + + {report.indirect_beneficiaries_description} + + - - {gridsConvergenceWorkdays.length == 0 ? ( @@ -179,27 +222,6 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { - - - - - - - - - - - {report.socioeconomic_benefits && ( - - {report.socioeconomic_benefits.map((item: any) => ( - downloadFile(f.url)} /> - ))} - - )} - diff --git a/src/pages/reports/site-report/[uuid].page.tsx b/src/pages/reports/site-report/[uuid].page.tsx index 5a77973f5..8cb7ad215 100644 --- a/src/pages/reports/site-report/[uuid].page.tsx +++ b/src/pages/reports/site-report/[uuid].page.tsx @@ -1,3 +1,4 @@ +import { Box } from "@mui/system"; import { useT } from "@transifex/react"; import Head from "next/head"; import Link from "next/link"; @@ -5,6 +6,7 @@ import { useRouter } from "next/router"; import { Fragment } from "react"; import { Else, If, Then, When } from "react-if"; +import TreeSpeciesTableTF from "@/admin/components/Tables/TreeSpeciesTableTF"; import EmptyState from "@/components/elements/EmptyState/EmptyState"; import ButtonField from "@/components/elements/Field/ButtonField"; import GenericField from "@/components/elements/Field/GenericField"; @@ -13,7 +15,7 @@ import TextField from "@/components/elements/Field/TextField"; import Paper from "@/components/elements/Paper/Paper"; import Text from "@/components/elements/Text/Text"; import EntityMapAndGalleryCard from "@/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard"; -import { IconNames } from "@/components/extensive/Icon/Icon"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageBreadcrumbs from "@/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; @@ -24,6 +26,7 @@ import SeedingsTable from "@/components/extensive/Tables/SeedingsTable"; import TreeSpeciesTable from "@/components/extensive/Tables/TreeSpeciesTable"; import Loader from "@/components/generic/Loading/Loader"; import LoadingContainer from "@/components/generic/Loading/LoadingContainer"; +import { EstablishmentEntityType } from "@/connections/EstablishmentTrees"; import { COLLECTION_SITE_PAID_OTHER, SITE_WORKDAY_COLLECTIONS } from "@/constants/workdayCollections"; import { ContextCondition } from "@/context/ContextCondition"; import FrameworkProvider, { Framework } from "@/context/framework.provider"; @@ -131,11 +134,57 @@ const SiteReportDetailPage = () => { {siteReport.polygon_status} {siteReport.technical_narrative} - + {siteReport.technical_narrative} {siteReport.public_narrative} - + + + + + + {t("Assisted Natural Regeneration")} + + + +
+
+ +
+ + {t("ESTIMATED NUMBER OF TREES REGENERATING (ON REPORT)")}: + + + {new Intl.NumberFormat("en-US").format(siteReport.total_trees_planted_count!) ?? "N/A"} + +
+ + + + {t("DESCRIPTION OF ANR ACTIVITIES")}: + + + {siteReport.regeneration_description} + + + + { - - {siteReport.polygon_status} - @@ -205,7 +251,7 @@ const SiteReportDetailPage = () => { - + From afd05265ecc4de5391ae5a3330e64f2eab6644fd Mon Sep 17 00:00:00 2001 From: Dotnara Condori Date: Thu, 19 Dec 2024 12:41:10 -0400 Subject: [PATCH 10/10] Fix/tm 1561 edit width cell table (#772) * [TM-1561] fix error width cell table in poligon review * [TM-1561] update snapshots * [TM-1561] fix width --------- Co-authored-by: diego-morales-flores-1996 --- .../components/VersionHistory.tsx | 2 +- src/components/elements/Table/Table.tsx | 9 +- .../elements/Table/TableVariants.ts | 4 +- .../__snapshots__/Table.stories.storyshot | 552 ++++++++++-------- src/styles/extended-utilities.css | 1 + 5 files changed, 315 insertions(+), 253 deletions(-) diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx index 5e7989a32..bb8af6a2c 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx @@ -363,7 +363,7 @@ const VersionHistory = ({ options={polygonVersionData ?? []} optionVariant="text-12-light" titleClassname="one-line-text !w-full !text-nowrap" - titleContainerClassName="!w-[92%] !text-nowrap" + titleContainerClassName="!w-[calc(100%-25px)] !text-nowrap" defaultValue={[selectPolygonVersion?.uuid ?? selectedPolygon?.uuid] as string[]} onChange={e => { const polygonVersionData = (data as SitePolygonsDataResponse)?.find(item => item.uuid === e[0]); diff --git a/src/components/elements/Table/Table.tsx b/src/components/elements/Table/Table.tsx index 2c7ad9b2d..78becf5e2 100644 --- a/src/components/elements/Table/Table.tsx +++ b/src/components/elements/Table/Table.tsx @@ -186,6 +186,7 @@ function Table({ } >
({ fontFamily: "inherit" }} > - ({ /> - +
); diff --git a/src/components/elements/Table/TableVariants.ts b/src/components/elements/Table/TableVariants.ts index fd80fb984..a444c5694 100644 --- a/src/components/elements/Table/TableVariants.ts +++ b/src/components/elements/Table/TableVariants.ts @@ -97,9 +97,9 @@ export const VARIANT_TABLE_SITE_POLYGON_REVIEW = { table: "border-collapse", name: "border-airtable", tableWrapper: "border border-neutral-200 rounded-lg overflow-hidden", - trHeader: "bg-neutral-150", + trHeader: "bg-neutral-150 sticky top-0 z-auto", thHeader: - "first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0", + "first:pl-4 first:pr-2 last:pl-2 last:pr-4 border-y border-neutral-200 text-14-semibold whitespace-normal px-2 border-t-0 sticky top-0 z-auto", tBody: "", trBody: "bg-white border-y border-neutral-200 last:border-b-0", tdBody: "text-14-light px-2 py-3 first:pl-4 first:pr-2 last:pl-2 last:pr-4 ", diff --git a/src/components/elements/Table/__snapshots__/Table.stories.storyshot b/src/components/elements/Table/__snapshots__/Table.stories.storyshot index f4994aa8d..ebac4acaa 100644 --- a/src/components/elements/Table/__snapshots__/Table.stories.storyshot +++ b/src/components/elements/Table/__snapshots__/Table.stories.storyshot @@ -124,6 +124,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` } >
- @@ -146,7 +147,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` > Funding type - +
@@ -1065,6 +1070,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = ` } >
- @@ -1087,7 +1093,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = ` > Funding type - +
@@ -2006,6 +2016,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = ` } >
- @@ -2028,7 +2039,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = ` > Funding type - +
@@ -2947,6 +2962,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = ` } >
- @@ -2969,7 +2985,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = ` > Funding type - +
@@ -3891,6 +3911,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = ` } >
- @@ -3913,7 +3934,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = ` > Funding type - +
@@ -4833,6 +4858,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = ` } >
- @@ -4855,7 +4881,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = ` > Funding type - +
@@ -5774,6 +5804,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = ` } >
- @@ -5796,7 +5827,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = ` > Funding type - +
@@ -6718,6 +6753,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = ` } >
- @@ -6740,7 +6776,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = ` > Funding type - +
@@ -7663,6 +7703,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1` } >
- @@ -7685,7 +7726,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1` > Funding type - +
@@ -8608,6 +8653,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = ` } >
- @@ -8630,7 +8676,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = ` > Funding type - +
@@ -9536,11 +9586,11 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = ` className="bg-blueCustom-100" > @@ -10494,6 +10549,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = ` } >
- @@ -10516,7 +10572,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = ` > Funding type - +
diff --git a/src/styles/extended-utilities.css b/src/styles/extended-utilities.css index a1ff1c221..13ee9b42f 100644 --- a/src/styles/extended-utilities.css +++ b/src/styles/extended-utilities.css @@ -674,6 +674,7 @@ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; + text-wrap: nowrap; } .two-line-text{
- @@ -200,7 +202,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` } /> - +
- @@ -254,7 +257,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` } /> - +
- @@ -291,7 +295,7 @@ exports[`Storyshots Components/Elements/Table Default 1`] = ` > Status - +
- - +
- @@ -1141,7 +1148,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = ` } /> - +
- @@ -1195,7 +1203,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = ` } /> - +
- @@ -1232,7 +1241,7 @@ exports[`Storyshots Components/Elements/Table Primary 1`] = ` > Status - +
- - +
- @@ -2082,7 +2094,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = ` } /> - +
- @@ -2136,7 +2149,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = ` } /> - +
- @@ -2173,7 +2187,7 @@ exports[`Storyshots Components/Elements/Table Secundary White 1`] = ` > Status - +
- - +
- @@ -3023,7 +3040,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = ` } /> - +
- @@ -3077,7 +3095,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = ` } /> - +
- @@ -3114,7 +3133,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable 1`] = ` > Status - +
- - +
- @@ -3967,7 +3989,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = ` } /> - +
- @@ -4021,7 +4044,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = ` } /> - +
- @@ -4058,7 +4082,7 @@ exports[`Storyshots Components/Elements/Table Table Airtable Dashboard 1`] = ` > Status - +
- - +
- @@ -4909,7 +4936,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = ` } /> - +
- @@ -4963,7 +4991,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = ` } /> - +
- @@ -5000,7 +5029,7 @@ exports[`Storyshots Components/Elements/Table Table Border 1`] = ` > Status - +
- - +
- @@ -5850,7 +5882,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = ` } /> - +
- @@ -5904,7 +5937,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = ` } /> - +
- @@ -5941,7 +5975,7 @@ exports[`Storyshots Components/Elements/Table Table Border All 1`] = ` > Status - +
- - +
- @@ -6794,7 +6831,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = ` } /> - +
- @@ -6848,7 +6886,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = ` } /> - +
- @@ -6885,7 +6924,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries 1`] = ` > Status - +
- - +
- @@ -7739,7 +7781,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1` } /> - +
- @@ -7793,7 +7836,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1` } /> - +
- @@ -7830,7 +7874,7 @@ exports[`Storyshots Components/Elements/Table Table Dashboard Countries Modal 1` > Status - +
- - +
- @@ -8684,7 +8731,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = ` } /> - +
- @@ -8738,7 +8786,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = ` } /> - +
- @@ -8775,7 +8824,7 @@ exports[`Storyshots Components/Elements/Table Table Organization 1`] = ` > Status - +
- - +
- @@ -9572,12 +9623,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = ` > Funding type - +
- @@ -9626,12 +9678,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = ` } /> - +
- @@ -9680,12 +9733,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = ` } /> - +
- @@ -9717,12 +9771,12 @@ exports[`Storyshots Components/Elements/Table Table Site Polygon 1`] = ` > Status - +
- - +
- @@ -10570,7 +10627,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = ` } /> - +
- @@ -10624,7 +10682,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = ` } /> - +
- @@ -10661,7 +10720,7 @@ exports[`Storyshots Components/Elements/Table Table Version 1`] = ` > Status - +
- - +