PM-2133 dismissable banner

.github/workflows/code_reviewer-updated.yml

@@ -0,0 +1,22 @@
+name: AI PR Reviewer Updated
+
+on:
+    pull_request:
+        types:
+            - opened
+            - synchronize
+permissions:
+    pull-requests: write
+jobs:
+    tc-ai-pr-review:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout Repo
+              uses: actions/checkout@v3
+
+            - name: TC AI PR Reviewer
+              uses: topcoder-platform/tc-ai-pr-reviewer@prompt-update
+              with:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # The GITHUB_TOKEN is there by default so you just need to keep it like it is and not necessarily need to add it as secret as it will throw an error. [More Details](https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret)
+                  LAB45_API_KEY: ${{ secrets.LAB45_API_KEY }}
+                  exclude: '**/*.json, **/*.md, **/*.jpg, **/*.png, **/*.jpeg, **/*.bmp, **/*.webp' # Optional: exclude patterns separated by commas

src/apps/platform/src/PlatformApp.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { toast, ToastContainer } from 'react-toastify'
 
-import { useViewportUnitsFix } from '~/libs/shared'
+import { useViewportUnitsFix, NotificationsContainer } from '~/libs/shared'
 
 import { AppFooter } from './components/app-footer'
 import { AppHeader } from './components/app-header'
