Move test annotations to edit phase section

frontend_v2/src/app/components/challenge/challengephases/editphasemodal/editphasemodal.component.html

@@ -172,23 +172,7 @@
         </div>
       </div>
     </div>
-
-      <div class="row row-lr-margin">
-        <div class="col-lg-6 col-md-6 col-sm-12 col-lr-pad">
-          <app-input
-            [name]="'test_annotation_file'"
-            [label]="'test_annotation'"
-            [editPhaseDetails]="editPhaseDetails"
-            [placeholder]="''"
-            [type]="'file'"
-            [value]="''"
-            #formmodal
-          ></app-input>
-        </div>
-      </div>
-
-      <div class="row row-lr-margin"></div>
-    </div>
+
     <div class="buttons">
       <div class="col-md-12 col-sm-12 col-lr-pad">
         <div class="align-left text-med-black fw-regular">

frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html

@@ -137,6 +137,15 @@ <h5 class="fw-light">Challenge Settings</h5>
       <!-- Edit Phase Details -->
       <mat-tab label="Phase and Leaderboard Details"> 
         <div class="row settings-section">
+          <div class="col-md-11 col-sm-11 col-xs-10" *ngIf="isChallengeHost">
+            <div class="fw-light">
+              <p class="fs-16">
+                <strong> Note: </strong> For test annotations > 100MB, please use
+                <a href=" https://cli.eval.ai/#challenge-annotations"><strong class="blue-text"> evalai-cli </strong></a> to update the test annotations. 
+                <a (click)="showCliInstructions()"><strong class="blue-text">View Instructions</strong></a>
+              </p>
+            </div>
+          </div>
           <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
             <span class="fw-light fs-18">Edit Phase</span>
           </div>
@@ -171,6 +180,13 @@ <h5 class="fw-light">Challenge Settings</h5>
                 <a class="pointer fs-20" (click)="toggleSubmissionVisibility()">
                   <i class="{{ submissionVisibility.icon }}" aria-hidden="true"> </i>
                 </a>
+                <br /><br />
+                <span class="fs-16 fw-light">
+                  <strong class="text-light-black">Test Annotations </strong>
+                </span>
+                <a class="pointer fs-15" (click)="editTestAnnotations()">
+                  <i class="fa fa-file" aria-hidden="true"> </i>
+                </a>
               </div>
 
            </div>

frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.scss

@@ -25,6 +25,10 @@ input {
   border-bottom: none;
 }
 
+p {
+  margin:0px 0px 25px 0px;  
+}
+
 :host ::ng-deep .mat-tab-label .mat-tab-label-content{
   font-weight: $fw-light !important;
   font-size: $fs-16 !important;

frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.ts

@@ -730,6 +730,19 @@ export class ChallengesettingsComponent implements OnInit, OnDestroy {
     };
   } 
 
+  showCliInstructions() {
+    const SELF = this;
+    /**
+     * Parameters of the modal
+    */
+      const PARAMS = {
+      title: 'Cli Instructions for updating test annotations',
+      label: 'evaluation_details',
+      isCliInstructions: true
+    };
+    SELF.globalService.showModal(PARAMS);
+  }
+
   /**
    * Edit Phase Details function
    */
