18881: Make all process status widgets consistent. Updates tests.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/views-components/data-explorer/renderers.test.tsx b/src/views-components/data-explorer/renderers.test.tsx
index fc9325bd2db66a47459000e74162a9dbf56fb09a..229d99094ed36ed7fd5500fc0607cbfc4092a102 100644 (file)
--- a/src/views-components/data-explorer/renderers.test.tsx
+++ b/src/views-components/data-explorer/renderers.test.tsx
@@ -35,7 +35,15 @@ describe('renderers', () => {
                         red900: 'rgb(255, 0, 0)',
                         grey500: 'rgb(128, 128, 128)',
                     }
-                }
+                },
+                spacing: {
+                    unit: 8,
+                },
+                palette: {
+                    common: {
+                        white: 'rgb(255, 255, 255)',
+                    },
+                },
             },
         };
 
@@ -75,7 +83,9 @@ describe('renderers', () => {
 
                 expect(wrapper.text()).toEqual(eLabel);
                 expect(getComputedStyle(wrapper.getDOMNode())
-                    .getPropertyValue('color')).toEqual(eColor);
+                    .getPropertyValue('color')).toEqual(props.theme.palette.common.white);
+                expect(getComputedStyle(wrapper.getDOMNode())
+                    .getPropertyValue('background-color')).toEqual(eColor);
             });
         })
     });

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index e854da0ee6caeebfdfd41af58dc8a081b58ecf0e..fe1bd07cc52effa2f57fb74af390824dab422a74 100644 (file)
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -3,7 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox } from '@material-ui/core';
+import {
+    Grid,
+    Typography,
+    withStyles,
+    Tooltip,
+    IconButton,
+    Checkbox,
+    Chip
+} from '@material-ui/core';
 import { FavoriteStar, PublicFavoriteStar } from '../favorite-star/favorite-star';
 import { Resource, ResourceKind, TrashableResource } from 'models/resource';
 import {
@@ -827,11 +835,16 @@ export const ProcessStatus = compose(
     withStyles({}, { withTheme: true }))
     ((props: { process?: Process, theme: ArvadosTheme }) => {
         const status = props.process ? getProcessStatus(props.process) : "-";
-        return <Typography
-            noWrap
-            style={{ color: getProcessStatusColor(status, props.theme) }} >
-            {status}
-        </Typography>;
+        return <Chip label={status}
+            style={{
+                height: props.theme.spacing.unit * 3,
+                width: props.theme.spacing.unit * 12,
+                backgroundColor: getProcessStatusColor(status, props.theme),
+                color: props.theme.palette.common.white,
+                fontSize: '0.875rem',
+                borderRadius: props.theme.spacing.unit * 0.625,
+            }}
+        />;
     });
 
 export const ProcessStartDate = connect(

diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index 8f16db70c422f975b43950fe87e822b004f0812e..4fcbf257ef7717a77ffe75f8292aa6d08faaa01e 100644 (file)
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -4,21 +4,29 @@
 
 import React from 'react';
 import {
-    StyleRulesCallback, WithStyles, withStyles, Card,
-    CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
+    StyleRulesCallback,
+    WithStyles,
+    withStyles,
+    Card,
+    CardHeader,
+    IconButton,
+    CardContent,
+    Grid,
+    Typography,
+    Tooltip
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { CloseIcon, MoreOptionsIcon, ProcessIcon } from 'components/icon/icon';
 import { DetailsAttribute } from 'components/details-attribute/details-attribute';
 import { Process } from 'store/processes/process';
-import { getProcessStatus, getProcessStatusColor } from 'store/processes/process';
 import { formatDate } from 'common/formatters';
 import classNames from 'classnames';
 import { ContainerState } from 'models/container';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { ProcessRuntimeStatus } from 'views-components/process-runtime-status/process-runtime-status';
+import { ProcessStatus } from 'views-components/data-explorer/renderers';
 
-type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton' | 'header';
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton' | 'header';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -54,13 +62,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
             cursor: 'pointer'
         }
     },
-    chip: {
-        height: theme.spacing.unit * 3,
-        width: theme.spacing.unit * 12,
-        color: theme.palette.common.white,
-        fontSize: '0.875rem',
-        borderRadius: theme.spacing.unit * 0.625,
-    },
     content: {
         paddingTop: '0px',
         paddingLeft: theme.spacing.unit * 1,
@@ -111,9 +112,7 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
                     <div>
                         {process.container && process.container.state === ContainerState.RUNNING &&
                             <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
-                        <Chip label={getProcessStatus(process)}
-                            className={classes.chip}
-                            style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
+                        <ProcessStatus uuid={process.containerRequest.uuid} />
                         <Tooltip title="More options" disableFocusListener>
                             <IconButton
                                 aria-label="More options"