Frontend_V2: Add note for unapproved challenge(Cloud-CV#3556)

Co-authored-by: Rishabh Jain <[email protected]>

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

@@ -5,6 +5,17 @@
     <div class="challenge-content">
       <div class="mid-container">
         <div class="challenge-container">
+          <section class="ev-sm-container  ev-view" *ngIf="isChallengeHost && !isApprovedByAdmin">
+            <div class="ev-md-container ev-card-panel ev-z-depth-5 ev-challenge-banner">
+                <div class="row margin-bottom-cancel">
+                    <div class="col s12 m12 l12">Thank you for successfully creating a challenge on EvalAI.
+                        The challenge is ready to accept submissions from host the team. Please note that the submissions from the host team won't be visible on leaderboard until you mark them as baseline submission.
+                        In order for the challenge to accept submissions from the public, it requires approval from the EvalAI Team. Please reach out to us at 
+                        <a href="mailto:[email protected]" class="blue-text">[email protected]</a> for challenge approval.
+                    </div>
+                </div>
+            </div>
+          </section>
           <div class="challenge-card">
             <div class="top-card-container ev-card-panel">
               <div class="row card-img-row">

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

@@ -37,6 +37,11 @@ export class ChallengeComponent implements OnInit {
    */
   isChallengeHost = false;
 
+  /**
+   * Is challenge approved by admin
+   */  
+  isApprovedByAdmin = false;
+
   /**
    * Is participated in Challenge
    */
@@ -107,6 +112,7 @@ export class ChallengeComponent implements OnInit {
       this.challenge = challenge;
       this.isForumEnabled = challenge.enable_forum;
       this.forumURL = challenge.forum_url;
+      this.isApprovedByAdmin = challenge.approved_by_admin;
       // update meta tag
       SELF.meta.updateTag({
         property: 'og:title',

frontend_v2/src/app/components/not-found/not-found.component.scss

@@ -5,7 +5,7 @@
   background: $red-light;
   color: white;
   overflow: hidden;
-  position: absolute;
+  position: fixed;
   top: 0;
   width: 100%;
   left: 0;

frontend_v2/src/app/services/challenge.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { NGXLogger } from 'ngx-logger';
+import { Router } from '@angular/router';
 
 // import service
 import { ApiService } from './api.service';
@@ -50,7 +51,8 @@ export class ChallengeService {
     private globalService: GlobalService,
     private authService: AuthService,
     private endpointsService: EndpointsService,
-    private logger: NGXLogger
+    private logger: NGXLogger,
+    private router: Router
   ) {}
 
   /**
@@ -183,6 +185,9 @@ export class ChallengeService {
       },
       (err) => {
         SELF.globalService.handleApiError(err);
+        if(err.error.error == "Challenge does not exist!") {
+          this.router.navigate(['not-found']);
+        }
       },
       () => {
         this.logger.info('Challenge', id, 'fetched!');