PM-3813 ai reviewer configs

.circleci/config.yml

@@ -160,7 +160,7 @@ workflows:
           context: org-global
           filters: &filters-dev
             branches:
-              only: ["develop", "pm-2917", "points", "pm-3270", "projects-api-v6"]
+              only: ["develop", "pm-2917", "points", "pm-3270", "projects-api-v6", "PM-3813_ai-reviewer-configs"]
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.

src/components/Buttons/OutlineButton/Outline.module.scss

@@ -52,4 +52,10 @@
       color: $tc-gray-40;
     }
   }
+
+  &.minWidth {
+    width: min-content;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 }

src/components/Buttons/OutlineButton/index.js

@@ -6,7 +6,7 @@ import cn from 'classnames'
 import styles from './Outline.module.scss'
 import _ from 'lodash'
 
-const OutlineButton = ({ type, text, link, onClick, url, className, submit, disabled, target = 'self', rel }) => {
+const OutlineButton = ({ type, text, link, onClick, url, className, submit, disabled, target = 'self', rel, minWidth = false }) => {
   const containerClassName = cn(styles.container, styles[type], className)
 
   const handleUrlClick = (event) => {
@@ -34,7 +34,7 @@ const OutlineButton = ({ type, text, link, onClick, url, className, submit, disa
     return (
       <button
         type={submit ? 'submit' : 'button'}
-        className={cn(containerClassName, disabled && styles.disable)}
+        className={cn(containerClassName, disabled && styles.disable, minWidth && styles.minWidth)}
         onClick={submit ? null : onClick}
         disabled={disabled}
       >
@@ -67,6 +67,7 @@ const OutlineButton = ({ type, text, link, onClick, url, className, submit, disa
 }
 
 OutlineButton.propTypes = {
+  minWidth: PropTypes.bool,
   type: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
   link: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),

src/components/ChallengeEditor/ChallengeReviewer-Field/AIWorkflowCard.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './AiWorkflowCard.module.scss'
+
+const AIWorkflowCard = ({ workflow, scorecardId, description, onRemove, readOnly = false }) => {
+  return (
+    <div className={styles.workflowCard}>
+      <div className={styles.workflowcardHeader}>
+        <div className={styles.workflowInfo}>
+          <div className={styles.workflowName}>
+            <span className={styles.workflowIcon}>🤖</span>
+            <span className={styles.workflowTitle}>{workflow.name}</span>
+          </div>
+        </div>
+        {!readOnly && onRemove && (
+          <button
+            className={styles.workflowRemoveBtn}
+            onClick={onRemove}
+            title='Remove workflow'
+            aria-label='Remove workflow'
+          >
+            ✕
+          </button>
+        )}
+      </div>
+
+      <div className={styles.workflowcardContent}>
+        {description && (
+          <div className={styles.workflowDescription}>
+            <strong>Description:</strong>
+            <p>{description}</p>
+          </div>
+        )}
+
+        {scorecardId && (
+          <div className={styles.workflowScorecard}>
+            <strong>Scorecard:</strong>
+            {scorecardId}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+AIWorkflowCard.propTypes = {
+  workflow: PropTypes.shape({
+    id: PropTypes.string,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  scorecardId: PropTypes.string,
+  description: PropTypes.string,
+  onRemove: PropTypes.func,
+  readOnly: PropTypes.bool
+}
+
+export default AIWorkflowCard

src/components/ChallengeEditor/ChallengeReviewer-Field/AiReviewerTab/AiReviewTab.js

@@ -0,0 +1,147 @@
+import React, { useCallback, useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { isAIReviewer } from './utils'
+import { deleteAIReviewConfig } from '../../../../services/aiReviewConfigs'
+import styles from './AiReviewTab.module.scss'
+import sharedStyles from '../shared.module.scss'
+import useConfigurationState from './hooks/useConfigurationState'
+import InitialStateView from './views/InitialStateView'
+import TemplateConfigurationView from './views/TemplateConfigurationView'
+import ManualConfigurationView from './views/ManualConfigurationView'
+import { pick } from 'lodash'
+
+/**
+ * AiReviewTab - Main component for managing AI review configuration
+ * Orchestrates between different views: initial state, template, manual, and legacy
+ */
+const AiReviewTab = ({ challenge, onUpdateReviewers, metadata = {}, isLoading, readOnly = false }) => {
+  const {
+    isLoading: isLoadingConfigs,
+    configuration,
+    configurationMode,
+    setConfigurationMode,
+    updateConfiguration,
+    addWorkflow,
+    updateWorkflow,
+    removeWorkflow,
+    resetConfiguration,
+    applyTemplate,
+    isSaving,
+    configId
+  } = useConfigurationState(challenge.id)
+
+  const aiReviewers = useMemo(() => (
+    (challenge.reviewers || []).filter(isAIReviewer)
+  ), [challenge.reviewers])
+
+  const removeAIReviewer = useCallback((index) => {
+    const allChallengeReviewers = challenge.reviewers || []
+    // Map the AI reviewer index to the actual index in the full reviewers array
+    const reviewerToRemove = aiReviewers[index]
+    const actualIndex = allChallengeReviewers.indexOf(reviewerToRemove)
+
+    if (actualIndex !== -1) {
+      const updatedReviewers = allChallengeReviewers.filter((_, i) => i !== actualIndex)
+      onUpdateReviewers({ field: 'reviewers', value: updatedReviewers })
+    }
+  }, [challenge.reviewers, onUpdateReviewers, aiReviewers])
+
+  const handleRemoveConfiguration = useCallback(() => {
+    // Call delete API if config exists
+    if (configId) {
+      deleteAIReviewConfig(configId).catch(err => {
+        console.error('Error deleting AI review configuration:', err)
+      })
+    }
+    setConfigurationMode(null)
+    resetConfiguration()
+  }, [setConfigurationMode, resetConfiguration, configId])
+
+  const handleSwitchConfigurationMode = useCallback((mode, template) => {
+    if (mode === 'manual') {
+      if (template) {
+        applyTemplate(pick(template, [
+          'mode',
+          'minPassingThreshold',
+          'autoFinalize',
+          'formula',
+          'workflows'
+        ]))
+      }
+    } else {
+      resetConfiguration()
+    }
+    setConfigurationMode(mode)
+  }, [setConfigurationMode, applyTemplate, resetConfiguration])
+
+  if (isLoading || isLoadingConfigs) {
+    return <div className={styles.loading}>Loading...</div>
+  }
+
+  return (
+    <div className={sharedStyles.tabContent}>
+      {isSaving && <div className={styles.autoSaveIndicator}>💾 Saving...</div>}
+
+      {/* initial state (no configuration mode was selected: template/manual) */}
+      {configurationMode === null && (
+        <InitialStateView
+          aiReviewers={aiReviewers}
+          metadata={metadata}
+          onSelectTemplate={() => setConfigurationMode('template')}
+          onSelectManual={() => setConfigurationMode('manual')}
+          onRemoveReviewer={removeAIReviewer}
+          readOnly={readOnly}
+        />
+      )}
+
+      {/* Show template configuration if in template mode */}
+      {configurationMode === 'template' && (
+        <TemplateConfigurationView
+          challenge={challenge}
+          configuration={configuration}
+          onTemplateChange={applyTemplate}
+          onUpdateConfiguration={updateConfiguration}
+          onSwitchMode={handleSwitchConfigurationMode}
+          onRemoveConfig={handleRemoveConfiguration}
+          readOnly={readOnly}
+          availableWorkflows={metadata.workflows || []}
+        />
+      )}
+
+      {/* Show manual configuration if in manual mode */}
+      {configurationMode === 'manual' && (
+        <ManualConfigurationView
+          challenge={challenge}
+          configuration={configuration}
+          availableWorkflows={metadata.workflows || []}
+          onUpdateConfiguration={updateConfiguration}
+          onAddWorkflow={addWorkflow}
+          onUpdateWorkflow={updateWorkflow}
+          onRemoveWorkflow={removeWorkflow}
+          onSwitchMode={handleSwitchConfigurationMode}
+          onRemoveConfig={handleRemoveConfiguration}
+          readOnly={readOnly}
+        />
+      )}
+    </div>
+  )
+}
+
+AiReviewTab.propTypes = {
+  challenge: PropTypes.object.isRequired,
+  onUpdateReviewers: PropTypes.func.isRequired,
+  metadata: PropTypes.shape({
+    workflows: PropTypes.array,
+    challengeTracks: PropTypes.array
+  }),
+  isLoading: PropTypes.bool,
+  readOnly: PropTypes.bool
+}
+
+AiReviewTab.defaultProps = {
+  metadata: {},
+  isLoading: false,
+  readOnly: false
+}
+
+export default AiReviewTab