feat: Support decimal values in table progress cell type #824 (#2329)

Author: dbranley

ui/src/progress_table_cell_type.test.tsx

@@ -19,7 +19,14 @@ import { ProgressTableCellType, XProgressTableCellType } from './progress_table_
 const
   name = 'progress-cell',
   progress = 0.0,
-  progressCellProps: ProgressTableCellType = { name }
+  progressCellProps: ProgressTableCellType = { name },
+  progressValues = [
+    {input: 0.88, output: '88%'},
+    {input: 0.888, output: '88.8%'},
+    {input: 0.8888, output: '88.88%'},
+    {input: 0.88888, output: '88.89%'},
+    {input: 0.88899, output: '88.90%'},
+    {input: 0.88999, output: '89.00%'},]  
 
 describe('ProgressTableCellType.tsx', () => {
 
@@ -32,4 +39,13 @@ describe('ProgressTableCellType.tsx', () => {
     const { queryByTestId } = render(<XProgressTableCellType model={progressCellProps} progress={progress} />)
     expect(queryByTestId(name)).toBeInTheDocument()
   })
+
+  it('Renders data-test attr with decimal values', () => {
+    const { queryByTestId, rerender } = render(<XProgressTableCellType model={progressCellProps} progress={progress} />)
+    progressValues.map(progressValue => {
+      rerender(<XProgressTableCellType model={progressCellProps} progress={progressValue.input} />)
+      expect(queryByTestId(name)).toBeInTheDocument()
+      expect(queryByTestId(name)).toHaveTextContent(progressValue.output)      
+    })
+  })  
 })

ui/src/progress_table_cell_type.tsx

@@ -50,7 +50,7 @@ export const XProgressTableCellType = ({ model: m, progress }: { model: Progress
   <div data-test={m.name} className={css.container}>
     <ProgressArc thickness={2} color={cssVar(m.color || '$red')} value={progress} />
     <Fluent.Stack horizontalAlign='center' verticalAlign='center' className={clas(css.percentContainer, 'wave-s12')}>
-      <div className={css.percent}>{`${Math.round(progress * 100)}%`}</div>
+      <div className={css.percent}>{`${Number.isInteger(progress * 1000) ? (progress * 100) : (progress * 100).toFixed(2)}%`}</div>
     </Fluent.Stack>
   </div >
 )