Merge pull request #349 from topcoder-platform/gamification

kkartunov · web-flow · commit fefc33adac22 · 2022-10-14T14:46:47.000+03:00
Gamification QA Fixes
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
         "redux-logger": "^3.0.6",
         "redux-promise-middleware": "^6.1.2",
         "redux-thunk": "^2.4.1",
+        "sanitize-html": "^2.7.2",
         "sass": "^1.49.8",
         "styled-components": "^5.3.5",
         "swr": "^1.3.0",
@@ -98,6 +99,7 @@
         "@types/react-gtm-module": "^2.0.1",
         "@types/react-redux-toastr": "^7.6.2",
         "@types/react-router-dom": "^5.3.3",
+        "@types/sanitize-html": "^2.6.2",
         "@types/segment-analytics": "^0.0.34",
         "@types/systemjs": "^6.1.0",
         "@types/uuid": "^8.3.4",
diff --git a/src-ts/lib/pagination/infinite-page-handler.model.ts b/src-ts/lib/pagination/infinite-page-handler.model.ts
@@ -1,5 +1,10 @@
+import { KeyedMutator } from 'swr'
+
+import { InfinitePageDao } from './infinite-page-dao.model'
+
 export interface InfinitePageHandler<T> {
     data?: ReadonlyArray<T>
     getAndSetNext: () => void
     hasMore: boolean
+    mutate: KeyedMutator<Array<InfinitePageDao<T>>>
 }
diff --git a/src-ts/lib/pagination/use-infinite-page.hook.ts b/src-ts/lib/pagination/use-infinite-page.hook.ts
@@ -8,7 +8,7 @@ import { InfinitePageHandler } from './infinite-page-handler.model'
 export function useGetInfinitePage<T>(getKey: (index: number, previousPageData: InfinitePageDao<T>) => string | undefined):
     InfinitePageHandler<T> {
 
-    const { data, setSize, size }: SWRInfiniteResponse<InfinitePageDao<T>> = useSWRInfinite(getKey, { revalidateFirstPage: false })
+    const { data, mutate, setSize, size }: SWRInfiniteResponse<InfinitePageDao<T>> = useSWRInfinite(getKey, { revalidateFirstPage: false })
 
     // flatten version of badges paginated data
     const outputData: ReadonlyArray<T> = flatten(map(data, dao => dao.rows))
@@ -21,5 +21,6 @@ export function useGetInfinitePage<T>(getKey: (index: number, previousPageData:
         data: outputData,
         getAndSetNext,
         hasMore: outputData.length < (data?.[0]?.count || 0),
+        mutate,
     }
 }
diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.module.scss b/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.module.scss
@@ -0,0 +1,54 @@
+@import "../../../../../lib/styles/variables";
+@import "../../../../../lib/styles/includes";
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .badge {
+        display: flex;
+        align-items: center;
+        margin-bottom: $space-xxl;
+        
+        @include ltemd {
+            margin-bottom: 0;
+        }
+
+        .badge-image {
+            width: 43px;
+            height: 43px;
+            margin-right: $space-xl;
+        }
+
+        .badge-image-disabled {
+            width: 43px;
+            height: 43px;
+            margin-right: $space-xl;
+            opacity: 0.5;
+            filter: grayscale(1);
+        }
+
+        .badge-name {
+            font-size: 16px;
+        }
+    }
+
+    .actions-wrap {
+        display: flex;
+        flex-direction: column;
+
+        .actions {
+            display: flex;
+            align-items: center;
+
+            @include ltemd {
+                justify-content: flex-end;
+            }
+
+            a {
+                margin-right: $space-md;
+            }
+        }
+    }
+}
diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.tsx b/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/BadgeActivatedModal.tsx
@@ -0,0 +1,55 @@
+import { FC } from 'react'
+
+import { BaseModal, Button, PageDivider, useCheckIsMobile } from '../../../../../lib'
+import { GameBadge } from '../../game-badge.model'
+
+import styles from './BadgeActivatedModal.module.scss'
+export interface BadgeActivatedModalProps {
+    badge: GameBadge
+    isOpen: boolean
+    onClose: () => void
+}
+
+const BadgeActivatedModal: FC<BadgeActivatedModalProps> = (props: BadgeActivatedModalProps) => {
+
+    const isMobile: boolean = useCheckIsMobile()
+
+    function onClose(): void {
+        props.onClose()
+    }
+
+    return (
+        <BaseModal
+            onClose={onClose}
+            open={props.isOpen}
+            size='md'
+            title={`Badge updated`}
+            closeOnOverlayClick={false}
+        >
+            <div className={styles.wrapper}>
+                <div className={styles.badge}>
+                    <img
+                        alt={props.badge.badge_name}
+                        className={styles[props.badge.active ? 'badge-image' : 'badge-image-disabled']}
+                        src={props.badge.badge_image_url}
+                    />
+                    <p className={styles['badge-name']}>{props.badge.badge_name} badge has been sucessfully {props.badge.active ? 'activated' : 'deactivated'}.</p>
+                </div>
+                <div className={styles['actions-wrap']}>
+                    {
+                        isMobile && <PageDivider />
+                    }
+                    <div className={styles.actions}>
+                        <Button
+                            label='Close'
+                            buttonStyle='primary'
+                            onClick={onClose}
+                        />
+                    </div>
+                </div>
+            </div>
+        </BaseModal>
+    )
+}
+
+export default BadgeActivatedModal
diff --git a/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/index.ts b/src-ts/tools/gamification-admin/game-lib/modals/badge-activated-modal/index.ts
@@ -0,0 +1 @@
+export { default as BadgeActivatedModal } from './BadgeActivatedModal'
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.module.scss b/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.module.scss
@@ -1,5 +1,7 @@
 @import "../../../../lib/styles/variables";
 @import "../../../../lib/styles/includes";
