PM-4660: restore create group link in challenge editor

src/apps/work/src/pages/challenges/ChallengeEditorPage/components/GroupsField/GroupsField.module.scss

@@ -0,0 +1,35 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    align-items: flex-end;
+    display: flex;
+    gap: 12px;
+}
+
+.selectField {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.createGroupLink {
+    color: $link-blue-dark;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 20px;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus {
+        color: #2a62d5;
+        outline: none;
+        text-decoration: underline;
+    }
+}
+
+@media (max-width: 767px) {
+    .container {
+        align-items: stretch;
+        flex-direction: column;
+    }
+}

src/apps/work/src/pages/challenges/ChallengeEditorPage/components/GroupsField/GroupsField.spec.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable import/no-extraneous-dependencies, ordered-imports/ordered-imports */
+import '@testing-library/jest-dom'
+import {
+    render,
+    screen,
+} from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+
+import { WorkAppContext } from '../../../../../lib/contexts/WorkAppContext'
+import type { WorkAppContextModel } from '../../../../../lib/models/WorkAppContextModel.model'
+
+import { GroupsField } from './GroupsField'
+
+jest.mock('../../../../../config/routes.config', () => ({
+    groupsRouteId: 'groups',
+    rootRoute: '/work',
+}))
+jest.mock('../../../../../lib/components/form', () => ({
+    FormGroupsSelect: () => <div data-testid='groups-select'>Groups select</div>,
+}))
+
+const defaultContextValue: WorkAppContextModel = {
+    isAdmin: false,
+    isAnonymous: false,
+    isCopilot: false,
+    isManager: false,
+    isReadOnly: false,
+    loginUserInfo: undefined,
+    userRoles: [],
+}
+
+function renderGroupsField(
+    contextOverrides?: Partial<WorkAppContextModel>,
+): void {
+    render(
+        <WorkAppContext.Provider value={{
+            ...defaultContextValue,
+            ...contextOverrides,
+        }}
+        >
+            <MemoryRouter>
+                <GroupsField />
+            </MemoryRouter>
+        </WorkAppContext.Provider>,
+    )
+}
+
+describe('GroupsField', () => {
+    it('shows the create group link for users who can manage groups', () => {
+        renderGroupsField({
+            isManager: true,
+        })
+
+        expect(screen.getByTestId('groups-select'))
+            .toBeInTheDocument()
+
+        const createGroupLink = screen.getByRole('link', {
+            name: 'Create Group',
+        })
+
+        expect(createGroupLink)
+            .toHaveAttribute('href', '/work/groups')
+        expect(createGroupLink)
+            .toHaveAttribute('rel', 'noreferrer')
+        expect(createGroupLink)
+            .toHaveAttribute('target', '_blank')
+    })
+
+    it('hides the create group link for users who cannot manage groups', () => {
+        renderGroupsField()
+
+        expect(screen.queryByRole('link', {
+            name: 'Create Group',
+        })).not.toBeInTheDocument()
+    })
+})

src/apps/work/src/pages/challenges/ChallengeEditorPage/components/GroupsField/GroupsField.tsx

@@ -1,12 +1,47 @@
-import { FC } from 'react'
+import {
+    FC,
+    useContext,
+} from 'react'
+import { Link } from 'react-router-dom'
 
+import {
+    groupsRouteId,
+    rootRoute,
+} from '../../../../../config/routes.config'
+import { WorkAppContext } from '../../../../../lib/contexts/WorkAppContext'
 import { FormGroupsSelect } from '../../../../../lib/components/form'
 
-export const GroupsField: FC = () => (
-    <FormGroupsSelect
-        label='Groups'
-        name='groups'
-    />
-)
+import styles from './GroupsField.module.scss'
+
+export const GroupsField: FC = () => {
+    const workAppContext = useContext(WorkAppContext)
+    const canManageGroups = workAppContext.isAdmin || workAppContext.isCopilot || workAppContext.isManager
+    const createGroupPath = rootRoute
+        ? `${rootRoute}/${groupsRouteId}`
+        : `/${groupsRouteId}`
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.selectField}>
+                <FormGroupsSelect
+                    label='Groups'
+                    name='groups'
+                />
+            </div>
+            {canManageGroups
+                ? (
+                    <Link
+                        className={styles.createGroupLink}
+                        rel='noreferrer'
+                        target='_blank'
+                        to={createGroupPath}
+                    >
+                        Create Group
+                    </Link>
+                )
+                : undefined}
+        </div>
+    )
+}
 
 export default GroupsField