From ababdd7752bf07d8559e0c27dc6e23ddeecb1ac2 Mon Sep 17 00:00:00 2001
From: Guy McAuliffe <38873380+gmcauliffe@users.noreply.github.com>
Date: Thu, 9 Nov 2023 11:45:10 -0800
Subject: [PATCH] FW-1818, FW-3934 list view for join requests and admin
 approve and ignore (#187)

* remove padding from DashboardTable

* Add reusable infiniteScroll hook

* Use infiniteScroll hook in useJoinRequests

* Increase max char for join message

* FW-1818 Dashboard JoinRequests List

* Add JoinRequest list to Dashboard homepage

* Rename DashboardJoinRequests to List

* Approve/Ignore mvp with button and select

* Styling and copy adjustments

* Add auth check to Join Requests list

* Adjustments for smaller screens and styling tweaks

* Sonar fix
---
 src/common/dataHooks/useInfiniteScroll.js     |  60 +++++++
 src/common/dataHooks/useJoinRequests.js       |  26 ++-
 .../DashboardHomePresentation.js              |  80 +++++++--
 .../DashboardJoinCardContainer.js             |  25 +++
 .../DashboardJoinCardData.js                  |  21 +++
 .../DashboardJoinCardPresentation.js          | 153 ++++++++++++++++++
 src/components/DashboardJoinCard/index.js     |   9 ++
 .../DashboardJoinListContainer.js             |  23 +++
 .../DashboardJoinListData.js                  |  23 +++
 .../DashboardJoinListPresentation.js          |  79 +++++++++
 src/components/DashboardJoinList/index.js     |   9 ++
 .../DashboardLandingPresentation.js           |   2 +-
 .../DashboardTablePresentation.js             |   4 +-
 src/components/Join/JoinForm.js               |   2 +-
 14 files changed, 487 insertions(+), 29 deletions(-)
 create mode 100644 src/common/dataHooks/useInfiniteScroll.js
 create mode 100644 src/components/DashboardJoinCard/DashboardJoinCardContainer.js
 create mode 100644 src/components/DashboardJoinCard/DashboardJoinCardData.js
 create mode 100644 src/components/DashboardJoinCard/DashboardJoinCardPresentation.js
 create mode 100644 src/components/DashboardJoinCard/index.js
 create mode 100644 src/components/DashboardJoinList/DashboardJoinListContainer.js
 create mode 100644 src/components/DashboardJoinList/DashboardJoinListData.js
 create mode 100644 src/components/DashboardJoinList/DashboardJoinListPresentation.js
 create mode 100644 src/components/DashboardJoinList/index.js

diff --git a/src/common/dataHooks/useInfiniteScroll.js b/src/common/dataHooks/useInfiniteScroll.js
new file mode 100644
index 00000000..cd13d84a
--- /dev/null
+++ b/src/common/dataHooks/useInfiniteScroll.js
@@ -0,0 +1,60 @@
+import { useRef } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+// FPCC
+import useIntersectionObserver from 'common/hooks/useIntersectionObserver'
+import { useSiteStore } from 'context/SiteContext'
+
+/**
+ * Calls API and provides results and infinite scroll info.
+ */
+function useInfiniteScroll({ queryKey, queryFn, resultAdaptor }) {
+  const { site } = useSiteStore()
+
+  const pagesDataAdaptor = (pages) =>
+    pages.map((page, index) => singlePageDataAdaptor(page, index))
+
+  const singlePageDataAdaptor = (page, index) => {
+    const formattedResult = page?.results?.map((result) =>
+      resultAdaptor ? resultAdaptor(result) : result,
+    )
+    return {
+      ...page,
+      pageNumber: index + 1,
+      results: formattedResult,
+    }
+  }
+
+  // Fetch search results
+  const response = useInfiniteQuery({
+    queryKey,
+    queryFn,
+    enabled: !!site?.sitename,
+    getNextPageParam: (currentPage) => currentPage.next,
+    select: (responseData) => ({
+      pages: pagesDataAdaptor(responseData.pages),
+      pageParams: responseData.pageParams,
+    }),
+  })
+
+  const infiniteScroll = {
+    fetchNextPage: response?.fetchNextPage,
+    hasNextPage: response?.hasNextPage,
+    isFetchingNextPage: response?.isFetchingNextPage,
+  }
+
+  const loadRef = useRef(null)
+  useIntersectionObserver({
+    target: loadRef,
+    onIntersect: response?.fetchNextPage,
+    enabled: response?.hasNextPage,
+  })
+
+  return {
+    ...response,
+    infiniteScroll,
+    loadRef,
+  }
+}
+
+export default useInfiniteScroll
diff --git a/src/common/dataHooks/useJoinRequests.js b/src/common/dataHooks/useJoinRequests.js
index 3c135fa0..c02e6537 100644
--- a/src/common/dataHooks/useJoinRequests.js
+++ b/src/common/dataHooks/useJoinRequests.js
@@ -1,32 +1,26 @@
-import {
-  useInfiniteQuery,
-  useMutation,
-  useQueryClient,
-} from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'react-router-dom'
 
 // FPCC
 import api from 'services/api'
 import { JOIN_REQUESTS, MEMBER } from 'common/constants'
 import useMutationWithNotification from 'common/dataHooks/useMutationWithNotification'
+import useInfiniteScroll from 'common/dataHooks/useInfiniteScroll'
+import { useSiteStore } from 'context/SiteContext'
 
 export function useJoinRequests() {
-  const { sitename } = useParams()
+  const { site } = useSiteStore()
 
-  const allJoinRequestsResponse = useInfiniteQuery(
-    [JOIN_REQUESTS, sitename],
-    ({ pageParam = 1 }) =>
+  const response = useInfiniteScroll({
+    queryKey: [JOIN_REQUESTS, site?.sitename],
+    queryFn: ({ pageParam = 1 }) =>
       api.joinRequests.getJoinRequests({
-        sitename,
+        sitename: site?.sitename,
         pageParam,
       }),
-    {
-      // The query will not execute until the sitename exists
-      enabled: !!sitename,
-    },
-  )
+  })
 
-  return allJoinRequestsResponse
+  return response
 }
 
 export function useJoinRequestCreate(options = {}) {
diff --git a/src/components/DashboardHome/DashboardHomePresentation.js b/src/components/DashboardHome/DashboardHomePresentation.js
index a62b3ef7..62ead3f3 100644
--- a/src/components/DashboardHome/DashboardHomePresentation.js
+++ b/src/components/DashboardHome/DashboardHomePresentation.js
@@ -1,21 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
 
 // FPCC
-import DashboardTiles from 'components/DashboardTiles'
+import getIcon from 'common/utils/getIcon'
+import RequireAuth from 'common/RequireAuth'
+import { LANGUAGE_ADMIN, MEMBER } from 'common/constants/roles'
 import DashboardLocator from 'components/DashboardLocator'
+import DashboardJoinList from 'components/DashboardJoinList'
 
 function DashboardHomePresentation({ site, tiles, currentUser }) {
   return (
     <main id="DashboardHome">
-      <div className="mx-auto p-4 sm:p-6 lg:p-8">
-        <h1 className="sr-only">Dashboard Landing Page</h1>
-
-        <section className="mb-6">
+      <h1 className="sr-only">Dashboard Landing Page</h1>
+      <div className="mx-auto p-4 sm:p-6 lg:p-8 space-y-8">
+        <section>
           <div className="rounded-lg bg-white overflow-hidden shadow">
-            <h2 className="sr-only" id="profile-overview-title">
-              Dashboard Overview
-            </h2>
             <div className="bg-white p-6">
               <div className="sm:flex sm:items-center sm:justify-between">
                 <div className="flex space-x-5">
@@ -41,7 +41,69 @@ function DashboardHomePresentation({ site, tiles, currentUser }) {
             </div>
           </div>
         </section>
-        <DashboardTiles.Presentation tileContent={tiles} />
+        <section>
+          <h2 className="mb-3 mx-2 text-sm font-medium text-fv-charcoal-light">
+            Quick Links
+          </h2>
+          <ul className="grid grid-cols-3 lg:grid-cols-4  gap-3">
+            {tiles.map((tile) => (
+              <RequireAuth
+                key={tile.name}
+                siteMembership={tile?.auth ? tile?.auth : MEMBER}
+              >
+                <li
+                  key={tile?.name}
+                  className="relative group col-span-1 flex rounded-lg"
+                >
+                  <div
+                    className={`bg-gray-100 text-${tile?.iconColor} flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-l-md font-medium`}
+                  >
+                    {getIcon(tile.icon, 'h-6 w-6 fill-current')}
+                  </div>
+                  <div className="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-gray-200 bg-white">
+                    <div className="flex-1 truncate p-1 ">
+                      {tile?.externalLink ? (
+                        <a
+                          href={tile?.href}
+                          className="text-sm font-medium text-fv-charcoal group-hover:text-fv-charcoal-light"
+                          target="_blank"
+                          rel="noreferrer noopener"
+                        >
+                          {/* Extend touch target to entire panel */}
+                          <span
+                            className="absolute inset-0"
+                            aria-hidden="true"
+                          />
+                          {tile?.name}
+                        </a>
+                      ) : (
+                        <Link
+                          to={tile?.href}
+                          className="text-sm font-medium text-fv-charcoal group-hover:text-fv-charcoal-light"
+                        >
+                          {/* Extend touch target to entire panel */}
+                          <span
+                            className="absolute inset-0"
+                            aria-hidden="true"
+                          />
+                          {tile?.name}
+                        </Link>
+                      )}
+                    </div>
+                  </div>
+                </li>
+              </RequireAuth>
+            ))}
+          </ul>
+        </section>
+        <RequireAuth siteMembership={LANGUAGE_ADMIN}>
+          <section className="rounded-lg overflow-hidden">
+            <h2 className="mb-3 mx-2 text-sm font-medium text-fv-charcoal-light">
+              Requests to join {site?.title}
+            </h2>
+            <DashboardJoinList.Container />
+          </section>
+        </RequireAuth>
       </div>
     </main>
   )
diff --git a/src/components/DashboardJoinCard/DashboardJoinCardContainer.js b/src/components/DashboardJoinCard/DashboardJoinCardContainer.js
new file mode 100644
index 00000000..64ee6f76
--- /dev/null
+++ b/src/components/DashboardJoinCard/DashboardJoinCardContainer.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// FPCC
+import DashboardJoinCardData from 'components/DashboardJoinCard/DashboardJoinCardData'
+import DashboardJoinCardPresentation from 'components/DashboardJoinCard/DashboardJoinCardPresentation'
+
+function DashboardJoinCardContainer({ joinRequest }) {
+  const { handleIgnore, handleApprove } = DashboardJoinCardData({ joinRequest })
+  return (
+    <DashboardJoinCardPresentation
+      joinRequest={joinRequest}
+      handleIgnore={handleIgnore}
+      handleApprove={handleApprove}
+    />
+  )
+}
+
+// PROPTYPES
+const { object } = PropTypes
+DashboardJoinCardContainer.propTypes = {
+  joinRequest: object,
+}
+
+export default DashboardJoinCardContainer
diff --git a/src/components/DashboardJoinCard/DashboardJoinCardData.js b/src/components/DashboardJoinCard/DashboardJoinCardData.js
new file mode 100644
index 00000000..c8d96708
--- /dev/null
+++ b/src/components/DashboardJoinCard/DashboardJoinCardData.js
@@ -0,0 +1,21 @@
+// FPCC
+import {
+  useJoinRequestApprove,
+  useJoinRequestIgnore,
+} from 'common/dataHooks/useJoinRequests'
+
+function DashboardJoinCardData({ joinRequest }) {
+  const { onSubmit: ignoreRequest } = useJoinRequestIgnore()
+  const { onSubmit: approveRequest } = useJoinRequestApprove()
+
+  const handleApprove = (roleToAssign) => {
+    approveRequest({ id: joinRequest.id, role: roleToAssign })
+  }
+
+  return {
+    handleIgnore: () => ignoreRequest(joinRequest?.id),
+    handleApprove,
+  }
+}
+
+export default DashboardJoinCardData
diff --git a/src/components/DashboardJoinCard/DashboardJoinCardPresentation.js b/src/components/DashboardJoinCard/DashboardJoinCardPresentation.js
new file mode 100644
index 00000000..d0f6bcbd
--- /dev/null
+++ b/src/components/DashboardJoinCard/DashboardJoinCardPresentation.js
@@ -0,0 +1,153 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+// FPCC
+import { localDateMDYT } from 'common/utils/stringHelpers'
+import {
+  MEMBER,
+  ASSISTANT,
+  EDITOR,
+  LANGUAGE_ADMIN,
+} from 'common/constants/roles'
+import getIcon from 'common/utils/getIcon'
+
+function DashboardJoinCardPresentation({
+  joinRequest,
+  handleIgnore,
+  handleApprove,
+}) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [selectedRole, setSelectedRole] = useState(MEMBER)
+
+  const nameOfUser =
+    joinRequest?.user?.firstName || joinRequest?.user?.lastName
+      ? `${joinRequest?.user?.firstName} ${joinRequest?.user?.lastName}`
+      : null
+
+  return (
+    <li data-testid="DashboardJoinCard" key={joinRequest?.id}>
+      <div className="grid grid-cols-2">
+        <div className="p-5 col-span-1">
+          <div className="flex gap-x-3">
+            <p className="font-semibold leading-6 text-fv-charcoal">
+              {nameOfUser || joinRequest?.user?.email}
+            </p>
+          </div>
+          <div className="mt-1 flex items-center gap-x-2 text-sm leading-5 text-fv-charcoal-light">
+            <p className="whitespace-nowrap">{joinRequest?.user?.email}</p>
+            <svg viewBox="0 0 2 2" className="h-1 w-1 fill-current">
+              <circle cx={1} cy={1} r={1} />
+            </svg>
+            <p className="whitespace-nowrap">
+              Requested on{' '}
+              <time dateTime={joinRequest?.created}>
+                {localDateMDYT(joinRequest?.created)}
+              </time>
+            </p>
+          </div>
+
+          <button
+            type="button"
+            className={`${
+              isExpanded ? 'hidden' : 'inline-block'
+            } mt-2 text-sm leading-6 text-primary-light hover:text-primary active:text-primary-dark`}
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            Show more
+          </button>
+        </div>
+        <div className="p-5 col-span-1">
+          <div className="lg:inline-flex justify-between w-full">
+            <div className="lg:space-x-1">
+              <label htmlFor="role-to-assign" className="sr-only">
+                Select message type
+              </label>
+              <select
+                id="role-to-assign"
+                name="role-to-assign"
+                onChange={(e) => setSelectedRole(e.target.value)}
+                className="inline-flex rounded-lg py-1.5 text-sm text-primary border border-primary shadow-sm hover:bg-gray-50"
+              >
+                <option value={MEMBER}>Approve as Member</option>
+                <option value={ASSISTANT}>Approve as Assistant</option>
+                <option value={EDITOR}>Approve as Editor</option>
+                <option value={LANGUAGE_ADMIN}>
+                  Approve as Language Admin
+                </option>
+              </select>
+
+              <label htmlFor="approve-request" className="sr-only">
+                Approve and assign role
+              </label>
+              <button
+                id="approve-request"
+                name="approve-request"
+                type="button"
+                onClick={() => handleApprove(selectedRole)}
+                className="mt-1 lg:mt-0 inline-flex items-center gap-x-2 rounded-lg px-2.5 py-1.5 text-sm bg-primary text-white shadow-sm hover:bg-primary-dark"
+              >
+                OK
+                {getIcon('CheckCircleSolid', 'h-4 w-4 fill-current')}
+              </button>
+            </div>
+            <div className="mt-1 lg:mt-0">
+              <label htmlFor="igore-request" className="sr-only">
+                Ignore request
+              </label>
+              <button
+                type="button"
+                id="igore-request"
+                name="igore-request"
+                onClick={() => handleIgnore()}
+                className="inline-flex items-center gap-x-2 rounded-lg px-2.5 py-1.5 text-sm text-secondary border border-secondary shadow-sm hover:bg-gray-50"
+              >
+                Ignore
+                {getIcon('TimesCircleSolid', 'h-4 w-4 fill-current')}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={isExpanded ? 'block px-5 pb-5' : 'hidden'}>
+        <dl className="space-y-5">
+          <div>
+            <dt className="text-sm font-semibold leading-4 text-fv-charcoal">
+              {joinRequest?.reasons?.length === 1
+                ? 'Reason for request'
+                : 'Reasons for request'}
+            </dt>
+            <dd className="mt-2 text-base leading-4 text-fv-charcoal capitalize">
+              {joinRequest?.reasons?.map((reason) => reason?.reason).join(', ')}
+            </dd>
+          </div>
+          <div>
+            <dt className="text-sm font-semibold leading-4 text-fv-charcoal">
+              Message from the user
+            </dt>
+            <dd className="mt-2 text-base leading-4 text-fv-charcoal">
+              {joinRequest?.reasonNote}
+            </dd>
+          </div>
+          <button
+            type="button"
+            className={`${
+              isExpanded ? 'inline-block' : 'hidden'
+            } mt-2 text-sm leading-6 text-primary-light hover:text-primary active:text-primary-dark`}
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            Show less
+          </button>
+        </dl>
+      </div>
+    </li>
+  )
+}
+// PROPTYPES
+const { func, object } = PropTypes
+DashboardJoinCardPresentation.propTypes = {
+  joinRequest: object,
+  handleIgnore: func,
+  handleApprove: func,
+}
+
+export default DashboardJoinCardPresentation
diff --git a/src/components/DashboardJoinCard/index.js b/src/components/DashboardJoinCard/index.js
new file mode 100644
index 00000000..0052be7a
--- /dev/null
+++ b/src/components/DashboardJoinCard/index.js
@@ -0,0 +1,9 @@
+import DashboardJoinCardContainer from 'components/DashboardJoinCard/DashboardJoinCardContainer'
+import DashboardJoinCardData from 'components/DashboardJoinCard/DashboardJoinCardData'
+import DashboardJoinCardPresentation from 'components/DashboardJoinCard/DashboardJoinCardPresentation'
+
+export default {
+  Container: DashboardJoinCardContainer,
+  Data: DashboardJoinCardData,
+  Presentation: DashboardJoinCardPresentation,
+}
diff --git a/src/components/DashboardJoinList/DashboardJoinListContainer.js b/src/components/DashboardJoinList/DashboardJoinListContainer.js
new file mode 100644
index 00000000..876a18d4
--- /dev/null
+++ b/src/components/DashboardJoinList/DashboardJoinListContainer.js
@@ -0,0 +1,23 @@
+import React from 'react'
+
+// FPCC
+import DashboardJoinListData from 'components/DashboardJoinList/DashboardJoinListData'
+import DashboardJoinListPresentation from 'components/DashboardJoinList/DashboardJoinListPresentation'
+
+function DashboardJoinListContainer() {
+  const { joinRequests, infiniteScroll, loadRef, isLoading, site } =
+    DashboardJoinListData()
+  return (
+    <div id="DashboardJoinListContainer">
+      <DashboardJoinListPresentation
+        joinRequests={joinRequests}
+        isLoading={isLoading}
+        site={site}
+        infiniteScroll={infiniteScroll}
+        loadRef={loadRef}
+      />
+    </div>
+  )
+}
+
+export default DashboardJoinListContainer
diff --git a/src/components/DashboardJoinList/DashboardJoinListData.js b/src/components/DashboardJoinList/DashboardJoinListData.js
new file mode 100644
index 00000000..e4d4c9a9
--- /dev/null
+++ b/src/components/DashboardJoinList/DashboardJoinListData.js
@@ -0,0 +1,23 @@
+import { useParams } from 'react-router-dom'
+
+// FPCC
+import { useSiteStore } from 'context/SiteContext'
+import { useJoinRequests } from 'common/dataHooks/useJoinRequests'
+
+function DashboardJoinListData() {
+  const { site } = useSiteStore()
+  const { sitename } = useParams()
+
+  const { data, isError, infiniteScroll, loadRef, isInitialLoading } =
+    useJoinRequests()
+  return {
+    isLoading: isInitialLoading || isError,
+    infiniteScroll,
+    loadRef,
+    site,
+    sitename,
+    joinRequests: data || {},
+  }
+}
+
+export default DashboardJoinListData
diff --git a/src/components/DashboardJoinList/DashboardJoinListPresentation.js b/src/components/DashboardJoinList/DashboardJoinListPresentation.js
new file mode 100644
index 00000000..3028e50f
--- /dev/null
+++ b/src/components/DashboardJoinList/DashboardJoinListPresentation.js
@@ -0,0 +1,79 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+
+// FPCC
+import Loading from 'components/Loading'
+import DashboardJoinCard from 'components/DashboardJoinCard'
+
+function DashboardJoinListPresentation({
+  isLoading,
+  infiniteScroll,
+  joinRequests,
+  loadRef,
+}) {
+  const { isFetchingNextPage, fetchNextPage, hasNextPage } = infiniteScroll
+
+  const getLoadLabel = () => {
+    if (infiniteScroll?.isFetchingNextPage) {
+      return 'Loading more...'
+    }
+    if (infiniteScroll?.hasNextPage) {
+      return 'Load more'
+    }
+    return ''
+  }
+  return (
+    <Loading.Container isLoading={isLoading}>
+      <div data-testid="DashboardJoinListPresentation">
+        <div className="min-h-220 col-span-12">
+          {joinRequests?.pages?.[0]?.count > 0 ? (
+            <div
+              id="EntriesListPresentation"
+              className="flex flex-col w-full bg-white rounded-lg"
+            >
+              <div className="divide-y divide-gray-200">
+                {joinRequests?.pages.map((page) => (
+                  <Fragment key={page?.pageNumber}>
+                    {page.results.map((request) => (
+                      <DashboardJoinCard.Container
+                        key={request?.id}
+                        joinRequest={request}
+                      />
+                    ))}
+                  </Fragment>
+                ))}
+                <button
+                  type="button"
+                  className={`${
+                    !hasNextPage ? 'cursor-text' : ''
+                  } text-primary font-semibold w-full text-center p-2 print:hidden`}
+                  onClick={() => fetchNextPage()}
+                  disabled={!hasNextPage || isFetchingNextPage}
+                >
+                  {getLoadLabel()}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="w-full flex">
+              <div className="mx-6 mt-4 text-center md:mx-auto md:mt-20">
+                There are currently no pending join requests for your site.
+              </div>
+            </div>
+          )}
+        </div>
+        <div ref={loadRef} className="w-full h-10" />
+      </div>
+    </Loading.Container>
+  )
+}
+// PROPTYPES
+const { bool, object } = PropTypes
+DashboardJoinListPresentation.propTypes = {
+  joinRequests: object,
+  isLoading: bool,
+  loadRef: object,
+  infiniteScroll: object,
+}
+
+export default DashboardJoinListPresentation
diff --git a/src/components/DashboardJoinList/index.js b/src/components/DashboardJoinList/index.js
new file mode 100644
index 00000000..6862567c
--- /dev/null
+++ b/src/components/DashboardJoinList/index.js
@@ -0,0 +1,9 @@
+import DashboardJoinListContainer from 'components/DashboardJoinList/DashboardJoinListContainer'
+import DashboardJoinListData from 'components/DashboardJoinList/DashboardJoinListData'
+import DashboardJoinListPresentation from 'components/DashboardJoinList/DashboardJoinListPresentation'
+
+export default {
+  Container: DashboardJoinListContainer,
+  Data: DashboardJoinListData,
+  Presentation: DashboardJoinListPresentation,
+}
diff --git a/src/components/DashboardLanding/DashboardLandingPresentation.js b/src/components/DashboardLanding/DashboardLandingPresentation.js
index dbae8445..3c92bb68 100644
--- a/src/components/DashboardLanding/DashboardLandingPresentation.js
+++ b/src/components/DashboardLanding/DashboardLandingPresentation.js
@@ -49,7 +49,7 @@ function DashboardLandingPresentation({
             <DashboardTiles.Presentation tileContent={tileContent} />
           </div>
         )}
-        {children}
+        <div className="px-8">{children}</div>
       </main>
       <DashboardFooter.Presentation />
     </div>
diff --git a/src/components/DashboardTable/DashboardTablePresentation.js b/src/components/DashboardTable/DashboardTablePresentation.js
index d7c2f90f..ebced098 100644
--- a/src/components/DashboardTable/DashboardTablePresentation.js
+++ b/src/components/DashboardTable/DashboardTablePresentation.js
@@ -13,8 +13,8 @@ function DashboardTablePresentation({
   return (
     <Loading.Container isLoading={isLoading}>
       <section
-        id="DashboardTablePresentation"
-        className="mx-auto max-w-7xl h-full px-8"
+        data-testid="DashboardTablePresentation"
+        className="mx-auto h-full"
       >
         <div className="bg-white shadow rounded-md overflow-hidden">
           {title && (
diff --git a/src/components/Join/JoinForm.js b/src/components/Join/JoinForm.js
index 2132c8d7..8cefd817 100644
--- a/src/components/Join/JoinForm.js
+++ b/src/components/Join/JoinForm.js
@@ -49,7 +49,7 @@ function JoinForm({ site, submitHandler }) {
       .min(1, 'At least one reason must be selected')
       .required(),
     message: definitions
-      .paragraph()
+      .paragraph({ charCount: 2500 })
       .required('Please include a message to the Language Administrator'),
     sitename: yup.string().required(),
   })