Testing Session UI/UX fixes (#333)

* improve login callback layout

* WG-441: fix public link overflow

* WG-457: fix close icon; refactor questionnaire modal to antd

* WG-457: fix close icon; refactor delete map modal to antd

* WG-445: filter panel tooltip; refactor datepicker to antd

* no longer re-render map on filter change

* WG-443: add more bottom margin to show leaflet zoom when asset detail open

* fix tests

* remove react-datepicker

react/package.json

@@ -54,7 +54,6 @@
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
     "react": "^18.3.1",
-    "react-datepicker": "^7.6.0",
     "react-dom": "^18.3.1",
     "react-esri-leaflet": "^2.0.1",
     "react-hook-form": "^7.54.2",

react/src/components/DeleteMapModal/DeleteMapModal.test.tsx

@@ -91,13 +91,17 @@ describe('DeleteMapModal', () => {
 
     it('should disable delete button for non-deletable projects', async () => {
       await renderComponent(nonDeletableProjectMock);
-      const deleteButton = screen.getByText('Delete') as HTMLButtonElement;
+      const deleteButton = screen.getByTestId(
+        'delete-map-button'
+      ) as HTMLButtonElement;
       expect(deleteButton.disabled).toBe(true);
     });
 
     it('should enable delete button for deletable projects', async () => {
       await renderComponent();
-      const deleteButton = screen.getByText('Delete') as HTMLButtonElement;
+      const deleteButton = screen.getByTestId(
+        'delete-map-button'
+      ) as HTMLButtonElement;
       expect(deleteButton.disabled).toBe(false);
     });
 

react/src/components/DeleteMapModal/DeleteMapModal.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button, SectionMessage } from '@tacc/core-components';
+import { Modal, Layout, Flex, Alert } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { Project } from '@hazmapper/types';
 import { useDeleteProject } from '@hazmapper/hooks/projects/';
@@ -26,6 +25,9 @@ const DeleteMapModal = ({
     isError,
     isSuccess,
   } = useDeleteProject();
+
+  const { Header } = Layout;
+
   const handleClose = () => {
     parentToggle();
   };
@@ -46,45 +48,56 @@ const DeleteMapModal = ({
   };
 
   return (
-    <Modal size="lg" isOpen={isOpen} toggle={handleClose}>
-      <ModalHeader toggle={handleClose}>
-        Delete Map: {project?.name}{' '}
-      </ModalHeader>
-      <ModalBody>
+    <Modal
+      open={isOpen}
+      onCancel={handleClose}
+      title={<Header>Delete Map: {project?.name}</Header>}
+      onOk={handleDeleteProject}
+      okText="Delete"
+      cancelText={isSuccess ? 'Close' : 'Cancel'}
+      okButtonProps={{
+        loading: isDeletingProject,
+        disabled: isSuccess || !project?.deletable,
+        'data-testid': 'delete-map-button',
+      }}
+    >
+      <Flex vertical style={{ paddingBottom: 20 }}>
         {project?.deletable ? (
-          <>
-            Are you sure you want to delete this map? All associated features,
-            metadata, and saved files will be deleted.
-            {project?.public && <b> Note that this is a public map. </b>}
-            <br />
-            <b>
-              <u>This cannot be undone.</u>
-            </b>
-          </>
+          <Alert
+            type="warning"
+            message={
+              <span>
+                Are you sure you want to delete this map? All associated
+                features, metadata, and saved files will be deleted.
+                <br />
+                <br />
+                {project?.public && (
+                  <b>
+                    {' '}
+                    Note that this is a public map.
+                    <br />
+                    <br />
+                  </b>
+                )}
+                <b>
+                  <u>This cannot be undone.</u>
+                </b>
+              </span>
+            }
+          />
         ) : (
-          'You don’t have permission to delete this map.'
+          "You don't have permission to delete this map."
         )}
-      </ModalBody>
-      <ModalFooter className="justify-content-start">
-        <Button size="short" type="secondary" onClick={handleClose}>
-          {isSuccess ? 'Close' : 'Cancel'}
-        </Button>
-        <Button
-          size="short"
-          type="primary"
-          attr="submit"
-          isLoading={isDeletingProject}
-          onClick={handleDeleteProject}
-          disabled={isSuccess || !project?.deletable}
-        >
-          Delete
-        </Button>
+
         {isError && (
-          <SectionMessage type="error">
-            {'There was an error deleting your map.'}
-          </SectionMessage>
+          <Flex justify="center" align="center" style={{ paddingTop: 20 }}>
+            <Alert
+              type="error"
+              message="There was an error deleting your map."
+            />
+          </Flex>
         )}
-      </ModalFooter>
+      </Flex>
     </Modal>
   );
 };

react/src/components/FiltersPanel/Filter.tsx

@@ -1,25 +1,21 @@
 import React from 'react';
 import styles from './Filters.module.css';
-import DatePicker from 'react-datepicker';
-import { Button, Flex } from 'antd';
-import 'react-datepicker/dist/react-datepicker.css';
+import { DatePicker } from 'antd';
+import { Button, Flex, Tooltip } from 'antd';
+import type { Dayjs } from 'dayjs';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 
 interface FiltersProps {
   selectedAssetTypes: string[];
   onFiltersChange: (selectedAssetTypes: string[]) => void;
-  startDate: Date;
-  setStartDate: (date: Date) => void;
-  endDate: Date;
-  setEndDate: (date: Date) => void;
+  startDate: Dayjs;
+  setStartDate: (date: Dayjs) => void;
+  endDate: Dayjs;
+  setEndDate: (date: Dayjs) => void;
   toggleDateFilter: boolean;
   setToggleDateFilter: (toggleDateFilter: boolean) => void;
 }
 
-interface CustomInputProps {
-  value?: string;
-  onClick?: () => void;
-}
-
 export const assetTypeOptions = {
   Image: 'Image',
   Video: 'Video',
@@ -47,56 +43,38 @@ const Filters: React.FC<FiltersProps> = ({
     }
   };
 
-  const CustomInputWithTooltip = React.forwardRef<
-    HTMLInputElement,
-    CustomInputProps
-  >(({ value, onClick }, ref) => (
-    <div className={styles.customInputContainer}>
-      <input
-        className={styles.customInput}
-        value={value}
-        onClick={onClick}
-        ref={ref}
-        readOnly
-      />
-      <span
-        className={styles.tooltip}
-        title="Choose the date(s) corresponding to when the data collection occurred in the field, not when the data was uploaded to the map project."
-      >
-        ?
-      </span>
-    </div>
-  ));
-
-  CustomInputWithTooltip.displayName = 'CustomInputWithTooltip';
-
   return (
     <Flex vertical className={styles.root}>
       {toggleDateFilter ? (
         <>
           <Button onClick={() => setToggleDateFilter(false)}>
             Disable Date Range Filter
           </Button>
-          <h2>Date Range</h2>
-          <h5>Start Date</h5>
-          <DatePicker
-            selected={startDate}
-            onChange={(date: Date | null) => setStartDate(date as Date)}
-            selectsStart
-            startDate={startDate}
-            endDate={endDate}
-            customInput={<CustomInputWithTooltip />}
-          />
-          <h5>End Date</h5>
-          <DatePicker
-            selected={endDate}
-            onChange={(date: Date | null) => setEndDate(date as Date)}
-            selectsEnd
-            startDate={startDate}
-            endDate={endDate}
-            minDate={startDate}
-            customInput={<CustomInputWithTooltip />}
-          />
+          <Flex vertical>
+            <h2>
+              <Flex align="center" justify="space-between">
+                Date Range
+                <Tooltip
+                  title="Choose the date(s) corresponding to when the data collection occurred in the field, not when the data was uploaded to the map project."
+                  placement="right"
+                >
+                  <Button type="link" icon={<QuestionCircleOutlined />} />
+                </Tooltip>
+              </Flex>
+            </h2>
+            <h5>Start Date</h5>
+            <DatePicker
+              defaultValue={startDate}
+              onChange={setStartDate}
+              allowClear={false}
+            />
+            <h5>End Date</h5>
+            <DatePicker
+              defaultValue={endDate}
+              onChange={setEndDate}
+              allowClear={false}
+            />
+          </Flex>
         </>
       ) : (
         <Button type="primary" onClick={() => setToggleDateFilter(true)}>

react/src/components/ManageMapProjectPanel/PublicTabContent.tsx

@@ -20,10 +20,10 @@ const PublicTabContent: React.FC<PublicTabProps> = ({
   };
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const publicPath = window.location.href.replace(
+  const publicPath = `${window.location.origin}${window.location.pathname.replace(
     '/project/',
     '/project-public/'
-  );
+  )}`;
 
   const { Paragraph } = Typography;
   return (
@@ -47,7 +47,11 @@ const PublicTabContent: React.FC<PublicTabProps> = ({
             >
               <Button
                 type="link"
-                style={{ textWrap: 'wrap', textAlign: 'justify' }}
+                style={{
+                  textWrap: 'wrap',
+                  textAlign: 'justify',
+                  display: 'contents',
+                }}
                 href={`${publicPath}`}
                 target="_blank"
                 rel="noreferrer"