[ENG-6669] Institutional Access project Request Modal

app/adapters/node-request.ts

@@ -0,0 +1,13 @@
+import { inject as service } from '@ember/service';
+import config from 'ember-osf-web/config/environment';
+const { OSF: { apiUrl } } = config;
+import OsfAdapter from './osf-adapter';
+
+export default class NodeRequestAdapter extends OsfAdapter {
+    @service session;
+
+    urlForCreateRecord(modelName, snapshot) {
+        const nodeId = snapshot.record.target;
+        return `${apiUrl}/v2/nodes/${nodeId}/requests/`;
+    }
+}

app/adapters/user-message.ts

@@ -1,4 +1,3 @@
-// app/adapters/user-message.js
 import { inject as service } from '@ember/service';
 import config from 'ember-osf-web/config/environment';
 const { OSF: { apiUrl } } = config;
@@ -7,7 +6,7 @@ import OsfAdapter from './osf-adapter';
 export default class UserMessageAdapter extends OsfAdapter {
     @service session;
     urlForCreateRecord(modelName, snapshot) {
-        const userId = snapshot.record.user;
+        const userId = snapshot.record.messageRecipient;
         return `${apiUrl}/v2/users/${userId}/messages/`;
     }
 }

app/institutions/dashboard/-components/institutional-users-list/component.ts

@@ -43,7 +43,7 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
     @tracked filteredUsers = [];
     @tracked messageModalShown = false;
     @tracked messageText = '';
-    @tracked bcc_sender = false;
+    @tracked bccSender = false;
     @tracked replyTo = false;
     @tracked selectedUserId = null;
     @service toast!: Toast;
@@ -291,7 +291,7 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
     @action
     resetModalFields() {
         this.messageText = '';
-        this.bcc_sender = false;
+        this.bccSender = false;
         this.replyTo = false;
         this.selectedUserId = null;
     }
