From 49778d93bdef1d06516f5a2dd66cdf72a094b086 Mon Sep 17 00:00:00 2001 From: Hamsini Malli <hmallisi@broadinstitute.org> Date: Tue, 5 Dec 2023 09:05:53 -0500 Subject: [PATCH] [DUOS-2797] Create Request LC page (#2414) Co-authored-by: Gregory Rushton <rushtong@users.noreply.github.com> --- src/Routes.js | 5 +- src/pages/user_profile/LibraryCard.js | 6 +- .../{RequestRole.js => RequestForm.js} | 76 +++++++++++++------ src/pages/user_profile/ResearcherStatus.js | 2 +- 4 files changed, 59 insertions(+), 30 deletions(-) rename src/pages/user_profile/{RequestRole.js => RequestForm.js} (74%) diff --git a/src/Routes.js b/src/Routes.js index 652e7c3e5..5cc2baa60 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -15,7 +15,7 @@ import NIHICWebform from './pages/NIHicWebform'; import PrivacyPolicy from './pages/PrivacyPolicy'; import ResearcherConsole from './pages/researcher_console/ResearcherConsole'; import UserProfile from './pages/user_profile/UserProfile'; -import RequestRole from './pages/user_profile/RequestRole'; +import RequestForm from './pages/user_profile/RequestForm'; import SigningOfficialResearchers from './pages/signing_official_console/SigningOfficialResearchers'; import SigningOfficialDarRequests from './pages/signing_official_console/SigningOfficialDarRequests'; import SigningOfficialDataSubmitters from './pages/signing_official_console/SigningOfficialDataSubmitters'; @@ -66,7 +66,8 @@ const Routes = (props) => ( <Route path="/nih_dms_policy" component={NIHDMSPolicyInfo} /> <Route path="/anvil_dms_policy" component={AnVILDMSPolicyInfo} /> <AuthenticatedRoute path="/profile" component={UserProfile} props={props} rolesAllowed={[USER_ROLES.all]} /> - <AuthenticatedRoute path="/request_role" component={RequestRole} props={props} rolesAllowed={[USER_ROLES.all]} /> + <AuthenticatedRoute path="/request_role" component={RequestForm} props={Object.assign({}, props, {isRequestRolePage: true})} rolesAllowed={[USER_ROLES.all]} /> + <AuthenticatedRoute path="/request_lc" component={RequestForm} props={Object.assign({}, props, {isRequestLCPage: true})} rolesAllowed={[USER_ROLES.all]} /> <AuthenticatedRoute path="/admin_review_collection/:collectionId" component={DarCollectionReview} props={Object.assign({adminPage: true}, props)} rolesAllowed={[USER_ROLES.admin]} /> <AuthenticatedRoute path="/admin_manage_users" component={AdminManageUsers} props={props} rolesAllowed={[USER_ROLES.admin]} /> <AuthenticatedRoute path="/admin_edit_user/:userId" component={AdminEditUser} props={props} rolesAllowed={[USER_ROLES.admin]} /> diff --git a/src/pages/user_profile/LibraryCard.js b/src/pages/user_profile/LibraryCard.js index e3b0b26f6..0eeba91b5 100644 --- a/src/pages/user_profile/LibraryCard.js +++ b/src/pages/user_profile/LibraryCard.js @@ -9,8 +9,8 @@ export default function LibraryCard(props) { return <div style={{ display: 'flex' }}> <div style={{ - height: '40px', - width: '60px', + height: '50px', + width: '160px', background: '#00A097', borderRadius: '4px', boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset', @@ -20,7 +20,7 @@ export default function LibraryCard(props) { fontFamily: 'Montserrat', fontSize: '16px', fontWeight: '500', - lineHeight: '20px', + lineHeight: '30px', letterSpacing: '0em', textAlign: 'center', color: 'rgba(255, 255, 255, 1)' diff --git a/src/pages/user_profile/RequestRole.js b/src/pages/user_profile/RequestForm.js similarity index 74% rename from src/pages/user_profile/RequestRole.js rename to src/pages/user_profile/RequestForm.js index 80c5e62c4..e07161ed2 100644 --- a/src/pages/user_profile/RequestRole.js +++ b/src/pages/user_profile/RequestForm.js @@ -4,7 +4,7 @@ import { Notifications } from '../../libs/utils'; import { isNil } from 'lodash'; import { FormField, FormFieldTypes } from '../../components/forms/forms'; -export default function RequestRole(props) { +export default function SupportRequestsPage(props) { const profile = props.location.state?.data || undefined; @@ -16,29 +16,55 @@ export default function RequestRole(props) { marginBottom: '1rem' }; - const possibleSupportRequests = [ - { - key: 'checkRegisterDataset', - label: 'Register a dataset' - }, - { - key: 'checkSOPermissions', - label: `I am a Signing Official and I want to issue permissions to my institution's users` - }, - { - key: 'checkJoinDac', - label: 'I am looking to join a DAC' - } - ]; + var possibleSupportRequests; + var hasSupportRequestsCond; + var supportRequestsCond; + + if (props.isRequestRolePage) { + possibleSupportRequests = [ + { + key: 'checkRegisterDataset', + label: 'Register a dataset' + }, + { + key: 'checkSOPermissions', + label: `I am a Signing Official and I want to issue permissions to my institution's users` + }, + { + key: 'checkJoinDac', + label: 'I am looking to join a DAC' + } + ]; + hasSupportRequestsCond = false; + supportRequestsCond = { + checkRegisterDataset: false, + checkRequestDataAccess: false, + checkSOPermissions: false, + checkJoinDac: false, + extraRequest: undefined + }; + } + else if (props.isRequestLCPage) { + possibleSupportRequests = [ + { + key: 'requestNewLC', + label: 'Request a new library card', + isDefaultOption: true, + } + ]; + hasSupportRequestsCond = true; + supportRequestsCond = { + requestNewLC: true, + }; + } + else { + possibleSupportRequests = []; + hasSupportRequestsCond = false; + supportRequestsCond = {}; + } - const [hasSupportRequests, setHasSupportRequests] = useState(false); - const [supportRequests, setSupportRequests] = useState({ - checkRegisterDataset: false, - checkRequestDataAccess: false, - checkSOPermissions: false, - checkJoinDac: false, - extraRequest: undefined - }); + const [hasSupportRequests, setHasSupportRequests] = useState(hasSupportRequestsCond); + const [supportRequests, setSupportRequests] = useState(supportRequestsCond); const goToPrevPage = async (event) => { event.preventDefault(); @@ -119,7 +145,7 @@ export default function RequestRole(props) { fontWeight: '600', marginTop: 10 }}> - Request a New Role in DUOS + {props.isRequestRolePage ? 'Request a New Role' : (props.isRequestLCPage ? 'Request Library Card' : '')} </p> <div style={{ @@ -135,6 +161,8 @@ export default function RequestRole(props) { {possibleSupportRequests.map((supportRequest) => { return <FormField toggleText={supportRequest.label} + defaultValue={supportRequest?.isDefaultOption} + disabled={supportRequest?.isDefaultOption} type={FormFieldTypes.CHECKBOX} key={supportRequest.key} id={supportRequest.key} diff --git a/src/pages/user_profile/ResearcherStatus.js b/src/pages/user_profile/ResearcherStatus.js index f1f959a04..1b4480479 100644 --- a/src/pages/user_profile/ResearcherStatus.js +++ b/src/pages/user_profile/ResearcherStatus.js @@ -19,7 +19,7 @@ export default function ResearcherStatus(props) { const goToRequestRole = () => { pageProps.history.push({ - pathname: '/request_role', + pathname: '/request_lc', state: { data: profile } }); };