DEX-922 implement stickyHeader and add a meaningful maxHeight to ever… (

#430) * DEX-922 implement stickyHeader and add a meaningful maxHeight to every DataDisplay. Also add horizontalScroll * DEX-922 remove seemingly unnecessary horizontal scroll prop * DEX-922 respond to code review feedback. Remove default maxHeight for Card component and replaced with optional styles, which was then implemented for ImageCard and StatusCard. Remove maxHeight from Card in relationshipCard, remove unused paperStyles from DataDisplay. * DEX-922 respond to code review feedback pt 2 * DEX-922 add tableContainerStyles to DataDisplay and remove maxHeight * DEX-922 remove tableContainerStyles from SightingsDisplay and fix a few little things * DEX-922 final little fixes
WildMeOrg · Jul 25, 2022 · e7dd5af · e7dd5af
1 parent b691776
commit e7dd5af
Show file tree

Hide file tree

Showing 20 changed files with 82 additions and 51 deletions.
diff --git a/src/components/IndividualSelector.jsx b/src/components/IndividualSelector.jsx
@@ -123,7 +123,7 @@ export default function IndividualSelector({
       {canShowTable && (
         <DataDisplay
           idKey="guid"
-          paperStyles={{ maxHeight: 360 }}
+          tableContainerStyles={{ maxHeight: 360 }}
           style={{ marginTop: 12 }}
           noTitleBar
           variant="secondary"

diff --git a/src/components/cards/Card.jsx b/src/components/cards/Card.jsx
@@ -7,7 +7,6 @@ export default function Card({
   title,
   titleId,
   htmlId = null,
-  maxHeight = 360,
   overflow = 'auto',
   overflowX = 'auto',
   renderActions,
@@ -35,9 +34,7 @@ export default function Card({
           </Text>
           {renderActions}
         </div>
-        <div style={{ overflow, maxHeight, overflowX }}>
-          {children}
-        </div>
+        <div style={{ overflow, overflowX }}>{children}</div>
       </Paper>
     </Grid>
   );

diff --git a/src/components/cards/CollaborationsCard.jsx b/src/components/cards/CollaborationsCard.jsx
@@ -15,18 +15,22 @@ export default function CollaborationsCard({
   htmlId = null,
 }) {
   const intl = useIntl();
-  const [activeCollaboration, setActiveCollaboration] =
-    useState(null);
+  const [activeCollaboration, setActiveCollaboration] = useState(
+    null,
+  );
   const [
     collabDialogButtonClickLoading,
     setCollabDialogButtonClickLoading,
   ] = useState(false);
 
   const { data, loading } = useGetMe();
 
-  useEffect(() => {
-    setCollabDialogButtonClickLoading(false);
-  }, [data]);
+  useEffect(
+    () => {
+      setCollabDialogButtonClickLoading(false);
+    },
+    [data],
+  );
 
   const collaborations = get(data, ['collaborations'], []);
   const tableData = collaborations.map(collaboration => {
@@ -139,6 +143,7 @@ export default function CollaborationsCard({
         columns={columns}
         data={tableData}
         idKey="guid"
+        tableContainerStyles={{ maxHeight: 600 }}
       />
     </Card>
   );

diff --git a/src/components/cards/CooccurrenceCard.jsx b/src/components/cards/CooccurrenceCard.jsx
@@ -34,6 +34,7 @@ export default function CooccurrenceCard({
           },
         ]}
         data={data}
+        tableContainerStyles={{ maxHeight: 600 }}
       />
     </Card>
   );

diff --git a/src/components/cards/EncountersCard.jsx b/src/components/cards/EncountersCard.jsx
@@ -34,20 +34,23 @@ export default function EncountersCard({
   const mapModeClicked = () => setShowMapView(true);
   const listModeClicked = () => setShowMapView(false);
 
-  const encountersWithLocationData = useMemo(() => {
-    // hotfix //
-    if (!encounters) return [];
-    // hotfix //
+  const encountersWithLocationData = useMemo(
+    () => {
+      // hotfix //
+      if (!encounters) return [];
+      // hotfix //
 
-    return encounters.map(encounter => ({
-      ...encounter,
-      formattedLocation: formatLocationFromSighting(
-        encounter,
-        regionOptions,
-        intl,
-      ),
-    }));
-  }, [get(encounters, 'length')]);
+      return encounters.map(encounter => ({
+        ...encounter,
+        formattedLocation: formatLocationFromSighting(
+          encounter,
+          regionOptions,
+          intl,
+        ),
+      }));
+    },
+    [get(encounters, 'length')],
+  );
 
   const tooFewEncounters = encounters.length <= 1;
 
@@ -162,6 +165,7 @@ export default function EncountersCard({
           columns={filteredColumns}
           data={encountersWithLocationData}
           tableStyles={{ tableLayout: 'fixed' }}
+          tableContainerStyles={{ maxHeight: 600 }}
         />
       )}
       {!noEncounters && showMapView && <div>Map goes here</div>}

diff --git a/src/components/cards/RelationshipsCard.jsx b/src/components/cards/RelationshipsCard.jsx
@@ -341,7 +341,7 @@ export default function RelationshipsCard({
         </div>
       </DialogActions>
     </StandardDialog>,
-    <Card title={title} titleId={titleId} maxHeight={600}>
+    <Card title={title} titleId={titleId}>
       {/* // renderActions={
       //   <div>
       //     <IconButton

diff --git a/src/components/cards/SightingsCard.jsx b/src/components/cards/SightingsCard.jsx
@@ -33,20 +33,23 @@ export default function SightingsCard({
   const mapModeClicked = () => setShowMapView(true);
   const listModeClicked = () => setShowMapView(false);
 
-  const sightingsWithLocationData = useMemo(() => {
-    // hotfix //
-    if (!sightings) return [];
-    // hotfix //
+  const sightingsWithLocationData = useMemo(
+    () => {
+      // hotfix //
+      if (!sightings) return [];
+      // hotfix //
 
-    return sightings.map(sighting => ({
-      ...sighting,
-      formattedLocation: formatLocationFromSighting(
-        sighting,
-        regionOptions,
-        intl,
-      ),
-    }));
-  }, [get(sightings, 'length')]);
+      return sightings.map(sighting => ({
+        ...sighting,
+        formattedLocation: formatLocationFromSighting(
+          sighting,
+          regionOptions,
+          intl,
+        ),
+      }));
+    },
+    [get(sightings, 'length')],
+  );
 
   const allColumns = [
     {
@@ -149,6 +152,7 @@ export default function SightingsCard({
           data={sightings}
           loading={loading}
           noResultsTextId={noSightingsMsg}
+          tableContainerStyles={{ maxHeight: 400 }}
         />
       )}
       {!noSightings && showMapView && (

diff --git a/src/components/dataDisplays/DataDisplay.jsx b/src/components/dataDisplays/DataDisplay.jsx
@@ -61,9 +61,10 @@ export default function DataDisplay({
   sortExternally,
   searchParams,
   setSearchParams,
-  paperStyles = {},
   tableStyles = {},
   cellStyles = {},
+  stickyHeader = true,
+  tableContainerStyles = {},
   ...rest
 }) {
   const intl = useIntl();
@@ -80,8 +81,9 @@ export default function DataDisplay({
   );
   const [filter, setFilter] = useState('');
   const [internalSortColumn, setInternalSortColumn] = useState(null);
-  const [internalSortDirection, setInternalSortDirection] =
-    useState(null);
+  const [internalSortDirection, setInternalSortDirection] = useState(
+    null,
+  );
   const [anchorEl, setAnchorEl] = useState(null);
   const filterPopperOpen = Boolean(anchorEl);
 
@@ -258,9 +260,10 @@ export default function DataDisplay({
       <TableContainer
         component={variant === 'secondary' ? Paper : undefined}
         elevation={variant === 'secondary' ? 2 : undefined}
-        style={paperStyles}
+        style={tableContainerStyles}
       >
         <Table
+          stickyHeader={stickyHeader}
           style={{ minWidth: 10, ...tableStyles }}
           size={tableSize}
           aria-label={title}

diff --git a/src/components/dataDisplays/RelationshipDisplay.jsx b/src/components/dataDisplays/RelationshipDisplay.jsx
@@ -47,6 +47,7 @@ export default function RelationshipDisplay({
       columns={relationshipCols}
       data={data}
       loading={loading}
+      tableContainerStyles={{ maxHeight: 400 }}
     />
   );
 }
diff --git a/src/pages/assetGroup/AGSTable.jsx b/src/pages/assetGroup/AGSTable.jsx
@@ -73,6 +73,7 @@ export default function AGSTable({ assetGroupSightings }) {
       data={transformedData}
       columns={columns}
       style={{ marginTop: 20 }}
+      tableContainerStyles={{ maxHeight: 600 }}
     />
   );
 }
diff --git a/src/pages/fieldManagement/settings/CategoryTable.jsx b/src/pages/fieldManagement/settings/CategoryTable.jsx
@@ -291,6 +291,7 @@ export default function FieldSettings() {
         variant="secondary"
         columns={categoryColumns}
         data={categories}
+        tableContainerStyles={{ maxHeight: 300 }}
       />
     </Grid>
   );

diff --git a/src/pages/fieldManagement/settings/CustomFieldTable.jsx b/src/pages/fieldManagement/settings/CustomFieldTable.jsx
@@ -47,8 +47,9 @@ export default function CustomFieldTable({
   const intl = useIntl();
   const [deleteField, setDeleteField] = useState(null);
   const [previewField, setPreviewField] = useState(null);
-  const [previewInitialValue, setPreviewInitialValue] =
-    useState(null);
+  const [previewInitialValue, setPreviewInitialValue] = useState(
+    null,
+  );
   const {
     removeCustomField,
     needsForce,
@@ -101,7 +102,9 @@ export default function CustomFieldTable({
               />
               <ActionIcon
                 variant="edit"
-                href={`/admin/fields/save-custom-field/${fieldTypeName}/${field.id}`}
+                href={`/admin/fields/save-custom-field/${fieldTypeName}/${
+                  field.id
+                }`}
               />
               <ActionIcon
                 variant="delete"
@@ -162,7 +165,9 @@ export default function CustomFieldTable({
         <Text variant="h5" component="h5" id={titleId} />
         <Tooltip
           placement="bottom-end"
-          title={intl.formatMessage({ id: addButtonTooltipId })}
+          title={intl.formatMessage({
+            id: addButtonTooltipId,
+          })}
         >
           <span>
             <ButtonLink
@@ -188,6 +193,7 @@ export default function CustomFieldTable({
         columns={tableColumns}
         data={fieldSchemas}
         noResultsTextId={noFieldsTextId}
+        tableContainerStyles={{ maxHeight: 300 }}
       />
     </Grid>
   );

diff --git a/src/pages/fieldManagement/settings/DefaultFieldTable.jsx b/src/pages/fieldManagement/settings/DefaultFieldTable.jsx
@@ -198,6 +198,7 @@ export default function DefaultFieldTable({
         variant="secondary"
         columns={tableColumns}
         data={configurableFields}
+        tableContainerStyles={{ maxHeight: 300 }}
       />
     </Grid>
   );

diff --git a/src/pages/fieldManagement/settings/defaultFieldComponents/SpeciesEditor.jsx b/src/pages/fieldManagement/settings/defaultFieldComponents/SpeciesEditor.jsx
@@ -167,13 +167,13 @@ export default function SpeciesEditor({
         )}
         <DataDisplay
           cellStyles={{ padding: '0 8px 0 12px' }}
-          paperStyles={{ maxHeight: 360 }}
           style={{ marginTop: 12 }}
           noTitleBar
           variant="secondary"
           columns={tableColumns}
           data={searchResults || suggestedValues}
           idKey="itisTsn"
+          tableContainerStyles={{ maxHeight: 300 }}
         />
         <Text
           component="p"

diff --git a/src/pages/match/ImageCard.jsx b/src/pages/match/ImageCard.jsx
@@ -40,7 +40,7 @@ export default function ImageCard({ titleId, annotation }) {
   );
 
   return (
-    <Card titleId={titleId} maxHeight="unset">
+    <Card titleId={titleId}>
       <AnnotatedPhotograph
         assetMetadata={{
           alt: 'Selected query annotation',

diff --git a/src/pages/match/MatchCandidatesTable.jsx b/src/pages/match/MatchCandidatesTable.jsx
@@ -59,8 +59,9 @@ export default function MatchCandidatesTable({
     <DataDisplay
       idKey="guid"
       titleId="CANDIDATE_ANNOTATIONS"
-      data={matchCandidates} // variant="secondary"
+      data={matchCandidates}
       columns={columns}
+      // variant="secondary"
       noResultsTextId="NO_MATCH_CANDIDATES"
       hideDownloadCsv
       hideFilterColumns
@@ -71,6 +72,7 @@ export default function MatchCandidatesTable({
           setSelectedMatchCandidate(nextSelection);
         }
       }}
+      tableContainerStyles={{ maxHeight: 300 }}
     />
   );
 }
diff --git a/src/pages/match/QueryAnnotationsTable.jsx b/src/pages/match/QueryAnnotationsTable.jsx
@@ -55,6 +55,7 @@ export default function QueryAnnotationsTable({
           setSelectedQueryAnnotation(nextSelection);
         }
       }}
+      tableContainerStyles={{ maxHeight: 300 }}
     />
   );
 }
diff --git a/src/pages/sighting/statusCard/StatusCard.jsx b/src/pages/sighting/statusCard/StatusCard.jsx
@@ -170,7 +170,7 @@ export default function StatusCard({ sightingData }) {
   }
 
   return (
-    <Card titleId="IDENTIFICATION_PIPELINE_STATUS" maxHeight={900}>
+    <Card titleId="IDENTIFICATION_PIPELINE_STATUS">
       <Timeline>
         <TimelineStep
           Icon={ReportIcon}

diff --git a/src/pages/userManagement/UserEditTable.jsx b/src/pages/userManagement/UserEditTable.jsx
@@ -116,6 +116,7 @@ export default function UserEditTable() {
         columns={tableColumns}
         data={activeUsers}
         loading={loading}
+        tableContainerStyles={{ maxHeight: 500 }}
       />
       {usersError ? (
         <Text

diff --git a/src/pages/userManagement/UserManagerCollaborationEditTable.jsx b/src/pages/userManagement/UserManagerCollaborationEditTable.jsx
@@ -20,8 +20,10 @@ export default function UserManagersCollaborationEditTable({
 }) {
   const intl = useIntl();
 
-  const { data: currentUserData, loading: userDataLoading } =
-    useGetMe();
+  const {
+    data: currentUserData,
+    loading: userDataLoading,
+  } = useGetMe();
 
   const {
     mutate: revokeCollab,
@@ -199,6 +201,7 @@ export default function UserManagersCollaborationEditTable({
         columns={tableColumns}
         data={tableFriendlyData || []}
         noResultsTextId="NO_COLLABORATIONS_MESSAGE"
+        tableContainerStyles={{ maxHeight: 500 }}
       />
       {collaborationError ? (
         <Text
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ export default function CooccurrenceCard({ @@
               },
             ]}
             data={data}
+            tableContainerStyles={{ maxHeight: 600 }}
           />
         </Card>
       );
@@ Expand Down @@