PM-1906 - tabs

Author: vas3a

src/apps/review/src/lib/components/AiReviewsTable/AiReviewsTable.tsx

@@ -144,7 +144,7 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
                             <td className={styles.scoreCol}>
                                 {run.status === 'SUCCESS' ? (
                                     run.workflow.scorecard ? (
-                                        <a href={`/scorecard/${run.workflow.scorecard.id}`}>{run.score}</a>
+                                        <a href={`./ai-scorecard/${props.submission.id}/${run.workflow.id}`}>{run.score}</a>
                                     ) : run.score
                                 ) : '-'}
                             </td>

src/apps/review/src/lib/components/Scorecard/ScorecardAttachments/ScorecardAttachments.module.scss

@@ -0,0 +1,17 @@
+import { FC } from 'react'
+
+import styles from './ScorecardAttachments.module.scss'
+
+interface ScorecardAttachmentsProps {
+}
+
+const ScorecardAttachments: FC<ScorecardAttachmentsProps> = props => {
+
+    return (
+        <div className={styles.wrap}>
+            attachments
+        </div>
+    )
+}
+
+export default ScorecardAttachments

src/apps/review/src/lib/components/Scorecard/ScorecardAttachments/ScorecardAttachments.tsx

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

src/apps/review/src/lib/components/Scorecard/ScorecardAttachments/index.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+import styles from './ScorecardTabsLayout.module.scss'
+
+interface ScorecardTabsLayoutProps {
+}
+
+const ScorecardTabsLayout: FC<ScorecardTabsLayoutProps> = props => {
+
+    return (
+        <div className={styles.wrap}>
+        </div>
+    )
+}
+
+export default ScorecardTabsLayout

src/apps/review/src/lib/components/Scorecard/ScorecardTabsLayout/ScorecardTabsLayout.module.scss

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

src/apps/review/src/lib/components/Scorecard/ScorecardTabsLayout/ScorecardTabsLayout.tsx

@@ -1 +1,2 @@
 export * from './ScorecardViewer'
+export * from './ScorecardTabsLayout'

src/apps/review/src/lib/components/Scorecard/ScorecardTabsLayout/index.ts

@@ -26,6 +26,12 @@
         }
     }
 }
+
 .contentWrap {
     width: 100%;
 }
+
+.tabs {
+    justify-content: center;
+    margin: $sp-6 0;
+}

src/apps/review/src/lib/components/Scorecard/index.ts

@@ -1,17 +1,23 @@
-import { FC, useEffect, useMemo } from 'react'
+import { FC, useEffect, useMemo, useState } from 'react'
 
 import { NotificationContextType, useNotification } from '~/libs/shared'
 
 import { ScorecardHeader } from '../components/ScorecardHeader'
 import { IconAiReview } from '../../../lib/assets/icons'
-import { PageWrapper } from '../../../lib'
+import { PageWrapper, Tabs } from '../../../lib'
 import { useAiScorecardContext } from '../AiScorecardContext'
-import { AiScorecardContextModel } from '../../../lib/models'
+import { AiScorecardContextModel, SelectOption } from '../../../lib/models'
 import { AiWorkflowsSidebar } from '../components/AiWorkflowsSidebar'
 import { ScorecardViewer } from '../../../lib/components/Scorecard'
 import { AiWorkflowRunItemsResponse, useFetchAiWorkflowsRunItems } from '../../../lib/hooks'
 
 import styles from './AiScorecardViewer.module.scss'
+import { ScorecardAttachments } from '../../../lib/components/Scorecard/ScorecardAttachments'
+
+const tabItems: SelectOption[] = [
+    { label: 'Scorecard', value: 'scorecard'},
+    { label: 'Attachments', value: 'attachments' },
+]
 
 const AiScorecardViewer: FC = () => {
     const { showBannerNotification, removeNotification }: NotificationContextType = useNotification()
@@ -23,6 +29,8 @@ const AiScorecardViewer: FC = () => {
         [],
     )
 
+    const [selectedTab, setSelectedTab] = useState('scorecard');
+
     useEffect(() => {
         const notification = showBannerNotification({
             icon: <IconAiReview />,
@@ -43,13 +51,23 @@ const AiScorecardViewer: FC = () => {
                 <AiWorkflowsSidebar className={styles.sidebar} />
                 <div className={styles.contentWrap}>
                     <ScorecardHeader />
-                    {!!scorecard && (
+                    <Tabs
+                        className={styles.tabs}
+                        items={tabItems}
+                        selected={selectedTab}
+                        onChange={setSelectedTab}
+                    />
+                    {!!scorecard && selectedTab === 'scorecard' && (
                         <ScorecardViewer
                             scorecard={scorecard}
                             aiFeedback={runItems}
                             score={workflowRun?.score}
                         />
                     )}
+
+                    {selectedTab === 'attachments' && (
+                        <ScorecardAttachments />
+                    )}
                 </div>
             </div>
         </PageWrapper>