Hide download buttons for challenges a user isn’t involved with

jmgasper · jmgasper · commit 3d98a117cbd0 · 2023-06-01T16:08:16.000+10:00
#1538 #1539
diff --git a/src/components/ChallengeEditor/ChallengeViewTabs/index.js b/src/components/ChallengeEditor/ChallengeViewTabs/index.js
@@ -50,6 +50,12 @@ const ChallengeViewTabs = ({
   onApproveChallenge
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
+  const isLoggedInUserHaveChallengeAccess = useMemo(
+    () =>
+      loggedInUser &&
+      !!_.find(challengeResources, { memberId: `${loggedInUser.userId}` }),
+    [loggedInUser, challengeResources]
+  )
 
   const registrants = useMemo(() => {
     const { resourceRoles } = metadata
@@ -258,7 +264,12 @@ const ChallengeViewTabs = ({
         <Registrants challenge={challenge} registrants={registrants} />
       )}
       {selectedTab === 2 && (
-        <Submissions challenge={challenge} submissions={submissions} token={token} />
+        <Submissions
+          challenge={challenge}
+          submissions={submissions}
+          token={token}
+          isLoggedInUserHaveChallengeAccess={isLoggedInUserHaveChallengeAccess}
+        />
       )}
     </div>
   )
diff --git a/src/components/ChallengeEditor/Submissions/Submissions.module.scss b/src/components/ChallengeEditor/Submissions/Submissions.module.scss
@@ -22,9 +22,9 @@ $base-unit: 5px;
   margin-right: auto;
   display: flex;
   justify-content: center;
-  gap: 40px;
 
-  @media (max-width: 1420px) {
+  @media (max-width: 1488px) {
+    gap: 40px;
     flex-direction: column;
     align-items: center;
   }
@@ -197,7 +197,7 @@ $base-unit: 5px;
 .empty-left {
   flex: 1;
 
-  @media (max-width: 1420px) {
+  @media (max-width: 1488px) {
     display: none;
   }
 }
@@ -209,8 +209,9 @@ $base-unit: 5px;
   gap: 40px;
   flex: 1;
   padding-right: 20px;
+  padding-left: 40px;
 
-  @media (max-width: 1420px) {
+  @media (max-width: 1488px) {
     justify-content: center;
     padding-right: 0;
   }
@@ -384,8 +385,8 @@ $base-unit: 5px;
 .submissionsContainer {
   display: flex;
   flex-direction: column;
-  max-width: 1300px;
-  width: 100%;
+  width: auto;
+  max-width: 100%;
   overflow: auto;
 }
 
diff --git a/src/components/ChallengeEditor/Submissions/index.js b/src/components/ChallengeEditor/Submissions/index.js
@@ -212,9 +212,9 @@ class SubmissionsComponent extends React.Component {
   }
 
   render () {
-    const { challenge, token } = this.props
+    const { challenge, token, isLoggedInUserHaveChallengeAccess } = this.props
     const { checkpoints, track, type, tags } = challenge
-    const haveManagePermission = checkManageRoles(token)
+    const haveManagePermission = checkManageRoles(token) && isLoggedInUserHaveChallengeAccess
 
     const { field, sort } = this.getSubmissionsSortParam()
     const revertSort = sort === 'desc' ? 'asc' : 'desc'
@@ -595,7 +595,8 @@ class SubmissionsComponent extends React.Component {
 
 SubmissionsComponent.defaultProps = {
   submissions: [],
-  token: ''
+  token: '',
+  isLoggedInUserHaveChallengeAccess: false
 }
 
 SubmissionsComponent.propTypes = {
@@ -611,7 +612,8 @@ SubmissionsComponent.propTypes = {
     phases: PT.any
   }).isRequired,
   submissions: PT.arrayOf(PT.shape()),
-  token: PT.string
+  token: PT.string,
+  isLoggedInUserHaveChallengeAccess: PT.bool
 }
 
 export default SubmissionsComponent
