-
-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into task-963-create-endpoints-to-handle-org-members
- Loading branch information
Showing
76 changed files
with
2,732 additions
and
1,356 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,3 +17,9 @@ | |
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .accountSection { | ||
| display: flex; | ||
| margin-left: auto; | ||
| position: relative; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,5 @@ | |
| border-radius: 48px; | ||
| font-weight: 600; | ||
| font-size: .85em; | ||
| line-height: 12px; | ||
| margin-right: 20px; | ||
| } | ||
75 changes: 75 additions & 0 deletions
75
jsapp/js/components/permissions/transferProjects/projectOwnershipTransferModalWithBanner.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| // Libraries | ||
| import React, {useState, useEffect} from 'react'; | ||
| import {useSearchParams} from 'react-router-dom'; | ||
|
|
||
| // Partial components | ||
| import TransferProjectsInvite from './transferProjectsInvite.component'; | ||
| import ProjectTransferInviteBanner from './projectTransferInviteBanner'; | ||
|
|
||
| // Stores, hooks and utilities | ||
| import { | ||
| isInviteForLoggedInUser, | ||
| type TransferStatuses, | ||
| } from './transferProjects.api'; | ||
|
|
||
| // Constants and types | ||
| import type {TransferInviteState} from './projectTransferInviteBanner'; | ||
|
|
||
| /** | ||
| * This is a glue component that displays a modal from `TransferProjectsInvite` | ||
| * and a banner from `ProjectTransferInviteBanner` as an outcome of the modal | ||
| * action. | ||
| */ | ||
| export default function ProjectOwnershipTransferModalWithBanner() { | ||
| const [invite, setInvite] = useState<TransferInviteState>({ | ||
| valid: false, | ||
| uid: '', | ||
| status: null, | ||
| name: '', | ||
| currentOwner: '', | ||
| }); | ||
| const [isBannerVisible, setIsBannerVisible] = useState(true); | ||
| const [searchParams] = useSearchParams(); | ||
|
|
||
| useEffect(() => { | ||
| const inviteParams = searchParams.get('invite'); | ||
| if (inviteParams) { | ||
| isInviteForLoggedInUser(inviteParams).then((data) => { | ||
| setInvite({...invite, valid: data, uid: inviteParams}); | ||
| }); | ||
| } else { | ||
| setInvite({...invite, valid: false, uid: ''}); | ||
| } | ||
| }, [searchParams]); | ||
|
|
||
| const setInviteDetail = ( | ||
| newStatus: TransferStatuses.Accepted | TransferStatuses.Declined, | ||
| name: string, | ||
| currentOwner: string | ||
| ) => { | ||
| setInvite({ | ||
| ...invite, | ||
| status: newStatus, | ||
| name: name, | ||
| currentOwner: currentOwner, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {isBannerVisible && | ||
| <ProjectTransferInviteBanner | ||
| invite={invite} | ||
| onRequestClose={() => {setIsBannerVisible(false);}} | ||
| /> | ||
| } | ||
|
|
||
| {invite.valid && invite.uid !== '' && ( | ||
| <TransferProjectsInvite | ||
| setInvite={setInviteDetail} | ||
| inviteUid={invite.uid} | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
19 changes: 19 additions & 0 deletions
19
jsapp/js/components/permissions/transferProjects/projectTransferInviteBanner.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| @use 'scss/colors'; | ||
|
|
||
| .banner { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin: 24px 24px 0; | ||
| padding: 12px; | ||
| background-color: colors.$kobo-light-blue; | ||
| border-radius: 5px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .bannerIcon { | ||
| padding-right: 18px; | ||
| } | ||
|
|
||
| .bannerButton { | ||
| margin-left: auto; | ||
| } |
64 changes: 64 additions & 0 deletions
64
jsapp/js/components/permissions/transferProjects/projectTransferInviteBanner.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React from 'react'; | ||
| import Icon from 'js/components/common/icon'; | ||
| import Button from 'js/components/common/button'; | ||
| import {TransferStatuses} from 'js/components/permissions/transferProjects/transferProjects.api'; | ||
| import styles from './projectTransferInviteBanner.module.scss'; | ||
|
|
||
| export interface TransferInviteState { | ||
| valid: boolean; | ||
| uid: string; | ||
| status: TransferStatuses.Accepted | TransferStatuses.Declined | null; | ||
| name: string; | ||
| currentOwner: string; | ||
| } | ||
|
|
||
| interface ProjectTransferInviteBannerProps { | ||
| invite: TransferInviteState; | ||
| onRequestClose: () => void; | ||
| } | ||
|
|
||
| /** | ||
| * Displays a banner about accepting or declining project transfer invitation. | ||
| */ | ||
| export default function ProjectTransferInviteBanner(props: ProjectTransferInviteBannerProps) { | ||
| if (props.invite.status) { | ||
| return ( | ||
| <div className={styles.banner}> | ||
| <Icon | ||
| name='information' | ||
| color='blue' | ||
| className={styles.bannerIcon} | ||
| /> | ||
|
|
||
| {props.invite.status === TransferStatuses.Declined && ( | ||
| <> | ||
| {t('You have declined the request of transfer ownership for ##PROJECT_NAME##. ##CURRENT_OWNER_NAME## will receive a notification that the transfer was incomplete.') | ||
| .replace('##PROJECT_NAME##', props.invite.name) | ||
| .replace('##CURRENT_OWNER_NAME##', props.invite.currentOwner)} | ||
| | ||
| {t('##CURRENT_OWNER_NAME## will remain the project owner.') | ||
| .replace('##CURRENT_OWNER_NAME##', props.invite.currentOwner)} | ||
| </> | ||
| )} | ||
|
|
||
| {props.invite.status === TransferStatuses.Accepted && ( | ||
| <> | ||
| {t('You have accepted project ownership from ##CURRENT_OWNER_NAME## for ##PROJECT_NAME##. This process can take up to a few minutes to complete.') | ||
| .replace('##PROJECT_NAME##', props.invite.name) | ||
| .replace('##CURRENT_OWNER_NAME##', props.invite.currentOwner)} | ||
| </> | ||
| )} | ||
|
|
||
| <Button | ||
| type='text' | ||
| size='s' | ||
| startIcon='close' | ||
| onClick={() => {props.onRequestClose();}} | ||
| className={styles.bannerButton} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| } |
Oops, something went wrong.