+@import "../../../../lib/styles/typography";
+$error-line-height: 14px;
 
 $badgePreview: 130px;
 $badgePreviewImage: 72px;
@@ -86,6 +88,22 @@ $badgePreviewImage: 72px;
                 }
             }
 
+            .error {
+                display: flex;
+                align-items: center;
+                color: $red-100;
+                // extend body ultra small and override it
+                @extend .ultra-small;
+                line-height: $error-line-height;
+                margin-top: $space-xs;
+            
+                svg {
+                    @include icon-md;
+                    fill: $red-100;
+                    margin-right: $space-xs;
+                }
+            }
+
             .badgeDesc {
                 margin-top: $space-sm;
 
diff --git a/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx b/src-ts/tools/gamification-admin/pages/badge-detail/BadgeDetailPage.tsx
@@ -1,13 +1,16 @@
 import { noop, trim } from 'lodash'
 import MarkdownIt from 'markdown-it'
-import { createRef, Dispatch, FC, KeyboardEvent, RefObject, SetStateAction, useEffect, useState } from 'react'
+import { ChangeEvent, createRef, Dispatch, FC, KeyboardEvent, RefObject, SetStateAction, useEffect, useState } from 'react'
 import ContentEditable from 'react-contenteditable'
 import { Params, useLocation, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
+import sanitizeHtml from 'sanitize-html'
+import { KeyedMutator } from 'swr'
 
-import { Breadcrumb, BreadcrumbItemModel, Button, ButtonProps, ContentLayout, IconOutline, LoadingSpinner, PageDivider, TabsNavbar, TabsNavItem } from '../../../../lib'
+import { Breadcrumb, BreadcrumbItemModel, Button, ButtonProps, ContentLayout, IconOutline, IconSolid, LoadingSpinner, PageDivider, Sort, tableGetDefaultSort, TabsNavbar, TabsNavItem } from '../../../../lib'
 import { GamificationConfig } from '../../game-config'
-import { BadgeDetailPageHandler, GameBadge, useGamificationBreadcrumb, useGetGameBadgeDetails } from '../../game-lib'
+import { BadgeDetailPageHandler, GameBadge, useGamificationBreadcrumb, useGetGameBadgeDetails, useGetGameBadgesPage } from '../../game-lib'
+import { badgeListingColumns } from '../badge-listing/badge-listing-table'
 
 import AwardedMembersTab from './AwardedMembersTab/AwardedMembersTab'
 import { badgeDetailsTabs, BadgeDetailsTabViews } from './badge-details-tabs.config'
@@ -67,6 +70,12 @@ const BadgeDetailPage: FC = () => {
 
     const [isBadgeDescEditingMode, setIsBadgeDescEditingMode]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
+    // badgeListingMutate will reset badge listing page cache when called
+    const sort: Sort = tableGetDefaultSort(badgeListingColumns)
+    const { mutate: badgeListingMutate }: { mutate: KeyedMutator<any> } = useGetGameBadgesPage(sort)
+
+    const [badgeNameErrorText, setBadgeNameErrorText]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()
+
     useEffect(() => {
         if (newImageFile && newImageFile.length) {
             const fileReader: FileReader = new FileReader()
@@ -97,6 +106,7 @@ const BadgeDetailPage: FC = () => {
                         ...badgeDetailsHandler.data,
                         badge_image_url: updatedBadge.badge_image_url,
                     })
+                    onBadgeUpdated()
                 })
         }
     }, [
@@ -134,17 +144,42 @@ const BadgeDetailPage: FC = () => {
     )
 
     function onActivateBadge(): void {
-        // TODO: implement in GAME-127
+        updateBadgeAsync({
+            badgeActive: true,
+            id: badgeDetailsHandler.data?.id as string,
+        })
+            .then(() => {
+                badgeDetailsHandler.mutate({
+                    ...badgeDetailsHandler.data,
+                    active: true,
+                })
+                setShowActivatedModal(true)
+            })
+            .catch((e) => alert(`onActivateBadge error: ${e.message}`))
     }
 
     function onDisableBadge(): void {
-        // TODO: implement in GAME-127
+        updateBadgeAsync({
+            badgeActive: false,
+            id: badgeDetailsHandler.data?.id as string,
+        })
+            .then(() => {
+                badgeDetailsHandler.mutate({
+                    ...badgeDetailsHandler.data,
+                    active: false,
+                })
+                setShowActivatedModal(true)
+            })
+            .catch((e) => alert(`onDisableBadge error: ${e.message}`))
     }
 
     function onNameEditKeyDown(e: KeyboardEvent): void {
         if (e.key === 'Enter') {
             e.preventDefault()
             badgeNameRef.current?.blur()
+        } else if (/[`'<>]+/.test(e.key)) {
+            // restrict those characters
+            e.preventDefault()
         }
     }
 
@@ -154,8 +189,19 @@ const BadgeDetailPage: FC = () => {
         }
     }
 
+    function sanitazeBadgeName(innerHTML: string): string {
+        const clean: string = sanitizeHtml(innerHTML, {
+            allowedTags: [],
+        })
+        return trim(clean)
+    }
+
     function onSaveBadgeName(): any {
-        const newBadgeName: string | undefined = trim(badgeNameRef.current?.innerHTML)
+        const newBadgeName: string = sanitazeBadgeName(badgeNameRef.current?.innerHTML as string)
+        if (!newBadgeName) {
+            setBadgeNameErrorText('Update rejected due to invalid title string.')
+            return
+        }
         if (newBadgeName !== badgeDetailsHandler.data?.badge_name) {
             // save only if different
             updateBadgeAsync({
@@ -168,6 +214,10 @@ const BadgeDetailPage: FC = () => {
                         ...badgeDetailsHandler.data,
                         badge_name: newBadgeName,
                     })
+                    onBadgeUpdated()
+                })
+                .catch(e => {
+                    setBadgeNameErrorText(e.message)
                 })
         }
     }
@@ -187,10 +237,25 @@ const BadgeDetailPage: FC = () => {
                         ...badgeDetailsHandler.data,
                         badge_description: newBadgeDesc,
                     })
+                    onBadgeUpdated()
                 })
         }
     }
 
+    function onBadgeUpdated(): void {
+        badgeListingMutate()
+    }
+
+    function validateFilePicked(e: ChangeEvent<HTMLInputElement>): void {
+        if (e.target.files?.length) {
+            if (GamificationConfig.ACCEPTED_BADGE_MIME_TYPES.includes(e.target.files[0].type)) {
+                setNewImageFile(e.target.files)
+            } else {
+                toast.error(`Not allowed file type: ${e.target.files[0].type}`)
+            }
+        }
+    }
+
     // default tab
     let activeTabElement: JSX.Element
         = <AwardedMembersTab badge={badgeDetailsHandler.data as GameBadge} />
@@ -236,19 +301,25 @@ const BadgeDetailPage: FC = () => {
                                         className={styles.filePickerInput}
                                         accept={GamificationConfig.ACCEPTED_BADGE_MIME_TYPES}
                                         size={GamificationConfig.MAX_BADGE_IMAGE_FILE_SIZE}
-                                        onChange={e => setNewImageFile(e.target.files)}
+                                        onChange={validateFilePicked}
                                     />
                                 </div>
                                 <div className={styles.badgeDetails}>
                                     <ContentEditable
                                         innerRef={badgeNameRef}
                                         html={badgeDetailsHandler.data?.badge_name as string}
-                                        onChange={noop}
+                                        onChange={() => badgeNameErrorText ? setBadgeNameErrorText(undefined) : ''}
                                         onKeyDown={onNameEditKeyDown}
                                         onBlur={onSaveBadgeName}
                                         onFocus={onBadgeNameEditFocus}
                                         className={styles.badgeName}
                                     />
+                                    {
+                                        badgeNameErrorText && <div className={styles.error}>
+                                            <IconSolid.ExclamationIcon />
+                                            {badgeNameErrorText}
+                                        </div>
+                                    }
                                     <div className={styles.badgeDesc}>
                                         <div className={styles.badgeEditWrap}>
                                             <ContentEditable
@@ -290,6 +361,14 @@ const BadgeDetailPage: FC = () => {
                     )
                 }
             </div>
+            {
+                badgeDetailsHandler.data &&
+                <BadgeActivatedModal
+                    isOpen={showActivatedModal}
+                    onClose={() => setShowActivatedModal(false)}
+                    badge={badgeDetailsHandler.data}
+                />
+            }
         </ContentLayout>
     )
 }
diff --git a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.module.scss b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.module.scss
@@ -4,8 +4,9 @@
 .badge-actions {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   padding-top: $space-lg;
+  padding-right: $space-sm;
 
   @include ltemd {
     flex-direction: column;
diff --git a/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.tsx b/src-ts/tools/gamification-admin/pages/badge-listing/badge-listing-table/badge-action-renderer/BadgeActionRenderer.tsx
@@ -20,10 +20,6 @@ function BadgeActionRenderer(badge: GameBadge): JSX.Element {
             {
                 label: 'View',
             },
-            {
-                label: 'Edit',
-                view: 'edit',
-            },
             {
                 label: 'Award',
                 view: 'award',
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import { InfinitePageHandler } from './infinite-page-handler.model'`
`8`	`8`	`export function useGetInfinitePage<T>(getKey: (index: number, previousPageData: InfinitePageDao<T>) => string \| undefined):`
`9`	`9`	`InfinitePageHandler<T> {`
`10`	`10`
`11`		`- const { data, setSize, size }: SWRInfiniteResponse<InfinitePageDao<T>> = useSWRInfinite(getKey, { revalidateFirstPage: false })`
	`11`	`+ const { data, mutate, setSize, size }: SWRInfiniteResponse<InfinitePageDao<T>> = useSWRInfinite(getKey, { revalidateFirstPage: false })`
`12`	`12`
`13`	`13`	`// flatten version of badges paginated data`
`14`	`14`	`const outputData: ReadonlyArray<T> = flatten(map(data, dao => dao.rows))`
`@@ -21,5 +21,6 @@ export function useGetInfinitePage<T>(getKey: (index: number, previousPageData:`
`21`	`21`	`data: outputData,`
`22`	`22`	`getAndSetNext,`
`23`	`23`	`hasMore: outputData.length < (data?.[0]?.count \|\| 0),`
	`24`	`+ mutate,`
`24`	`25`	`}`
`25`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as BadgeActivatedModal } from './BadgeActivatedModal'`
Original file line number	Diff line number	Diff line change
`@@ -20,10 +20,6 @@ function BadgeActionRenderer(badge: GameBadge): JSX.Element {`
`20`	`20`	`{`
`21`	`21`	`label: 'View',`
`22`	`22`	`},`
`23`		`- {`
`24`		`- label: 'Edit',`
`25`		`- view: 'edit',`
`26`		`- },`
`27`	`23`	`{`
`28`	`24`	`label: 'Award',`
`29`	`25`	`view: 'award',`