Merge pull request #2185 from hackforla/2184-validation-and-tooltip-f…

…or-Twitter-contact-detail-field Added Twitter Validation and Tool tip #2184
hackforla · Aug 12, 2024 · 63fac60 · 63fac60
2 parents 1a1305d + b7f5fa5
commit 63fac60
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 19 deletions.
diff --git a/client/src/components/Admin/OrganizationEdit.js b/client/src/components/Admin/OrganizationEdit.js
@@ -51,6 +51,12 @@ const validationSchema = Yup.object().shape({
   longitude: Yup.number().required("Longitude is required").min(-180).max(180),
   email: Yup.string().email("Invalid email address format"),
   hours: Yup.array().of(HourSchema),
+  twitter: Yup.string()
+    .matches(
+      /^https?:\/\/(www\.)?(twitter\.com|x\.com)\/.*/,
+      "Invalid URL, e.g. 'https://twitter.com/ or https://x.com/'"
+    )
+    .required("Full Twitter/X URL is required."),
   selectedCategoryIds: Yup.array().min(
     1,
     "You must select at least one category"

diff --git a/client/src/components/Admin/OrganizationEdit/ContactDetails.js b/client/src/components/Admin/OrganizationEdit/ContactDetails.js
@@ -64,7 +64,13 @@ export default function ContactDetails({
         </Grid>
         <Grid item sm={6} xs={12}>
           <div>
-            <Label id="twitter" label="Twitter" />
+            <Label
+              id="twitter"
+              label="Twitter"
+              tooltipTitle="URL must start with 'https://twitter.com/ or https://x.com/'"
+              href={values.twitter}
+            />
+
             <TextField
               id="twitter"
               name="twitter"

diff --git a/client/src/components/Admin/ui/Label.js b/client/src/components/Admin/ui/Label.js
@@ -1,16 +1,19 @@
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import LaunchIcon from "@mui/icons-material/Launch";
 import {
   ClickAwayListener,
   IconButton,
   InputLabel,
   Stack,
   Tooltip,
   Typography,
+  Button,
+  Link,
 } from "@mui/material";
 import { useState } from "react";
 import { tooltipHover } from "theme/palette";
 
-const Label = ({ id, label, tooltipTitle }) => {
+const Label = ({ id, label, tooltipTitle, href }) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
   const handleToolTipToggle = () => {
@@ -19,24 +22,46 @@ const Label = ({ id, label, tooltipTitle }) => {
 
   return (
     <InputLabel htmlFor={id}>
-      <Stack direction="row" alignItems="center" height="40px">
-        <Typography fontWeight={600}>{label}</Typography>
-        {tooltipTitle && (
-          <ClickAwayListener onClickAway={() => setTooltipOpen(false)}>
-            <Tooltip
-              title={tooltipTitle}
-              open={tooltipOpen}
-              arrow
-              placement="top-start"
-            >
-              <IconButton
-                sx={{ "&:hover": { backgroundColor: tooltipHover } }}
-                onClick={() => handleToolTipToggle()}
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        height="40px"
+        justifyContent="space-between"
+      >
+        <Stack direction="row" alignItems="center">
+          <Typography fontWeight={600}>{label}</Typography>
+          {tooltipTitle && (
+            <ClickAwayListener onClickAway={() => setTooltipOpen(false)}>
+              <Tooltip
+                title={tooltipTitle}
+                open={tooltipOpen}
+                arrow
+                placement="top-start"
               >
-                <InfoOutlinedIcon />
-              </IconButton>
-            </Tooltip>
-          </ClickAwayListener>
+                <IconButton
+                  sx={{ "&:hover": { backgroundColor: tooltipHover } }}
+                  onClick={() => handleToolTipToggle()}
+                >
+                  <InfoOutlinedIcon />
+                </IconButton>
+              </Tooltip>
+            </ClickAwayListener>
+          )}
+        </Stack>
+
+        {href && (
+          <Button
+            variant="text"
+            size="small"
+            sx={{ textTransform: "none" }}
+            rel="noopener"
+            component={Link}
+            href={href}
+            startIcon={<LaunchIcon />}
+          >
+            Go To Link
+          </Button>
         )}
       </Stack>
     </InputLabel>