@@ -14,6 +14,7 @@ const PlatformApp: FC<{}> = () => {
     return (
         <Providers>
             <AppHeader />
+            <NotificationsContainer />
             <div className='root-container'>
                 <PlatformRouter />
             </div>

src/apps/platform/src/providers/Providers.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react'
 
 import { authUrlLogout, ProfileProvider } from '~/libs/core'
-import { ConfigContextProvider } from '~/libs/shared'
+import { ConfigContextProvider, NotificationProvider } from '~/libs/shared'
 
 import { PlatformRouterProvider } from './platform-router.provider'
 
@@ -13,7 +13,9 @@ const Providers: FC<ProvidersProps> = props => (
     <ConfigContextProvider logoutUrl={authUrlLogout}>
         <ProfileProvider>
             <PlatformRouterProvider>
-                {props.children}
+                <NotificationProvider>
+                    {props.children}
+                </NotificationProvider>
             </PlatformRouterProvider>
         </ProfileProvider>
     </ConfigContextProvider>

src/apps/review/src/pages/active-review-assignements/ChallengeDetailsPage/ChallengeDetailsPage.tsx

@@ -60,6 +60,7 @@ import {
 } from '../../../config/routes.config'
 
 import styles from './ChallengeDetailsPage.module.scss'
+import { useNotification } from '~/libs/shared'
 
 interface Props {
     className?: string
@@ -226,6 +227,7 @@ const computePhaseCompletionFromScreenings = (
 
 // eslint-disable-next-line complexity
 export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
+    const { showBannerNotification, removeNotification } = useNotification();
     const [searchParams, setSearchParams] = useSearchParams()
     const location = useLocation()
     const navigate = useNavigate()
@@ -1323,6 +1325,14 @@ export const ChallengeDetailsPage: FC<Props> = (props: Props) => {
         : undefined
     const shouldShowChallengeMetaRow = Boolean(statusLabel) || trackTypePills.length > 0
 
+    useEffect(() => {
+        const notification = showBannerNotification({
+            id: 'ai-review-scores-warning',
+            message: 'AI Review Scores are advisory only to provide immediate, educational, and actionable feedback to members. AI Review Scores are not influence winner selection.',
+        })
+      return () => notification && removeNotification(notification.id);
+    }, [showBannerNotification]);
+
     return (
         <PageWrapper
             pageTitle={challengeInfo?.name ?? ''}

src/libs/core/lib/profile/profile-context/index.ts

@@ -1,3 +1,3 @@
 export * from './profile-context-data.model'
-export { default as profileContext, defaultProfileContextData } from './profile.context'
+export { default as profileContext, defaultProfileContextData, useProfileContext } from './profile.context'
 export * from './profile.context-provider'

src/libs/core/lib/profile/profile-context/profile.context.tsx

@@ -1,4 +1,4 @@
-import { Context, createContext } from 'react'
+import { Context, createContext, useContext } from 'react'
 
 import { ProfileContextData } from './profile-context-data.model'
 
@@ -12,4 +12,6 @@ export const defaultProfileContextData: ProfileContextData = {
 
 const profileContext: Context<ProfileContextData> = createContext(defaultProfileContextData)
 
+export const useProfileContext = () => useContext(profileContext);
+
 export default profileContext

src/libs/shared/lib/components/index.ts

@@ -3,6 +3,7 @@ export * from './modals'
 export * from './profile-picture'
 export * from './input-skill-selector'
 export * from './member-skill-editor'
+export * from './notifications'
 export * from './skill-pill'
 export * from './expandable-list'
 export * from './grouped-skills-ui'

src/libs/shared/lib/components/notifications/Notifications.container.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+
+import { Notification } from '~/libs/ui'
+
+import { useNotification } from './Notifications.context';
+
+const NotificationsContainer: FC = () => {
+    const { notifications, removeNotification } = useNotification();
+
+    return (
+        <div>
+            {notifications.map(n => (
+                <Notification key={n.id} notification={n} onClose={removeNotification} />
+            ))}
+        </div>
+    )
+}
+
+export default NotificationsContainer

src/libs/shared/lib/components/notifications/Notifications.context.tsx

@@ -0,0 +1,74 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from "react";
+import { useProfileContext } from "~/libs/core";
+import { dismiss, wasDismissed } from "./localstorage.utils";
+
+export type NotificationType = "success" | "error" | "info" | "warning" | "banner";
+
+export interface Notification {
+    id: string;
+    type: NotificationType;
+    message: string;
+    duration?: number; // in ms
+}
+
+type NotifyPayload = string | (Partial<Notification> & { message: string })
+
+interface NotificationContextType {
+    notifications: Notification[];
+    notify: (message: NotifyPayload, type?: NotificationType, duration?: number) => Notification | void;
+    showBannerNotification: (message: NotifyPayload) => Notification | void;
+    removeNotification: (id: string) => void;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+export const useNotification = (): NotificationContextType => {
+    const context = useContext(NotificationContext);
+    if (!context) throw new Error("useNotification must be used within a NotificationProvider");
+    return context;
+};
+
+export const NotificationProvider: React.FC<{
+    children: ReactNode,
+}> = ({ children }) => {
+    const profileCtx = useProfileContext()
+    const uuid = profileCtx.profile?.userId ?? 'annon';
+    const [notifications, setNotifications] = useState<Notification[]>([]);
+
+    const removeNotification = useCallback((id: string, persist?: boolean) => {
+        setNotifications(prev => prev.filter(n => n.id !== id));
+        if (persist) {
+            dismiss(id);
+        }
+    }, []);
+
+    const notify = useCallback(
+        (message: NotifyPayload, type: NotificationType = "info", duration = 3000) => {
+            const id = `${uuid}[${typeof message === 'string' ? message : message.id}]`;
+            const newNotification: Notification = typeof message === 'string' ? { id, message, type, duration } : { type, duration, ...message, id };
+
+            if (wasDismissed(id)) {
+                return;
+            }
+
+            setNotifications(prev => [...prev, newNotification]);
+
+            if (duration > 0) {
+                setTimeout(() => removeNotification(id), duration);
+            }
+
+            return newNotification;
+        },
+        [uuid]
+    );
+
+    const showBannerNotification = useCallback((
+        message: NotifyPayload,
+    ) => notify(message, 'banner', 0), [notify]);
+
+    return (
+        <NotificationContext.Provider value={{ notifications, notify, showBannerNotification, removeNotification }}>
+            {children}
+        </NotificationContext.Provider>
+    );
+};

src/libs/shared/lib/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export { default as NotificationsContainer } from './Notifications.container'
+export * from './Notifications.context'

src/libs/shared/lib/components/notifications/localstorage.utils.ts

@@ -0,0 +1,7 @@
+export const wasDismissed = (id: string): boolean => (
+    (localStorage.getItem(`dismissed[${id}]`)) !== null
+)
+
+export const dismiss = (id: string): void => {
+    localStorage.setItem(`dismissed[${id}]`, JSON.stringify(true))
+}

src/libs/ui/lib/components/index.ts

@@ -3,6 +3,7 @@ export * from './content-layout'
 export * from './default-member-icon'
 // NOTE: for some reason, modals needs to be imported prior to form
 export * from './modals'
+export * from './notification'
 export * from './form'
 export * from './loading-spinner'
 export * from './page-divider'

src/libs/ui/lib/components/notification/Notification.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+
+import { NotificationBanner } from './banner'
+
+interface NotificationProps {
+    notification: { message: string; id: string; type: string }
+    onClose: (id: string, save?: boolean) => void
+}
+
+const Notification: FC<NotificationProps> = props => {
+
+    if (props.notification.type === 'banner') {
+        return <NotificationBanner content={props.notification.message} onClose={(save?: boolean) => props.onClose(props.notification.id, save)} />
+    }
+
+    return null;
+}
+
+export default Notification

src/libs/ui/lib/components/notification/banner/NotificationBanner.module.scss

@@ -0,0 +1,26 @@
+@import '../../../styles/includes';
+
+.wrap {
+    background: #60267D;
+    color: $tc-white;
+
+    .inner {
+        max-width: $xxl-min;
+        padding: $sp-3 0;
+        @include pagePaddings;
+        margin: 0 auto;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        @include ltemd {
+            display: block;
+            position: relative;
+        }
+    }
+}
+
+.close {
+    cursor: pointer;
+    color: $tc-white;
+}

src/libs/ui/lib/components/notification/banner/NotificationBanner.stories.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable camelcase */
+
+import { Meta, StoryObj } from '@storybook/react'
+
+import NotificationBanner from './NotificationBanner'
+
+const meta: Meta<typeof NotificationBanner> = {
+    argTypes: {
+        persistent: {
+            defaultValue: false,
+            description: 'Set to true to allow clicks inside the tooltip',
+        },
+        content: {
+            description: 'Content displayed inside the tooltip',
+        },
+    },
+    component: NotificationBanner,
+    excludeStories: /.*Decorator$/,
+    tags: ['autodocs'],
+    title: 'Components/NotificationBanner',
+}
+
+export default meta
+
+type Story = StoryObj<typeof NotificationBanner>;
+
+export const Primary: Story = {
+    args: {
+        // children: <IconOutline.QuestionMarkCircleIcon width='35' />,
+        content: 'Help tooltip',
+    },
+}

src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx

@@ -0,0 +1,36 @@
+import { FC, ReactNode, useCallback } from 'react'
+
+import styles from './NotificationBanner.module.scss'
+import { InformationCircleIcon, XCircleIcon } from '@heroicons/react/outline'
+
+interface NotificationBannerProps {
+    persistent?: boolean
+    content: ReactNode
+    icon?: ReactNode
+    onClose?: (save?: boolean) => void
+}
+
+const NotificationBanner: FC<NotificationBannerProps> = props => {
+
+    return (
+        <div className={styles.wrap}>
+            <div className={styles.inner}>
+                {props.icon || (
+                    <div>
+                        <InformationCircleIcon className='icon-xl' />
+                    </div>
+                )}
+
+                {props.content}
+
+                {!props.persistent && (
+                    <div className={styles.close} onClick={() => props.onClose?.(true)}>
+                        <XCircleIcon className='icon-xl' />
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default NotificationBanner

src/libs/ui/lib/components/notification/banner/index.ts

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

src/libs/ui/lib/components/notification/index.ts

@@ -0,0 +1,2 @@
+export * from './banner'
+export { default as Notification } from './Notification'