@@ -308,7 +308,7 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
             const userMessage = this.store.createRecord('user-message', {
                 messageText: this.messageText.trim(),
                 messageType: MessageTypeChoices.InstitutionalRequest,
-                bcc_sender: this.bcc_sender,
+                bccSender: this.bccSender,
                 replyTo: this.replyTo,
                 institution: this.args.institution,
                 user: this.selectedUserId,

app/institutions/dashboard/-components/institutional-users-list/template.hbs

@@ -231,7 +231,7 @@
                 </div>
                 <div local-class='checkbox-container'>
                     <label local-class='checkbox-item'>
-                        <Input @type='checkbox' @checked={{this.bcc_sender}} />
+                        <Input @type='checkbox' @checked={{this.bccSender}} />
                         {{t 'institutions.dashboard.send_message_modal.cc_label'}}
                     </label>
                     <label local-class='checkbox-item'>

app/institutions/dashboard/-components/object-list/component.ts

@@ -9,6 +9,16 @@ import InstitutionModel from 'ember-osf-web/models/institution';
 import { SuggestedFilterOperators } from 'ember-osf-web/models/related-property-path';
 import SearchResultModel from 'ember-osf-web/models/search-result';
 import { Filter } from 'osf-components/components/search-page/component';
+import { waitFor } from '@ember/test-waiters';
+import { task } from 'ember-concurrency';
+import { taskFor } from 'ember-concurrency-ts';
+import Toast from 'ember-toastr/services/toast';
+import Intl from 'ember-intl/services/intl';
+import Store from '@ember-data/store';
+import CurrentUser from 'ember-osf-web/services/current-user';
+import {MessageTypeChoices} from 'ember-osf-web/models/user-message';
+import {RequestTypeChoices} from 'ember-osf-web/models/node-request';
+
 import config from 'ember-osf-web/config/environment';
 
 const shareDownloadFlag = config.featureFlagNames.shareDownload;
@@ -49,6 +59,20 @@ export default class InstitutionalObjectList extends Component<InstitutionalObje
     @tracked sortParam?: string;
     @tracked visibleColumns = this.args.columns.map(column => column.name);
     @tracked dirtyVisibleColumns = [...this.visibleColumns]; // track changes to visible columns before they are saved
+    @tracked selectedPermissions = 'write';
+    @tracked projectRequestModalShown = false;
+    @tracked activeTab = 'request-access'; // Default tab
+    @tracked messageText = '';
+    @tracked bccSender = false;
+    @tracked replyTo = false;
+    @tracked selectedUserId = '';
+    @tracked selectedNodeId = '';
+    @tracked showSendMessagePrompt = false;
+    @service toast!: Toast;
+    @service intl!: Intl;
+    @service store!: Store;
+    @service currentUser!: CurrentUser;
+
 
     get queryOptions() {
         const options = {
@@ -151,4 +175,125 @@ export default class InstitutionalObjectList extends Component<InstitutionalObje
     updatePage(newPage: string) {
         this.page = newPage;
     }
+
+    @action
+    openProjectRequestModal(contributor: any) {
+        this.selectedUserId = contributor.userId;
+        this.selectedNodeId = contributor.nodeId;
+        this.projectRequestModalShown = true;
+    }
+
+    @action
+    handleBackToSendMessage() {
+        this.activeTab = 'send-message';
+        this.showSendMessagePrompt = false;
+        setTimeout(() => {
+            this.projectRequestModalShown = true; // Reopen the main modal
+        }, 200);
+
+    }
+
+    @action
+    closeSendMessagePrompt() {
+        this.showSendMessagePrompt = false; // Hide confirmation modal without reopening
+    }
+
+    @action
+    toggleProjectRequestModal() {
+        this.projectRequestModalShown = !this.projectRequestModalShown;
+    }
+
+    @action
+    updateselectedPermissions(permission: string) {
+        this.selectedPermissions = permission;
+    }
+
+    @action
+    setActiveTab(tabName: string) {
+        this.activeTab = tabName;
+    }
+
+
+    @action
+    resetFields() {
+        this.selectedPermissions = 'write';
+        this.bccSender = false;
+        this.replyTo = false;
+    }
+
+    @task
+    @waitFor
+    async handleSend() {
+        try {
+            if (this.activeTab === 'send-message') {
+                await taskFor(this._sendUserMessage).perform();
+            } else if (this.activeTab === 'request-access') {
+                await taskFor(this._sendNodeRequest).perform();
+            }
+
+            this.toast.success(
+                this.intl.t('institutions.dashboard.object-list.request-project-message-modal.message_sent_success'),
+            );
+            this.resetFields();
+        } catch (error) {
+            const errorDetail = error?.errors?.[0]?.detail.user || error?.errors?.[0]?.detail || '';
+            const errorCode = parseInt(error?.errors?.[0]?.status, 10);
+
+            if (errorCode === 400 && errorDetail.includes('does not have Access Requests enabled')) {
+                // Product wanted special handling for this error that involve a second pop-up modal
+                // Timeout to allow the modal to exit, can't have two OSFDialogs open at same time
+                setTimeout(() => {
+                    this.showSendMessagePrompt = true; // Timeout to allow the modal to exit
+                }, 200);
+            } else if ([400, 403].includes(errorCode)) {
+                // Handle more specific errors 403s could result due if a project quickly switches it's institution
+                this.toast.error(errorDetail);
+            } else if (errorDetail.includes('Request was throttled')) {  // 429 response not in JSON payload.
+                this.toast.error(errorDetail);
+            } else {
+                this.toast.error(
+                    this.intl.t('institutions.dashboard.object-list.request-project-message-modal.message_sent_failed'),
+                );
+            }
+        } finally {
+            this.projectRequestModalShown = false; // Close the main modal
+        }
+    }
+
+    @task
+    @waitFor
+    async _sendUserMessage() {
+        const userMessage = this.store.createRecord('user-message', {
+            messageText: this.messageText.trim(),
+            messageType: MessageTypeChoices.InstitutionalRequest,
+            bccSender: this.bccSender,
+            replyTo: this.replyTo,
+            institution: this.args.institution,
+            user: this.selectedUserOsfGuid,
+        });
+        await userMessage.save();
+    }
+
+    @task
+    @waitFor
+    async _sendNodeRequest() {
+        const nodeRequest = this.store.createRecord('node-request', {
+            comment: this.messageText.trim(),
+            requestType: RequestTypeChoices.InstitutionalRequest,
+            requestedPermissions: this.selectedPermissions,
+            bccSender: this.bccSender,
+            replyTo: this.replyTo,
+            institution: this.args.institution,
+            messageRecipient: this.selectedUserOsfGuid,
+            target: this.selectedNodeId,
+        });
+        await nodeRequest.save();
+    }
+
+    get selectedUserOsfGuid() {
+        const url = new URL(this.selectedUserId);
+        const pathSegments = url.pathname.split('/').filter(Boolean);
+        return pathSegments[pathSegments.length - 1] || ''; // Last non-empty segment
+    }
+
 }

app/institutions/dashboard/-components/object-list/contributors-field/component.ts

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import Intl from 'ember-intl/services/intl';
+import { action } from '@ember/object';
 
 import InstitutionModel from 'ember-osf-web/models/institution';
 import SearchResultModel from 'ember-osf-web/models/search-result';
@@ -10,6 +11,7 @@ import { getOsfmapObjects, getSingleOsfmapValue, hasOsfmapValue } from 'ember-os
 interface ContributorsFieldArgs {
     searchResult: SearchResultModel;
     institution: InstitutionModel;
+    projectRequestModal: (contributor: any) => void;
 }
 
 const roleIriToTranslationKey: Record<AttributionRoleIris, string> = {
@@ -48,12 +50,19 @@ export default class InstitutionalObjectListContributorsField extends Component<
             const contributor = getContributorById(contributors, getSingleOsfmapValue(attribution, ['agent']));
             const roleIri: AttributionRoleIris = getSingleOsfmapValue(attribution, ['hadRole']);
             return {
-                name: getSingleOsfmapValue(contributor,['name']),
+                name: getSingleOsfmapValue(contributor, ['name']) || this.intl.t('general.unknownContributor'),
+                userId: contributor['@id'],
+                nodeId: searchResult.indexCard.get('osfGuid'),
                 url: getSingleOsfmapValue(contributor, ['identifier']),
                 permissionLevel: this.intl.t(roleIriToTranslationKey[roleIri]),
             };
         });
     }
+
+    @action
+    handleOpenModal(contributor: any) {
+        this.args.projectRequestModal(contributor);
+    }
 }
 
 function hasInstitutionAffiliation(contributors: any[], attribution: any, institutionIris: string[]) {

app/institutions/dashboard/-components/object-list/contributors-field/styles.scss

@@ -0,0 +1,14 @@
+
+.icon-message {
+    opacity: 0;
+    color: $color-text-blue-dark;
+    background-color: inherit !important;
+    border: 0 !important;
+    box-shadow: 0 !important;
+}
+
+.icon-message:hover {
+    opacity: 1;
+    background-color: inherit !important;
+}
+

app/institutions/dashboard/-components/object-list/contributors-field/template.hbs

@@ -7,6 +7,13 @@
         </OsfLink>
         {{t 'institutions.dashboard.object-list.table-items.permission-level' permissionLevel=contributor.permissionLevel}}
     </div>
+    <Button
+        local-class='icon-message'
+        aria-label={{t 'institutions.dashboard.request_project_message_modal.open_aria_label'}}
+        {{on 'click' (fn this.handleOpenModal contributor)}}
+    >
+        <FaIcon @icon='comment' />
+    </Button>
 {{else}}
     <div>
         {{t 'institutions.dashboard.object-list.table-items.no-contributors'}}

app/institutions/dashboard/-components/object-list/styles.scss

@@ -129,6 +129,74 @@
     padding-left: 10px;
 }
 
+.message-textarea {
+    min-width: 450px;
+    min-height: 280px;
+}
+
+.message-label {
+    display: block;
+}
+
+.checkbox-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px;
+}
+
+.checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+}
+
+.radiobox-container {
+    gap: 20px;
+}
+
+.radiobox-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+}
+
+.tab-container {
+    display: flex;
+    border-bottom: 1px solid $color-border-gray;
+    margin-bottom: 1rem;
+}
+
+.tab-button {
+    flex: 1;
+    padding: 10px;
+    text-align: center;
+    cursor: pointer;
+    background: $color-bg-gray;
+    border: 0;
+    border-bottom: 2px solid transparent;
+
+    &.active {
+        border-bottom: 2px solid $color-border-gray;
+        font-weight: bold;
+    }
+
+    &:hover {
+        background: $color-bg-gray;
+    }
+}
+
+.tab-pane {
+    padding: 1rem;
+    background: $color-border-white;
+}
+
+.request-modal {
+    max-width: min-content;
+}
+
 .download-dropdown-content {
     display: flex;
     flex-direction: column;