Merge pull request #554 from topcoder-platform/dev

3.0 TCA Certifications - 2023-03-01 -> master

Author: testflyjets

README.md

@@ -153,6 +153,12 @@ By overriding the app to use <b>port 443</b>, you can use the authorized URL and
 
 >**NOTE:** Mac users will require running the app with elevated permissions in order to use a port lower than 500.
 
+Easy way to overcome elevated permissions is to make use of:
+
+```
+sudo setcap 'cap_net_bind_service=+ep' `which node`
+```
+
 For easier development, it is recommended that you add this certificate to your trusted root authorities and as a trused cert in your browser. Google your browser and OS for more info on how to trust cert authorities.
 
 Otherwise, you will need to override the exception each time you load the site. Firefox users may need to user an incognito browser in order to override the exception.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topcoder-platform/platform-ui",
-    "version": "2.0.7",
+    "version": "3.0.0",
     "private": true,
     "scripts": {
         "dev": "yarn react-app-rewired start",
@@ -42,6 +42,7 @@
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.37",
         "prop-types": "^15.8.1",
+        "qrcode.react": "^3.1.0",
         "qs": "^6.11.0",
         "rc-checkbox": "^2.3.2",
         "react": "^18.2.0",

src-ts/.eslintrc.js

@@ -73,7 +73,7 @@ module.exports = {
         ],
         'complexity': [
             'error',
-            11
+            14
         ],
         'import/extensions': 'off',
         'import/no-named-default':  'off',

src-ts/App.tsx

@@ -3,7 +3,7 @@ import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
 import { Header } from './header'
-import { routeContext, RouteContextData } from './lib'
+import { routeContext, RouteContextData, useViewportUnitsFix } from './lib'
 
 const App: FC<{}> = () => {
 
@@ -12,6 +12,8 @@ const App: FC<{}> = () => {
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => getRouteElement(route))
 
+    useViewportUnitsFix()
+
     return (
         <>
             <Header />

src-ts/config/environments/environment.default.config.ts

@@ -2,6 +2,7 @@
 import { EnvironmentConfigModel } from './environment-config.model'
 
 const COMMUNITY_WEBSITE: string = 'https://www.topcoder-dev.com'
+const TCA_WEBSITE: string = 'https://platform-ui.topcoder-dev.com'
 
 export const EnvironmentConfigDefault: EnvironmentConfigModel = {
     ANALYTICS: {
@@ -36,11 +37,13 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: `${COMMUNITY_WEBSITE}/settings/profile`,
         ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/account`,
         API_BASE: `${COMMUNITY_WEBSITE}/api`,
         BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,
         CHALLENGES_PAGE: `${COMMUNITY_WEBSITE}/challenges`,
         GIGS_PAGE: `${COMMUNITY_WEBSITE}/gigs`,
+        TCA: `${TCA_WEBSITE}`,
         THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,

src-ts/config/environments/environment.prod.config.ts

@@ -3,6 +3,7 @@ import { EnvironmentConfigModel } from './environment-config.model'
 import { EnvironmentConfigDefault } from './environment.default.config'
 
 const COMMUNITY_WEBSITE: string = 'https://www.topcoder.com'
+const TCA_WEBSITE: string = 'https://platform-ui.topcoder.com'
 
 export const EnvironmentConfigProd: EnvironmentConfigModel = {
     ...EnvironmentConfigDefault,
@@ -34,11 +35,13 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
             'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJUb3Bjb2RlciBVc2VyIl0sImlzcyI6Imh0dHBzOi8vYXBpLnRvcGNvZGVyLWRldi5jb20iLCJoYW5kbGUiOiJ0ZXN0MSIsImV4cCI6MjU2MzA3NjY4OSwidXNlcklkIjoiNDAwNTEzMzMiLCJpYXQiOjE0NjMwNzYwODksImVtYWlsIjoidGVzdEB0b3Bjb2Rlci5jb20iLCJqdGkiOiJiMzNiNzdjZC1iNTJlLTQwZmUtODM3ZS1iZWI4ZTBhZTZhNGEifQ.jl6Lp_friVNwEP8nfsfmL-vrQFzOFp2IfM_HC7AwGcg',
     },
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: `${COMMUNITY_WEBSITE}/settings/profile`,
         ACCOUNT_SETTINGS: `${COMMUNITY_WEBSITE}/settings/account`,
         API_BASE: `${COMMUNITY_WEBSITE}/api`,
         BLOG_PAGE: `${COMMUNITY_WEBSITE}/blog`,
         CHALLENGES_PAGE: `${COMMUNITY_WEBSITE}/challenges`,
         GIGS_PAGE: `${COMMUNITY_WEBSITE}/gigs`,
+        TCA: `${TCA_WEBSITE}`,
         THRIVE_PAGE: `${COMMUNITY_WEBSITE}/thrive`,
         USER_PROFILE: `${COMMUNITY_WEBSITE}/members`,
         WP_CONTENT: `${COMMUNITY_WEBSITE}/wp-content`,

src-ts/header/Header.tsx

@@ -145,7 +145,6 @@ const Header: FC = () => {
 
     return (
         <>
-            <div id={navElementId} />
             <div
                 id={PageSubheaderPortalId}
                 className={classNames('full-width-relative', !ready && 'hidden')}

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -38,7 +38,12 @@
             display: inline-flex;
             align-items: center;
             padding: 0;
-
+            @include ltesm {
+                flex: 0 1 auto;
+                &:first-child {
+                    flex: 1 0 auto;
+                }
+            }
             a {
                 @extend .overline;
                 display: block;

src-ts/lib/button/Button.tsx

@@ -8,7 +8,7 @@ import { IconOutline } from '../svgs'
 import '../styles/index.scss'
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-export type ButtonStyle = 'icon' | 'icon-bordered' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonStyle = 'icon' | 'icon-bordered' | 'link' | 'primary' | 'secondary' | 'tertiary' | 'text' | 'outline'
 export type ButtonType = 'button' | 'submit'
 
 export interface ButtonProps {

src-ts/lib/default-member-icon/DefaultMemberIcon.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable max-len */
+import { FC } from 'react'
+
+const DefaultMemberIcon: FC = () => (
+    <svg
+        xmlns='http://www.w3.org/2000/svg'
+        xmlnsXlink='http://www.w3.org/1999/xlink'
+        width='141'
+        height='141'
+        viewBox='0 0 141 141'
+    >
+        <defs>
+            <rect
+                id='path-1'
+                width='140'
+                height='140'
+                x='0.8'
+                y='0.5'
+                rx='306'
+            />
+        </defs>
+        <g fill='none' fillRule='evenodd' stroke='none' strokeWidth='1'>
+            <g transform='translate(-205 -203) translate(205 203)'>
+                <mask id='mask-2' fill='#fff'>
+                    <use xlinkHref='#path-1' />
+                </mask>
+                <use fill='#F0F0F0' xlinkHref='#path-1' />
+                <path
+                    fill='#A3A3AE'
+                    stroke='#A3A3AE'
+                    strokeWidth='3'
+                    d='M118 137.143c0 4.345-3.501 7.857-7.833 7.857H31.833C27.51 145 24 141.488 24 137.143c0-15.714 15.142-30.376 30.62-36.174-8.937-5.54-14.953-15.377-14.953-26.683v-7.857C39.667 49.072 53.697 35 71 35c17.304 0 31.333 14.072 31.333 31.429v7.857c0 11.306-6.016 21.143-14.946 26.683 15.471 5.798 30.613 20.46 30.613 36.174h0z'
+                    mask='url(#mask-2)'
+                    opacity='0.2'
+                />
+            </g>
+        </g>
+    </svg>
+)
+
+export default DefaultMemberIcon

src-ts/lib/default-member-icon/index.ts

@@ -0,0 +1 @@
+export { default as DefaultMemberIcon } from './DefaultMemberIcon'

src-ts/lib/form/Form.tsx

@@ -4,6 +4,7 @@ import {
     Dispatch,
     FocusEvent,
     FormEvent,
+    ReactNode,
     RefObject,
     SetStateAction,
     useEffect,
@@ -31,6 +32,7 @@ import styles from './Form.module.scss'
 
 interface FormProps<ValueType, RequestType> {
     readonly action?: FormAction // only type submit will perform validation
+    readonly children?: ReactNode
     readonly formDef: FormDefinition
     readonly formValues?: ValueType
     readonly onChange?: (inputs: ReadonlyArray<FormInputModel>) => void,
@@ -219,6 +221,8 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
                     onChange={onChange}
                 />
 
+                {props.children}
+
                 <div className={classNames(styles['form-footer'], 'form-footer')}>
                     {!!formError && (
                         <div
@@ -229,7 +233,7 @@ const Form: <ValueType extends FormValue, RequestType extends FormValue>(props:
                             {formError}
                         </div>
                     )}
-                    <div className={styles['button-container']}>
+                    <div className={classNames('form-button-container', styles['button-container'])}>
                         <div className={styles['left-container']}>
                             {secondaryGroupButtons}
                         </div>

src-ts/lib/form/form-definition.model.ts

@@ -13,7 +13,7 @@ export interface FormDefinition {
     readonly groupsOptions?: FormGroupOptions
     readonly shortName?: string
     readonly subtitle?: string
-    readonly successMessage?: string
+    readonly successMessage?: string | boolean
     readonly tabIndexStart?: number
     readonly title?: string
 }

src-ts/lib/form/form-functions/form.functions.ts

@@ -122,10 +122,13 @@ export async function onSubmitAsync<T extends FormValue>(
 
     return savePromise
         .then(() => {
-            const safeSuccessMessage: string = !!successMessage
-                ? successMessage as string
-                : `Your ${shortName || 'data'} has been saved.`
-            toast.success(safeSuccessMessage)
+            if (successMessage !== false) {
+                const safeSuccessMessage: string = !!successMessage
+                    ? successMessage as string
+                    : `Your ${shortName || 'data'} has been saved.`
+                toast.success(safeSuccessMessage)
+            }
+
             onSuccess?.()
         })
         .catch(error => Promise.reject(error.response?.data?.result?.content ?? error.message ?? error))

src-ts/lib/form/form-groups/form-input/input-text/InputText.tsx

@@ -23,6 +23,7 @@ export interface InputTextProps {
     readonly onBlur?: (event: FocusEvent<HTMLInputElement>) => void
     readonly onChange: (event: FocusEvent<HTMLInputElement>) => void
     readonly placeholder?: string
+    readonly readonly?: boolean
     readonly spellCheck?: boolean
     readonly tabIndex: number
     readonly type: InputTextTypes
@@ -53,6 +54,7 @@ const InputText: FC<InputTextProps> = (props: InputTextProps) => {
                 onChange={props.onChange}
                 name={props.name}
                 placeholder={props.placeholder}
+                readOnly={props.readonly}
                 spellCheck={!!props.spellCheck}
                 tabIndex={props.tabIndex}
                 type={props.type || 'text'}

src-ts/lib/form/form-input.model.ts

@@ -44,6 +44,7 @@ export interface FormInputModel {
     readonly notTabbable?: boolean
     options?: ReadonlyArray<FormRadioButtonOption>
     readonly placeholder?: string
+    readonly readonly?: boolean
     readonly spellCheck?: boolean
     readonly title?: string
     touched?: boolean

src-ts/lib/generic-page-moved/GenericPageMoved.module.scss

@@ -0,0 +1,11 @@
+ .wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    h3 {
+        margin-bottom: 32px;
+    }
+}

src-ts/lib/generic-page-moved/GenericPageMoved.tsx

@@ -0,0 +1,35 @@
+import { FC, useEffect } from 'react'
+
+import { Button } from '../button'
+
+import styles from './GenericPageMoved.module.scss'
+
+interface GenericPageMovedProps {
+    pageTitle: string
+    newPageUrl: string
+}
+
+const GenericPageMoved: FC<GenericPageMovedProps> = (props: GenericPageMovedProps) => {
+
+    // setup auto redirect in 5sec.
+    useEffect(() => {
+        const to: ReturnType<typeof setTimeout> = setTimeout(() => {
+            window.location.href = props.newPageUrl
+        }, 5000)
+
+        return () => clearTimeout(to)
+    }, [props.newPageUrl])
+
+    return (
+        <div className={styles.wrap}>
+            <h3>This page has moved.</h3>
+            <Button
+                label={`Navigate to ${props.pageTitle}`}
+                url={props.newPageUrl}
+            />
+            <p>We will automatically redirect you in 5 seconds...</p>
+        </div>
+    )
+}
+
+export default GenericPageMoved

src-ts/lib/generic-page-moved/index.ts

@@ -0,0 +1 @@
+export { default as GenericPageMoved } from './GenericPageMoved'

src-ts/lib/global-config.model.ts

@@ -29,12 +29,14 @@ export interface GlobalConfig {
         CUSTOMER_TOKEN: string
     }
     TOPCODER_URLS: {
+        ACCOUNT_PROFILE: string
         ACCOUNT_SETTINGS: string
         API_BASE: string
         BLOG_PAGE: string
         CHALLENGES_PAGE: string
         GIGS_PAGE: string
         THRIVE_PAGE: string
+        TCA: string
         USER_PROFILE: string
         WP_CONTENT: string
     }

src-ts/lib/hooks/index.ts

@@ -2,4 +2,6 @@ export * from './use-check-is-mobile.hook'
 export * from './use-click-outside.hook'
 export * from './use-on-hover-element.hook'
 export * from './use-storage.hook'
+export * from './use-viewport-units-fix.hook'
 export * from './use-window-size.hook'
+export * from './use-navigate-back.hook'

src-ts/lib/hooks/use-navigate-back.hook.ts

@@ -0,0 +1,20 @@
+import { NavigateFunction, useNavigate } from 'react-router-dom'
+
+export type NavigateBackFunction = (fallbackUrl: string) => void
+type useNavigateBackType = () => NavigateBackFunction
+
+export const useNavigateBack: useNavigateBackType = (): NavigateBackFunction => {
+    const navigate: NavigateFunction = useNavigate()
+    return (fallbackUrl: string) => {
+        const currentPageHref: string = window.location.href
+
+        window.history.go(-1)
+
+        setTimeout(() => {
+            // go back didn't work, navigate to desired fallback url
+            if (window.location.href === currentPageHref) {
+                navigate(fallbackUrl)
+            }
+        }, 30)
+    }
+}

src-ts/lib/hooks/use-storage.hook.ts

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useCallback, useState } from 'react'
+import { Dispatch, MutableRefObject, SetStateAction, useCallback, useRef, useState } from 'react'
 
 type StorageTypes = 'localStorage' | 'sessionStorage'
 
@@ -8,6 +8,7 @@ export function useStorage<T>(
     initialValue?: T,
 ): [T, Dispatch<SetStateAction<T>>] {
     const storage: Storage = window[storageType]
+    const wasKey: MutableRefObject<string> = useRef(storageKey)
 
     const readStoredValue: () => T = useCallback(() => {
         try {
@@ -23,7 +24,17 @@ export function useStorage<T>(
 
     // State to store our value
     // Pass initial state function to useState so logic is only executed once
-    const [storedValue, setStoredValue]: [T, Dispatch<SetStateAction<T>>] = useState(readStoredValue())
+    const rawStoredValue: T = readStoredValue()
+    const [storedValue, setStoredValue]: [T, Dispatch<SetStateAction<T>>] = useState(rawStoredValue)
+
+    // update value when storage key changes
+    if (wasKey.current !== storageKey) {
+        wasKey.current = storageKey
+
+        if (rawStoredValue !== storedValue) {
+            setTimeout(setStoredValue, 0, rawStoredValue)
+        }
+    }
 
     // Return a wrapped version of useState's setter function that
     // persists the new value to local or session storage.