@@ -914,6 +927,52 @@ export class ChallengesettingsComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Edit test annotations of the phase
+   */
+  editTestAnnotations() {
+    const SELF = this;
+    SELF.apiCall = (params) => {
+      const FORM_DATA: FormData = new FormData();
+      FORM_DATA.append('test_annotation', params['test_annotation']);
+        SELF.apiService
+        .patchFileUrl(
+          SELF.endpointsService.updateChallengePhaseDetailsURL(SELF.selectedPhase['challenge'], SELF.selectedPhase['id']),
+          FORM_DATA
+        )
+        .subscribe(
+          (data) => {
+            SELF.globalService.showToast('success', 'The test annotations are successfully updated!');
+          },
+          (err) => {
+            SELF.globalService.showToast('error', err);
+          },
+          () => this.logger.info('EDIT-TEST-ANNOTATION-FINISHED')
+        );
+    };
+
+    /**
+     * Parameters of the modal
+     */
+    const PARAMS = {
+      title: 'Edit Test Annotations',
+      confirm: 'Submit',
+      deny: 'Cancel',
+      form: [
+        {
+          name: 'testAnnotation',
+          isRequired: true,
+          label: 'test_annotation',
+          placeholder: '',
+          type: 'file',
+          value: '',
+        },
+      ],
+      confirmCallback: SELF.apiCall,
+    };
+    SELF.globalService.showModal(PARAMS);
+  }
+
   // Edit Leaderboard Details ->
 
   /**

frontend_v2/src/app/components/challenge/challengeviewallsubmissions/challengeviewallsubmissions.component.html

@@ -7,7 +7,7 @@
           <p class="fs-16">
             <strong> Note: </strong> Results are greater than 5k, please use the 
             <a href="https://eval.ai/api/docs/#operation/get_all_submissions_for_a_challenge"><strong class="blue-text"> get_all_submissions </strong></a> API to download results.
-            </p>
+          </p>
         </div>
     </div>
 </div>

frontend_v2/src/app/components/utility/modal/modal.component.html

@@ -1,10 +1,13 @@
 <div class="modal-container">
   <div class="modal-card">
     <div class="modal-wrapper">
+      <div *ngIf="isCliInstructions">
+        <i class="fa fa-times fs-22 pointer" aria-hidden="true" (click)="denied()"> </i>
+      </div>
       <div class="title">
         {{ title }}
       </div>
-      <div class="modal-content">
+      <div class="modal-content" *ngIf="!isCliInstructions">
         <div class="content">
           {{ content }}
         </div>
@@ -46,7 +49,7 @@
           ><br />
         </div>
       </div>
-      <div class="buttons">
+      <div class="buttons" *ngIf="!isCliInstructions">
         <ul class="inline-list pointer">
           <li>
             <a appClickstop (click)="denied()" class="dark-link pointer">
@@ -65,6 +68,58 @@
           </li>
         </ul>
       </div>
+      <div class="row row-lr-margin" *ngIf="isCliInstructions">
+        <div class="modal-content">
+          <ol>
+            <li class="content">
+              Install evalai-cli<br />
+              <code #install_evalai>$ pip install evalai{{ cliVersion }}</code>
+              <button
+                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
+                value="pip install &quot;evalai{{ cliVersion }}&quot;"
+                (click)="copyTextToClipboard(install_evalai)"
+              >
+                <i
+                  class="fa fa-clipboard"
+                  aria-hidden="true"
+                  alt="Copy to
+                  clipboard."
+                ></i>
+              </button>
+            </li>
+            <li class="content">
+              Add your EvalAI account token to evalai-cli<br />
+              <code #configure_token>$ evalai set_token {{ authToken }}</code>
+              <button
+                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
+                (click)="copyTextToClipboard(configure_token)"
+              >
+                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
+              </button>
+            </li>
+            <li class="content">
+              Upload challenge phase annotations<br />
+              <code #evalai_annotation>$ evalai challenge &lt;challenge_id&gt; phase &lt;phase_id&gt; submit --file annotation.json --annotation</code>
+              <button
+                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
+                (click)="copyTextToClipboard(evalai_annotation)"
+              >
+                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
+              </button>
+            </li>
+            <li class="content">
+              Upload challenge phase annotations > 400MB<br />
+              <code #evalai_annotation_large>$ evalai challenge &lt;challenge_id&gt; phase &lt;phase_id&gt; submit --file annotation.json --large --annotation</code>
+              <button
+                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
+                (click)="copyTextToClipboard(evalai_annotation_large)"
+              >
+                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
+              </button>
+            </li>
+          </ol>
+        </div>
+      </div>
     </div>
   </div>
 </div>

frontend_v2/src/app/components/utility/modal/modal.component.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './mixins.scss';
 
 .editor-validation-message {
   color: $highlight;
@@ -10,3 +11,11 @@
     margin-right: 20px;
   }
 }
+
+code {
+  max-width: 700px;
+}
+
+.content {
+  width: 770px;
+}

frontend_v2/src/app/components/utility/modal/modal.component.ts

@@ -50,6 +50,11 @@ export class ModalComponent implements OnInit {
    */
   isEditorRequired = false;
 
+  /**
+   * Is Cli instructions modal
+   */
+  isCliInstructions = false;
+
   /**
    * Modal edit content
    */
@@ -123,6 +128,16 @@ export class ModalComponent implements OnInit {
     width: '720px',
   };
 
+  /**
+   * Cli version
+   */
+  cliVersion = '';
+
+   /**
+    * Auth token
+    */
+  authToken = '';
+
   /**
    * Modal form items
    */
@@ -187,6 +202,9 @@ export class ModalComponent implements OnInit {
       if (this.params['form'] && this.params['form'].length > 0) {
         this.form = this.params['form'];
       }
+      if (this.params['isCliInstructions']) {
+        this.isCliInstructions = this.params['isCliInstructions'];
+      }
     }
 
     this.authService.change.subscribe((details) => {
@@ -196,7 +214,13 @@ export class ModalComponent implements OnInit {
     if (this.isEditorRequired || this.isButtonDisabled) {
       this.isDisabled = false;
     }
-    this.challengeService.currentChallenge.subscribe((challenge) => (this.challenge = challenge));
+    this.challengeService.currentChallenge.subscribe((challenge) => {
+      this.challenge = challenge;
+      if (this.challenge.cli_version !== null) {
+        this.cliVersion = this.challenge.cli_version;
+      }
+    });
+    this.authToken = this.globalService.getData('refreshJWT');
   }
 
   /**
@@ -237,6 +261,25 @@ export class ModalComponent implements OnInit {
     self.confirmCallback(PARAMS);
   }
 
+  /**
+   * Copy text to clipboard
+   */
+  copyTextToClipboard(ref: HTMLElement) {
+    const textBox = document.createElement('textarea');
+    textBox.style.position = 'fixed';
+    textBox.style.left = '0';
+    textBox.style.top = '0';
+    textBox.style.opacity = '0';
+    textBox.value = ref.innerText.split('$ ')[1];
+    document.body.appendChild(textBox);
+    textBox.focus();
+    textBox.select();
+    document.execCommand('copy');
+    document.body.removeChild(textBox);
+
+    this.globalService.showToast('success', 'Command copied to clipboard');
+  }
+
   /**
    * Modal Denied.
    */