Merge pull request #348 from topcoder-platform/GAME-QA-S4

kkartunov · web-flow · commit b7b6a4e5baee · 2022-10-14T14:45:26.000+03:00
Game qa s4
diff --git a/package.json b/package.json
@@ -61,6 +61,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",
@@ -97,6 +98,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/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,14 +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 { BadgeActivatedModal } from '../../game-lib/modals/badge-activated-modal'
+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'
@@ -68,7 +70,11 @@ const BadgeDetailPage: FC = () => {
 
     const [isBadgeDescEditingMode, setIsBadgeDescEditingMode]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
-    const [showActivatedModal, setShowActivatedModal]: [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) {
@@ -100,6 +106,7 @@ const BadgeDetailPage: FC = () => {
                         ...badgeDetailsHandler.data,
                         badge_image_url: updatedBadge.badge_image_url,
                     })
+                    onBadgeUpdated()
                 })
         }
     }, [
@@ -170,6 +177,9 @@ const BadgeDetailPage: FC = () => {
         if (e.key === 'Enter') {
             e.preventDefault()
             badgeNameRef.current?.blur()
+        } else if (/[`'<>]+/.test(e.key)) {
+            // restrict those characters
+            e.preventDefault()
         }
     }
 
@@ -179,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({
@@ -193,6 +214,10 @@ const BadgeDetailPage: FC = () => {
                         ...badgeDetailsHandler.data,
                         badge_name: newBadgeName,
                     })
+                    onBadgeUpdated()
+                })
+                .catch(e => {
+                    setBadgeNameErrorText(e.message)
                 })
         }
     }
@@ -212,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} />
@@ -261,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
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
@@ -2740,6 +2740,13 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/sanitize-html@^2.6.2":
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.6.2.tgz#9c47960841b9def1e4c9dfebaaab010a3f6e97b9"
+  integrity sha512-7Lu2zMQnmHHQGKXVvCOhSziQMpa+R2hMHFefzbYoYMHeaXR0uXqNeOc3JeQQQ8/6Xa2Br/P1IQTLzV09xxAiUQ==
+  dependencies:
+    htmlparser2 "^6.0.0"
+
 "@types/scheduler@*":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
@@ -8244,7 +8251,7 @@ html2canvas@^1.4.1:
     css-line-break "^2.1.0"
     text-segmentation "^1.0.3"
 
-htmlparser2@^6.1.0:
+htmlparser2@^6.0.0, htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
   integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
@@ -8842,6 +8849,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-port-reachable@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-port-reachable/-/is-port-reachable-4.0.0.tgz#dac044091ef15319c8ab2f34604d8794181f8c2d"
@@ -11656,6 +11668,11 @@ parse-passwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
+
 parse5@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
@@ -12574,6 +12591,15 @@ postcss@^8.2.7, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.4, postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.3.11:
+  version "8.4.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
+  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -13798,6 +13824,18 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sanitize-html@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.7.2.tgz#54c5189af75e3237d996e4b9a5e3eaad12c7f7fc"
+  integrity sha512-DggSTe7MviO+K4YTCwprG6W1vsG+IIX67yp/QY55yQqKCJYSWzCA1rZbaXzkjoKeL9+jqwm56wD6srYLtUNivg==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^6.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 sanitize.css@*:
   version "13.0.0"
   resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-13.0.0.tgz#2675553974b27964c75562ade3bd85d79879f173"

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
`@@ -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',`