[Feature] Transfer project ownership

jsapp/js/components/common/icon.scss

@@ -43,6 +43,10 @@ $s-icon-xl: 28px;
   color: colors.$kobo-red;
 }
 
+.k-icon.k-icon--color-blue {
+  color: colors.$kobo-blue;
+}
+
 .k-icon.k-icon--color-amber {
   color: colors.$kobo-amber;
 }

jsapp/js/components/common/icon.tsx

@@ -7,7 +7,7 @@ import './icon.scss';
  * Check out `icon.scss` file for exact pixel values.
  */
 export type IconSize = 'l' | 'm' | 's' | 'xl' | 'xs' | 'xxs';
-export type IconColor = 'red' | 'storm' | 'teal' | 'amber';
+export type IconColor = 'red' | 'storm' | 'teal' | 'amber' | 'blue';
 
 const DefaultSize = 's';
 

jsapp/js/components/formLanding.js

@@ -365,6 +365,12 @@ class FormLanding extends React.Component {
     kc_server.href = this.state.deployment__identifier;
     var kobocollect_url = kc_server.origin;
 
+    /* TODO
+     `deployment__identifier` has been removed from API response.
+     Stop reading `kc_server` from `deployment__identifier` and use `open_rosa_server`
+     property provided in `/environment` endpoint
+    */
+
     return (
       <bem.FormView__row>
         <bem.FormView__cell m={['label', 'first']}>

jsapp/js/components/formSubScreens.js

@@ -15,6 +15,8 @@ import RESTServices from './RESTServices';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
 import {ROUTES} from 'js/router/routerConstants';
 import {withRouter} from 'js/router/legacy';
+import sessionStore from 'js/stores/session';
+import TransferProjects from 'js/components/permissions/transferProjects/transferProjects.component';
 
 const ConnectProjects = React.lazy(() =>
   import(
@@ -137,9 +139,12 @@ export class FormSubScreens extends React.Component {
   }
   renderSharing() {
     const uid = this.props.params.assetid || this.props.params.uid;
+
     return (
       <bem.FormView m='form-settings-sharing'>
         <SharingForm assetUid={uid} />
+
+        <TransferProjects asset={this.state} />
       </bem.FormView>
     );
   }

jsapp/js/components/modals/koboModal.scss

@@ -65,12 +65,15 @@ $kobo-modal-header-icon-margin: sizes.$x10;
   padding: $kobo-modal-padding;
   border-radius: sizes.$x6 sizes.$x6 0 0;
 
-    &.kobo-modal__header--red{
+    &.kobo-modal__header--red {
       background-color: color.change(colors.$kobo-red, $alpha: 0.1);
     }
-    &.kobo-modal__header--grey{
+    &.kobo-modal__header--grey {
       background-color: colors.$kobo-gray-98;
     }
+    &.kobo-modal__header--white {
+      background-color: colors.$kobo-white;
+    }
 
   h1 {
     @include mixins.centerRowFlex;

jsapp/js/components/modals/koboModalHeader.tsx

@@ -8,7 +8,7 @@ bem.KoboModal__header = makeBem(bem.KoboModal, 'header', 'header');
 bem.KoboModal__headerIcon = makeBem(bem.KoboModal, 'header-icon', 'span');
 
 export type KoboModalHeaderIconColors = 'blue' | 'red' | 'storm';
-export type KoboModalHeaderBackgroundColors = 'red' | 'grey';
+export type KoboModalHeaderBackgroundColors = 'red' | 'grey' | 'white';
 
 interface KoboModalHeaderProps {
   /** Optional icon displayed on the left of the title. */

jsapp/js/components/permissions/sharingForm.component.tsx

@@ -12,6 +12,7 @@ import {replaceBracketsWithLink} from 'js/textUtils';
 import {ANON_USERNAME, ANON_USERNAME_URL} from 'js/users/utils';
 import {ASSET_TYPES} from 'js/constants';
 import {ACCOUNT_ROUTES} from 'js/account/routes';
+import {TransferStatuses} from 'js/components/permissions/transferProjects/transferProjects.api';
 import './sharingForm.scss';
 // parts
 import CopyTeamPermissions from './copyTeamPermissions.component';
@@ -162,6 +163,41 @@ export default class SharingForm extends React.Component<
     }
   }
 
+  /** Check if the recipient of the transfer is the specified user */
+  isPendingOwner(username: string) {
+    return this.state.asset?.project_ownership?.status ===
+      TransferStatuses.Pending &&
+      this.state.asset?.project_ownership?.recipient === username
+      ? true
+      : false;
+  }
+
+  /** Display pending owner if not already included in list of user permissions */
+  renderPendingOwner() {
+    if (
+      this.state.asset?.project_ownership?.status ===
+        TransferStatuses.Pending &&
+      !this.state.permissions?.find(
+        (perm) =>
+          perm.user.name === this.state.asset?.project_ownership?.recipient
+      )
+    ) {
+      return (
+        <UserPermissionRow
+          assetUid={this.props.assetUid}
+          nonOwnerPerms={this.state.nonOwnerPerms}
+          assignablePerms={this.state.assignablePerms}
+          permissions={[]}
+          isUserOwner={false}
+          isPendingOwner={true}
+          username={this.state.asset.project_ownership.recipient}
+        />
+      );
+    } else {
+      return null;
+    }
+  }
+
   render() {
     if (!this.state.asset || !this.state.permissions) {
       return <LoadingSpinner />;
@@ -217,10 +253,12 @@ export default class SharingForm extends React.Component<
                 assignablePerms={this.state.assignablePerms}
                 permissions={perm.permissions}
                 isUserOwner={perm.user.isOwner}
+                isPendingOwner={this.isPendingOwner(perm.user.name)}
                 username={perm.user.name}
               />
             );
           })}
+          {this.renderPendingOwner()}
 
           {!this.state.isAddUserEditorVisible && (
             <Button

jsapp/js/components/permissions/sharingForm.scss

@@ -27,8 +27,6 @@ $s-gray-row-spacing: 10px;
 }
 
 .copy-team-permissions {
-  margin-bottom: 30px;
-
   &.copy-team-permissions--opened
     .copy-team-permissions-opener
     .k-icon::before {

jsapp/js/components/permissions/transferProjects/transferProjects.api.ts

@@ -0,0 +1,203 @@
+import {FailResponse, PaginatedResponse} from 'js/dataInterface';
+import {fetchGet, fetchPost, fetchPatch} from 'jsapp/js/api';
+import sessionStore from 'js/stores/session';
+import {buildUserUrl, getUsernameFromUrl} from 'js/users/utils';
+import {notify} from 'js/utils';
+import {handleApiFail} from 'js/api';
+
+const INVITE_URL = '/api/v2/project-ownership/invites/';
+
+/**
+ * The status of a project transfer.
+ */
+export enum TransferStatuses {
+  /**Sender sent the invite but recipient hasn't responded yet.*/
+  Pending = 'pending',
+  /**Sender sent the invite but cancelled it before the recipient could respond.*/
+  Cancelled = 'cancelled',
+  /**Recipient has declined the invite.*/
+  Declined = 'declined',
+  /**Recipient has accepted the invite but transfer process has not started yet*/
+  Accepted = 'accepted',
+  /**Recipient has accepted and the transfer process has begun.*/
+  InProgress = 'in_progress',
+  /**Recipient has accepted and transfer has completed successfully.*/
+  Complete = 'complete',
+  /**Recipient has accepted and process went south.*/
+  Failed = 'failed',
+}
+
+/**Detail about a single asset's transfer. This is listed in the invite detail.*/
+export interface ProjectTransfer {
+  url: string;
+  asset: string;
+  asset__name: string;
+  status: TransferStatuses;
+  error: any;
+  date_modified: string;
+}
+
+/**Detail about current asset's transfer. This is listed in the asset detail.*/
+export interface ProjectTransferAssetDetail {
+  invite: string;
+  sender: string;
+  recipient: string;
+  status: TransferStatuses;
+}
+
+export interface InvitesResponse {
+  url: string;
+  sender: string;
+  recipient: string;
+  status: TransferStatuses;
+  date_created: string;
+  date_modified: string;
+  /**
+   * Backend is written such that invites can have multiple
+   * projects per transfer. This is not supported by the UI right now.
+   */
+  transfers: ProjectTransfer[];
+}
+
+export async function sendInvite(username: string, assetUid: string) {
+  return fetchPost<InvitesResponse>(INVITE_URL, {
+    recipient: buildUserUrl(username),
+    assets: [assetUid],
+  });
+}
+
+// Note: the following invite actions are seperated to make it clearer when using in
+// the JSX code.
+
+export async function cancelInvite(inviteUrl: string) {
+  let response;
+  try {
+    response = await fetchPatch<InvitesResponse>(
+      inviteUrl,
+      {
+        status: TransferStatuses.Cancelled,
+      },
+      {prependRootUrl: false, notifyAboutError: false}
+    );
+  } catch (error) {
+    handleApiFail(
+      error as FailResponse,
+      t(
+        'Failed to cancel transfer. The transfer may be declined or accpeted already. Please check your email.'
+      )
+    );
+  }
+
+  return response;
+}
+
+export async function acceptInvite(inviteUid: string) {
+  let response;
+  try {
+    response = await fetchPatch<InvitesResponse>(
+      INVITE_URL + inviteUid + '/',
+      {
+        status: TransferStatuses.Accepted,
+      },
+      {prependRootUrl: false, notifyAboutError: false}
+    );
+  } catch (error) {
+    handleApiFail(
+      error as FailResponse,
+      t(
+        'Failed to accept invite.'
+      )
+    );
+  }
+
+  return response;
+}
+
+export async function declineInvite(inviteUid: string) {
+  let response;
+  try {
+    response = await fetchPatch<InvitesResponse>(
+      INVITE_URL + inviteUid + '/',
+      {
+        status: TransferStatuses.Declined,
+      },
+      {prependRootUrl: false, notifyAboutError: false}
+    );
+  } catch (error) {
+    handleApiFail(
+      error as FailResponse,
+      t(
+        'Failed to decline invite'
+      )
+    );
+  }
+  return response;
+}
+
+/**Returns *all invites* the current user sent or recieved.*/
+export async function getAllInvites() {
+  let invites;
+  try {
+    invites = await fetchGet<PaginatedResponse<InvitesResponse>>(INVITE_URL, {notifyAboutError: false});
+  } catch (error) {
+    handleApiFail(
+      error as FailResponse,
+    );
+  }
+
+  return invites;
+}
+
+/**
+ * Returns detail for a single invite.
+ *
+ * Note: backend is written such that invites can have multiple
+ * projects per transfer. This is not supported by the UI right now.
+ */
+export async function getInviteDetail(inviteUid: string) {
+  return fetchGet<InvitesResponse>(INVITE_URL + inviteUid, {notifyAboutError: false});
+}
+
+/** Check if the invite is meant for the currently logged in user. */
+export async function isInviteForLoggedInUser(inviteUid: string) {
+  let inviteIsCorrect = false;
+  try {
+    await getInviteDetail(inviteUid).then((data) => {
+      // Only bother with the check if it's in the `pending` state.
+      if (data.status !== TransferStatuses.Pending) {
+        notify.warning(t('Invite has been cancelled or expired'));
+        return;
+      }
+
+      inviteIsCorrect =
+        sessionStore.currentAccount.username ===
+        getUsernameFromUrl(data.recipient);
+    });
+  } catch (error) {
+    handleApiFail(
+      error as FailResponse,
+      t(
+        'Invite is invaild.'
+      )
+    );
+  }
+
+  return inviteIsCorrect;
+}
+
+export async function getAssetFromInviteUid(inviteUid: string) {
+  let displayDetails = null;
+  try {
+    await getInviteDetail(inviteUid).then((data) => {
+      displayDetails = {
+        assetName: data.transfers[0].asset__name,
+        assetOwner: getUsernameFromUrl(data.sender),
+      };
+    });
+  } catch (error) {
+    handleApiFail(
+      error as FailResponse,
+    );
+  }
+  return displayDetails;
+}