From a91013ab16bd5a1b761beeb4462aaba5eb4f10e1 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Wed, 27 Apr 2022 17:15:56 +0100
Subject: [PATCH] Legacy polls notice (#141)

* Add notice for legacy polls

* Update badges
---
 components/poll/manage-poll.tsx    | 32 ++++++----
 components/poll/poll-subheader.tsx | 97 +++++++++++++++++-------------
 components/tooltip.tsx             |  3 +
 3 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/components/poll/manage-poll.tsx b/components/poll/manage-poll.tsx
index 388789810..14ab4c96b 100644
--- a/components/poll/manage-poll.tsx
+++ b/components/poll/manage-poll.tsx
@@ -29,6 +29,20 @@ const ManagePoll: React.VoidFunctionComponent<{
 
   const modalContext = useModalContext();
 
+  const handleChangeOptions = () => {
+    if (poll.legacy) {
+      modalContext.render({
+        overlayClosable: true,
+        title: "Sorry!",
+        description:
+          "This poll was created with an older version of Rallly and does not support this feature.",
+        cancelText: "Close",
+      });
+    } else {
+      openChangeOptionsModal();
+    }
+  };
+
   const { mutate: updatePollMutation, isLoading: isUpdating } =
     useUpdatePollMutation();
   const [
@@ -61,11 +75,7 @@ const ManagePoll: React.VoidFunctionComponent<{
                   }
                 : {
                     type: "date",
-                    date:
-                      start.indexOf("T") === -1
-                        ? start
-                        : // legacy polls
-                          new Date(start).toISOString().substring(0, 10),
+                    date: start,
                   };
             }),
             timeZone: poll.timeZone ?? "",
@@ -166,13 +176,11 @@ const ManagePoll: React.VoidFunctionComponent<{
           label="Edit details"
           onClick={openChangePollDetailsModa}
         />
-        {!poll.legacy ? (
-          <DropdownItem
-            icon={Table}
-            label="Edit options"
-            onClick={openChangeOptionsModal}
-          />
-        ) : null}
+        <DropdownItem
+          icon={Table}
+          label="Edit options"
+          onClick={handleChangeOptions}
+        />
         <DropdownItem
           icon={Save}
           label="Export to CSV"
diff --git a/components/poll/poll-subheader.tsx b/components/poll/poll-subheader.tsx
index 6ef057bff..3cf7d3f25 100644
--- a/components/poll/poll-subheader.tsx
+++ b/components/poll/poll-subheader.tsx
@@ -8,6 +8,7 @@ import Button from "../button";
 import { usePoll } from "../poll-context";
 import Popover from "../popover";
 import { usePreferences } from "../preferences/use-preferences";
+import Tooltip from "../tooltip";
 
 export interface PollSubheaderProps {}
 
@@ -36,48 +37,62 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
           }}
         />
         &nbsp;
-        {poll.role === "admin" ? (
-          poll.verified ? (
-            <span className="inline-block cursor-default rounded-lg border border-green-400 bg-green-50 px-1 text-sm text-green-500">
-              Verified
-            </span>
-          ) : (
-            <Popover
-              trigger={
-                <button className="inline-block rounded-lg border px-2 text-sm text-slate-400 transition-colors hover:bg-white hover:text-slate-700 hover:shadow-sm active:bg-gray-100">
-                  Unverified
-                </button>
-              }
-            >
-              <div className="max-w-sm">
-                <div className="mb-4">
-                  <Trans
-                    t={t}
-                    i18nKey="unverifiedMessage"
-                    values={{ email: poll.user.email }}
-                    components={{
-                      b: (
-                        <span className="whitespace-nowrap font-mono font-medium text-indigo-500" />
-                      ),
-                    }}
-                  />
+        <span className="inline-flex space-x-1">
+          {poll.role === "admin" ? (
+            poll.verified ? (
+              <span className="inline-flex h-5 cursor-default items-center rounded-md bg-green-100/50 px-1 text-xs text-green-500 transition-colors">
+                Verified
+              </span>
+            ) : (
+              <Popover
+                trigger={
+                  <button className="inline-flex h-5 items-center rounded-md bg-slate-200 px-1 text-xs text-slate-500 transition-colors hover:bg-slate-300 hover:shadow-sm active:bg-slate-200">
+                    Unverified
+                  </button>
+                }
+              >
+                <div className="max-w-sm">
+                  <div className="mb-4">
+                    <Trans
+                      t={t}
+                      i18nKey="unverifiedMessage"
+                      values={{ email: poll.user.email }}
+                      components={{
+                        b: (
+                          <span className="whitespace-nowrap font-mono font-medium text-indigo-500" />
+                        ),
+                      }}
+                    />
+                  </div>
+                  {didSendVerificationEmail ? (
+                    <div className="text-green-500">
+                      Verification email sent.
+                    </div>
+                  ) : (
+                    <Button
+                      onClick={() => {
+                        sendVerificationEmail();
+                      }}
+                      loading={isSendingVerificationEmail}
+                    >
+                      Resend verification email
+                    </Button>
+                  )}
                 </div>
-                {didSendVerificationEmail ? (
-                  <div className="text-green-500">Verification email sent.</div>
-                ) : (
-                  <Button
-                    onClick={() => {
-                      sendVerificationEmail();
-                    }}
-                    loading={isSendingVerificationEmail}
-                  >
-                    Resend verification email
-                  </Button>
-                )}
-              </div>
-            </Popover>
-          )
-        ) : null}
+              </Popover>
+            )
+          ) : null}
+          {poll.legacy && poll.role === "admin" ? (
+            <Tooltip
+              width={400}
+              content="This poll was created with an older version of Rallly. Some features might not work."
+            >
+              <span className="inline-flex h-5 cursor-default items-center rounded-md bg-amber-100 px-1 text-xs text-amber-500">
+                Legacy
+              </span>
+            </Tooltip>
+          ) : null}
+        </span>
       </div>
       <span className="hidden md:inline">&nbsp;&bull;&nbsp;</span>
       <span className="whitespace-nowrap">
diff --git a/components/tooltip.tsx b/components/tooltip.tsx
index fa75cedb9..8dbd6f6aa 100644
--- a/components/tooltip.tsx
+++ b/components/tooltip.tsx
@@ -21,6 +21,7 @@ export interface TooltipProps {
   content?: React.ReactNode;
   disabled?: boolean;
   className?: string;
+  width?: number;
 }
 
 const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
@@ -29,6 +30,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
   children,
   disabled,
   content,
+  width,
 }) => {
   const arrowRef = React.useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = React.useState(false);
@@ -109,6 +111,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
                   position: strategy,
                   top: y ?? "",
                   left: x ?? "",
+                  maxWidth: width,
                 },
               })}
             >