Merge pull request #511 from microsoft/macae-v3-fr-dev-92

Refactor PlanPanelRight to use CSS classes

Author: Fr4nc3

src/frontend/src/components/content/PlanPanelRight.tsx

@@ -6,8 +6,9 @@ import {
   ArrowTurnDownRightRegular,
 } from "@fluentui/react-icons";
 import { MPlanData, PlanDetailsProps } from "../../models";
-import { getAgentIcon, getAgentDisplayNameWithSuffix } from '../../utils/agentIconUtils'; 
+import { getAgentIcon, getAgentDisplayNameWithSuffix } from '../../utils/agentIconUtils';
 import ContentNotFound from "../NotFound/ContentNotFound";
+import "../../styles/planpanelright.css";
 
 
 const PlanPanelRight: React.FC<PlanDetailsProps> = ({
@@ -22,18 +23,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
 
   if (!planApprovalRequest) {
     return (
-      <div style={{
-        width: '280px',
-        height: '100vh',
-        padding: '20px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderLeft: '1px solid var(--colorNeutralStroke1)',
-        color: 'var(--colorNeutralForeground3)',
-        fontSize: '14px',
-        fontStyle: 'italic'
-      }}>
+      <div className="plan-panel-right__no-data">
         No plan available
       </div>
     );
@@ -48,7 +38,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     return planApprovalRequest.steps.map((step, index) => {
       const action = step.action || step.cleanAction || '';
       const isHeading = action.trim().endsWith(':');
-      
+
       return {
         text: action.trim(),
         isHeading,
@@ -62,63 +52,29 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     const planSteps = extractPlanSteps();
 
     return (
-      <div style={{
-        marginBottom: '24px',
-        paddingBottom: '20px',
-        borderBottom: '1px solid var(--colorNeutralStroke1)'
-      }}>
-        <Body1 style={{
-          marginBottom: '16px',
-          fontSize: '14px',
-          fontWeight: 600,
-          color: 'var(--colorNeutralForeground1)'
-        }}>
+      <div className="plan-section">
+        <Body1 className="plan-section__title">
           Plan Overview
         </Body1>
 
         {planSteps.length === 0 ? (
-          <div style={{
-            textAlign: 'center',
-            color: 'var(--colorNeutralForeground3)',
-            fontSize: '14px',
-            fontStyle: 'italic',
-            padding: '20px'
-          }}>
+          <div className="plan-section__empty">
             Plan is being generated...
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div className="plan-steps">
             {planSteps.map((step, index) => (
-              <div key={step.key} style={{ display: 'flex', flexDirection: 'column' }}>
+              <div key={step.key} className="plan-step">
                 {step.isHeading ? (
                   // Heading - larger text, bold
-                  <Body1 style={{
-                    fontSize: '14px',
-                    fontWeight: 600,
-                    color: 'var(--colorNeutralForeground1)',
-                    marginBottom: '4px'
-                  }}>
+                  <Body1 className="plan-step__heading">
                     {step.text}
                   </Body1>
                 ) : (
                   // Sub-step - with arrow
-                  <div style={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: '8px',
-                    marginBottom: '4px'
-                  }}>
-                    <ArrowTurnDownRightRegular style={{
-                      fontSize: '16px',
-                      color: 'var(--colorNeutralForeground2)',
-                      marginTop: '2px',
-                      flexShrink: 0
-                    }} />
-                    <Body1 style={{
-                      fontSize: '14px',
-                      color: 'var(--colorNeutralForeground1)',
-                      lineHeight: 1.4
-                    }}>
+                  <div className="plan-step__content">
+                    <ArrowTurnDownRightRegular className="plan-step__arrow" />
+                    <Body1 className="plan-step__text">
                       {step.text}
                     </Body1>
                   </div>
@@ -136,59 +92,27 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
     const agents = planApprovalRequest?.team || [];
 
     return (
-      <div style={{
-        flex: 1,
-        overflow: 'auto'
-      }}>
-        <Body1 style={{
-          marginBottom: '16px',
-          fontSize: '14px',
-          fontWeight: 600,
-          color: 'var(--colorNeutralForeground1)'
-        }}>
+      <div className="agents-section">
+        <Body1 className="agents-section__title">
           Agent Team
         </Body1>
 
         {agents.length === 0 ? (
-          <div style={{
-            textAlign: 'center',
-            color: 'var(--colorNeutralForeground3)',
-            fontSize: '14px',
-            fontStyle: 'italic',
-            padding: '20px'
-          }}>
+          <div className="agents-section__empty">
             No agents assigned yet...
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <div className="agents-list">
             {agents.map((agentName, index) => (
-              <div key={`${agentName}-${index}`} style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '12px',
-                padding: '8px 0'
-              }}>
+              <div key={`${agentName}-${index}`} className="agent-item">
                 {/* Agent Icon */}
-                <div style={{
-                  width: '32px',
-                  height: '32px',
-                  borderRadius: '50%',
-                  backgroundColor: 'var(--colorNeutralBackground3)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  flexShrink: 0
-                }}>
+                <div className="agent-item__icon">
                   {getAgentIcon(agentName, planData, planApprovalRequest)}
                 </div>
 
                 {/* Agent Info - just name */}
-                <div style={{ flex: 1 }}>
-                  <Body1 style={{
-                    fontWeight: 600,
-                    fontSize: '14px',
-                    color: 'var(--colorNeutralForeground1)'
-                  }}>
+                <div className="agent-item__info">
+                  <Body1 className="agent-item__name">
                     {getAgentDisplayNameWithSuffix(agentName)}
                   </Body1>
                 </div>
@@ -202,16 +126,7 @@ const PlanPanelRight: React.FC<PlanDetailsProps> = ({
 
   // Main render
   return (
-    <div style={{
-      width: '280px',
-      height: '100vh',
-      padding: '20px',
-      display: 'flex',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      borderLeft: '1px solid var(--colorNeutralStroke1)',
-      // backgroundColor: 'var(--colorNeutralBackground1)'
-    }}>
+    <div className="plan-panel-right">
       {/* Plan section on top */}
       {renderPlanSection()}