[TSPS-655] Update pipeline quota details view (#5438)

Author: MatthewBemis

src/pages/scientificServices/pipelines/views/RunJob.tsx

@@ -31,7 +31,7 @@ import {
 } from 'src/pages/scientificServices/pipelines/utils/submission-utils';
 import { HelpfulTipsWidget } from 'src/pages/scientificServices/pipelines/widgets/HelpfulTipsWidget';
 import { PipelineOutputsWidget } from 'src/pages/scientificServices/pipelines/widgets/PipelineOutputsWidget';
-import { QuotaRemainingWidget } from 'src/pages/scientificServices/pipelines/widgets/QuotaRemainingWidget';
+import { QuotaDetailsWidget } from 'src/pages/scientificServices/pipelines/widgets/QuotaDetailsWidget';
 
 export const RunJob = () => {
   const signal = useCancellation();
@@ -406,7 +406,7 @@ export const RunJob = () => {
           )}
         </div>
         <div>
-          <QuotaRemainingWidget selectedPipeline={selectedPipeline} />
+          <QuotaDetailsWidget selectedPipeline={selectedPipeline} />
           <PipelineOutputsWidget selectedPipelineDetails={pipelineDetails} />
           <HelpfulTipsWidget selectedPipeline={selectedPipeline} />
         </div>

src/pages/scientificServices/pipelines/widgets/QuotaRemainingWidget.test.tsx renamed to src/pages/scientificServices/pipelines/widgets/QuotaDetailsWidget.test.tsx

@@ -7,7 +7,7 @@ import {
   mockUserPipelineQuotaDetails,
 } from 'src/pages/scientificServices/pipelines/utils/mock-utils';
 
-import { QuotaRemainingWidget } from './QuotaRemainingWidget';
+import { QuotaDetailsWidget } from './QuotaDetailsWidget';
 
 jest.mock('src/libs/ajax/teaspoons/Teaspoons', () => ({
   Teaspoons: () => ({
@@ -16,19 +16,16 @@ jest.mock('src/libs/ajax/teaspoons/Teaspoons', () => ({
   }),
 }));
 
-describe('QuotaRemainingWidget', () => {
+describe('QuotaDetailsWidget', () => {
   it('displays the correct remaining and used quota', async () => {
-    render(<QuotaRemainingWidget selectedPipeline={mockPipeline('test_pipeline')} />);
+    render(<QuotaDetailsWidget selectedPipeline={mockPipeline('test_pipeline')} />);
 
     await waitFor(() => expect(screen.getByText('1250', { exact: false })).toBeInTheDocument());
     await waitFor(() => expect(screen.getByText('750', { exact: false })).toBeInTheDocument());
-
-    const progressBar = screen.getByRole('progressbar');
-    await expect(progressBar).toHaveStyle('background-color: #5CC88D; width: 62.5%');
   });
 
   it('displays the minimum quota consumed for the pipeline', async () => {
-    render(<QuotaRemainingWidget selectedPipeline={mockPipeline('test_pipeline')} />);
+    render(<QuotaDetailsWidget selectedPipeline={mockPipeline('test_pipeline')} />);
 
     await waitFor(() => expect(screen.getByText(/every submitted job will consume at least/i)).toBeInTheDocument());
 
@@ -38,7 +35,7 @@ describe('QuotaRemainingWidget', () => {
   });
 
   it('displays a message when no pipeline is selected', () => {
-    render(<QuotaRemainingWidget selectedPipeline={undefined} />);
+    render(<QuotaDetailsWidget selectedPipeline={undefined} />);
 
     expect(screen.getByText('Select a pipeline to see quota')).toBeInTheDocument();
   });

src/pages/scientificServices/pipelines/widgets/QuotaRemainingWidget.tsx renamed to src/pages/scientificServices/pipelines/widgets/QuotaDetailsWidget.tsx

@@ -7,11 +7,11 @@ import { useUserQuota } from 'src/pages/scientificServices/pipelines/hooks/useUs
 
 import { PipelineWidgetContainer } from './PipelineWidgetContainer';
 
-export const QuotaRemainingWidget = ({ selectedPipeline }: { selectedPipeline?: Pipeline }) => {
+export const QuotaDetailsWidget = ({ selectedPipeline }: { selectedPipeline?: Pipeline }) => {
   const { quota, pipelineDetails, meetsMinimumQuota } = useUserQuota(selectedPipeline);
 
   return (
-    <PipelineWidgetContainer title='Quota Remaining' marginBottom='1rem'>
+    <PipelineWidgetContainer title='Quota Details' marginBottom='1rem'>
       {cond(
         [!selectedPipeline, () => <div style={{ marginTop: '1rem' }}>Select a pipeline to see quota</div>],
         [
@@ -24,48 +24,38 @@ export const QuotaRemainingWidget = ({ selectedPipeline }: { selectedPipeline?:
             }
             return (
               <div style={{ marginTop: '1rem' }}>
-                <div style={{ fontWeight: 'bold', textTransform: 'capitalize' }}>{quota.quotaUnits}</div>
-                <div style={{ marginTop: '0.5rem' }}>
-                  <div
-                    style={{
-                      backgroundColor: '#e4e5e6',
-                      borderRadius: '4px',
-                      overflow: 'hidden',
-                    }}
-                  >
+                <div
+                  style={{
+                    borderLeft: `3px solid ${meetsMinimumQuota ? '#5CC88D' : colors.warning(0.7)}`,
+                    paddingLeft: '1rem',
+                  }}
+                >
+                  <div style={{ marginTop: '0.5rem', gap: '5rem' }}>
                     <div
-                      aria-label={`quota: ${quota.quotaLimit - quota.quotaConsumed} remaining, ${
-                        quota.quotaConsumed
-                      } used`}
-                      role='progressbar'
                       style={{
-                        width: `${((quota.quotaLimit - quota.quotaConsumed) / quota.quotaLimit) * 100}%`,
-                        height: '6px',
-                        backgroundColor: meetsMinimumQuota ? '#5CC88D' : colors.warning(0.6),
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
                       }}
-                    />
-                  </div>
-                </div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '0.5rem', gap: '5rem' }}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'flex-start',
-                    }}
-                  >
-                    <div style={{ fontWeight: 'bold' }}>{quota.quotaLimit - quota.quotaConsumed}</div>
-                    <div style={{ color: '#6B6C6E', marginTop: '0.125rem' }}>Remaining</div>
-                  </div>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'flex-end',
-                    }}
-                  >
-                    <div style={{ fontWeight: 'bold' }}>{quota.quotaConsumed}</div>
-                    <div style={{ color: '#6B6C6E', marginTop: '0.125rem' }}>Used</div>
+                    >
+                      <div style={{ fontWeight: 'bold', fontSize: 16 }}>{quota.quotaLimit - quota.quotaConsumed}</div>
+                      <div style={{ color: '#6B6C6E', marginTop: '0.125rem', fontSize: 13 }}>
+                        {quota.quotaUnits} remaining
+                      </div>
+                    </div>
+                    <div
+                      style={{
+                        marginTop: '0.75rem',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                      }}
+                    >
+                      <div style={{ fontWeight: 'bold', fontSize: 16 }}>{quota.quotaConsumed}</div>
+                      <div style={{ color: '#6B6C6E', marginTop: '0.125rem', fontSize: 13 }}>
+                        {quota.quotaUnits} used
+                      </div>
+                    </div>
                   </div>
                 </div>
                 {pipelineDetails && (