Prod deploy - Review context, special roles

.circleci/config.yml

@@ -228,7 +228,7 @@ workflows:
                       branches:
                           only:
                               - dev
-                              - flexi-talent
+                              - copilot_reviewer
                       tags:
                           only: /^dev-.*/
 

README.md

@@ -556,6 +556,7 @@ The following summarizes the various [apps](#adding-a-new-platform-ui-applicatio
 - [Gamification Admin](#gamification-admin)
 - [Learn](#learn)
 - [Self Service](#self-service)
+- [Status](#status)
 
 ## Platform App
 
@@ -599,3 +600,13 @@ Application that allows customers to submit/start challenges self-service.
 
 [Work README TBD](./src/apps/self-service/README.md)
 [Work Routes](./src/apps/self-service/src/self-service.routes.tsx)
+
+## Status
+
+Administrator-only operational visibility for ECS services and tasks, API
+traffic and failures, SendGrid acceptance/activity, and the Topcoder services
+RDS instance. The app is read-only and loads only the active tab or expanded
+diagnostic section.
+
+[Status README](./src/apps/status/README.md)
+[Status Routes](./src/apps/status/src/status-app.routes.tsx)

src/.eslintrc.js

@@ -97,10 +97,6 @@ module.exports = {
           'error',
           'as-needed',
         ],
-        complexity: [
-          'error',
-          14,
-        ],
         'import/extensions': 'off',
         'import/no-named-default': 'off',
         'import/prefer-default-export': 'off',

src/apps/admin/src/lib/components/ChallengeList/ChallengeList.spec.ts

@@ -2,6 +2,24 @@ import {
     canOpenReviewUi,
     getReviewUiChallengeUrl,
 } from './reviewUiLink'
+import { getChallengeSubTrackSuffix } from './challengeTypeTrack'
+
+describe('getChallengeSubTrackSuffix', () => {
+    it('returns an empty suffix when legacy data is missing', () => {
+        expect(getChallengeSubTrackSuffix(undefined))
+            .toBe('')
+    })
+
+    it('returns an empty suffix when the legacy sub-track is missing', () => {
+        expect(getChallengeSubTrackSuffix({}))
+            .toBe('')
+    })
+
+    it('formats a legacy sub-track', () => {
+        expect(getChallengeSubTrackSuffix({ subTrack: 'DEVELOP' }))
+            .toBe(' / DEVELOP')
+    })
+})
 
 describe('ChallengeList review UI helpers', () => {
     describe('canOpenReviewUi', () => {

src/apps/admin/src/lib/components/ChallengeList/ChallengeList.tsx

@@ -28,6 +28,7 @@ import {
     canOpenReviewUi,
     getReviewUiChallengeUrl,
 } from './reviewUiLink'
+import { getChallengeSubTrackSuffix } from './challengeTypeTrack'
 import styles from './ChallengeList.module.scss'
 
 export interface ChallengeListProps {
@@ -323,10 +324,7 @@ const ChallengeList: FC<ChallengeListProps> = props => {
                             {typeName}
                             <br />
                             {trackName}
-                            {' '}
-                            {challenge.legacy.subTrack
-                                ? ` / ${challenge.legacy.subTrack}`
-                                : ''}
+                            {getChallengeSubTrackSuffix(challenge.legacy)}
                         </div>
                     )
                 },

src/apps/admin/src/lib/components/ChallengeList/challengeTypeTrack.ts

@@ -0,0 +1,5 @@
+import { Challenge } from '../../models'
+
+export const getChallengeSubTrackSuffix = (
+    legacy: Challenge['legacy'],
+): string => (legacy?.subTrack ? ` / ${legacy.subTrack}` : '')

src/apps/admin/src/lib/models/challenge-management/Challenge.ts

@@ -60,8 +60,8 @@ export interface Challenge {
     typeId: string
     /** Challenge track. */
     track: ChallengeTrack
-    legacy: {
-        subTrack: string
+    legacy?: {
+        subTrack?: string
     }
     /** Challenge status. */
     status: ChallengeStatus

src/apps/customer-portal/src/pages/flexi-talent/FlexiTalentPage/FlexiTalentPage.module.scss

@@ -416,6 +416,13 @@
     color: $black-80;
 }
 
+.detailCapacity {
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    white-space: normal;
+}
+
 .memberTimePill {
     display: inline-flex;
     align-items: center;

src/apps/customer-portal/src/pages/flexi-talent/components/MembersView/MembersView.spec.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports, sort-keys */
 import '@testing-library/jest-dom'
 
+import { readFileSync } from 'fs'
 import React from 'react'
 import {
     fireEvent,
@@ -20,6 +21,18 @@ import { MembersView } from './MembersView'
 const mockGetFlexiMemberSummary = getFlexiMemberSummary as jest.Mock
 const mockGetFlexiMemberList = getFlexiMemberList as jest.Mock
 const mockGetFlexiMemberDetail = getFlexiMemberDetail as jest.Mock
+const flexiTalentPageStyles = readFileSync(
+    `${__dirname}/../../FlexiTalentPage/FlexiTalentPage.module.scss`,
+    'utf8',
+)
+const detailCapacityWrappingPattern = [
+    '[.]detailCapacity \\{',
+    '[^}]*box-sizing: border-box;',
+    '[^}]*max-width: 100%;',
+    '[^}]*overflow-wrap: anywhere;',
+    '[^}]*white-space: normal;',
+    '[^}]*\\}',
+].join('')
 
 jest.mock('~/apps/admin/src/lib/components/common/Pagination', () => ({
     Pagination: () => <div>pagination</div>,
@@ -53,6 +66,13 @@ jest.mock('../MemberHistoryModal', () => ({
     MemberHistoryModal: () => undefined,
 }))
 
+describe('MembersView styles', () => {
+    it('allows long assignment labels to wrap within the member detail card', () => {
+        expect(flexiTalentPageStyles)
+            .toMatch(new RegExp(detailCapacityWrappingPattern))
+    })
+})
+
 describe('MembersView', () => {
     beforeEach(() => {
         jest.clearAllMocks()

src/apps/customer-portal/src/pages/project-showcase/ProjectShowcasePostPage/ShowcasePostMedia/ShowcasePostMediaGallery.module.scss

@@ -9,13 +9,16 @@
     background: rgba(0, 0, 0, 0.9);
 }
 
-.mainFrame {
+.mainFrame,
+.zoomFrame {
     position: relative;
     width: min(100%, 1000px);
+    height: min(100%, 90vh);
     max-height: min(100%, 90vh);
     display: flex;
     flex-direction: column;
     padding: 120px 0 0;
+    box-sizing: border-box;
 }
 
 .close {
@@ -28,7 +31,78 @@
     cursor: pointer;
 }
 
-.mainContent {
+.zoomOpen {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border: 0;
+    border-radius: 50%;
+    background: rgba($tc-white, 0.12);
+    color: $tc-white;
+    cursor: pointer;
+    transition: background 0.15s ease;
+
+    &:hover {
+        background: rgba($tc-white, 0.22);
+    }
+
+    &:active {
+        background: rgba($tc-white, 0.18);
+    }
+}
+
+.zoomToolbar {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.zoomControl {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    padding: 0 8px;
+    border: 0;
+    border-radius: 8px;
+    background: rgba($tc-white, 0.12);
+    color: $tc-white;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.15s ease;
+
+    &:hover:not(:disabled) {
+        background: rgba($tc-white, 0.22);
+    }
+
+    &:disabled {
+        opacity: 0.4;
+        cursor: default;
+    }
+}
+
+.zoomLevel {
+    min-width: 48px;
+    color: $tc-white;
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.mainContent,
+.zoomContent {
     display: flex;
     flex-direction: column;
     gap: 24px;
@@ -37,27 +111,49 @@
     position: relative;
 }
 
-.galleryMedia {
+.galleryMedia,
+.zoomMedia {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 340px;
+    flex: 1;
+    min-height: 0;
     padding: 1rem;
     border-radius: 1rem;
     background-color: var(--neutral-100);
     overflow: hidden;
 }
 
+.zoomMedia {
+    display: block;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    align-items: unset;
+    justify-content: unset;
+
+    @include scrollbar;
+}
+
 .galleryMedia img,
 .galleryMedia video {
     max-width: 100%;
-    max-height: 74vh;
+    max-height: 100%;
+    width: auto;
+    height: auto;
     object-fit: contain;
 }
 
 .galleryImage {
     width: auto;
     height: auto;
+    display: block;
+}
+
+.zoomImage {
+    display: block;
+    max-width: none;
+    height: auto;
+    margin: 0 auto;
 }
 
 .galleryPlaceholder {
@@ -118,10 +214,10 @@
     }
 }
 
-
 .galleryThumbnails {
     display: flex;
     align-items: flex-start;
+    flex-shrink: 0;
     gap: $sp-4;
     height: 160px;
     width: 100%;