4734265692

Build Type

push

github

Committed by GitHub

Commit Message

Merge pull request #3753 from carbon-design-system/feat-3663

Run Details

7709 of 8041 branches covered (95.87%)

Branch coverage included in aggregate %.

9300 of 9401 relevant lines covered (98.93%)

2237.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.33

/packages/react/src/components/Dashboard/DashboardHeader.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { SkeletonText } from 'carbon-components-react';
import warning from 'warning';

import icons, { bundledIconNames } from '../../utils/bundledIcons';
import { settings } from '../../constants/Settings';
import Button from '../Button';
import { SvgPropType } from '../../constants/SharedPropTypes';

const { prefix } = settings;

const propTypes = {
  /** title of the dashboard */
  title: PropTypes.string,
  /** Optional description of the dashboard */
  description: PropTypes.string,
  /** string that represents the last updated date */
  lastUpdated: PropTypes.string,
  /** i18n label for last updated text */
  lastUpdatedLabel: PropTypes.string,
  /** Optional filter component that might be used to filter this dashboard */
  filter: PropTypes.node,
  /** If the component should render the last updated section */
  hasLastUpdated: PropTypes.bool,
  /** optional actions that will be rendered in the Dashboard header and used in onDashboardAction */
  actions: PropTypes.arrayOf(
    PropTypes.shape({
      /** Unique id of the action */
      id: PropTypes.string.isRequired,
      /** used as the description to show for the icon */
      labelText: PropTypes.string,
      /** icon ultimately gets passed through all the way to <Button>, which has this same copied proptype definition for icon */
      icon: PropTypes.oneOfType([
        PropTypes.oneOf(bundledIconNames),
        PropTypes.shape({
          width: PropTypes.string,
          height: PropTypes.string,
          viewBox: PropTypes.string.isRequired,
          svgData: SvgPropType.isRequired,
        }),
        PropTypes.object, // Could be a react icon name
        PropTypes.element,
      ]),
      /** Optional custom component */
      customActionComponent: PropTypes.node,
    })
  ),
  /** callback invoked if a dashboard action is clicked */
  onDashboardAction: PropTypes.func,

  testId: PropTypes.string,
};

const defaultProps = {
  title: null,
  description: null,
  lastUpdated: null,
  lastUpdatedLabel: 'Last updated:',
  filter: null,
  actions: [],
  onDashboardAction: null,
  hasLastUpdated: true,
  testId: 'dashboard-header',
};

/** Renders the dashboard header at the top of the dashboard */
const DashboardHeader = ({
  title,
  description,
  lastUpdated,
  lastUpdatedLabel,
  filter,
  hasLastUpdated,
  actions,
  onDashboardAction,
  testId,
}) => {
  if (__DEV__) {
    warning(
      false,
      'Dashboard component has been deprecated and will be removed in the next release of `carbon-addons-iot-react`.'
    );
  }
  return (
    <div data-testid={testId} className="dashboard--header">
      <div className="dashboard--header-left">
        {title ? <h2>{title}</h2> : null}
        {description ? <p>{description}</p> : null}
        {hasLastUpdated && lastUpdatedLabel ? (
          <div className="dashboard--lastupdated">
            {lastUpdatedLabel} {lastUpdated || <SkeletonText />}
          </div>
        ) : null}
      </div>
      <div className="dashboard--header-right">
        {filter}
        <div className="dashboard--header-actions">
          {actions.map((action) =>
            action.icon ? (
              <Button
                className={`${prefix}--btn--icon-only`}
                id={`action-icon--${action.id}`}
                key={action.id}
                onClick={() => onDashboardAction(action.id)}
                kind="ghost"
                title={action.labelText}
                renderIcon={
                  typeof action.icon === 'string' // legacy support for naming the icon by string
                    ? icons[action.icon]
                    : React.isValidElement(action.icon)
                    ? (props) => React.cloneElement(action.icon, props)
                    : action.icon // alternatively you can pass the
                }
                iconDescription={action.labelText}
                testId={`${testId}-button-${action.id}`}
              />
            ) : (
              React.cloneElement(action.customActionComponent, {
                key: `icon-${action.id}`,
              })
            )
          )}
        </div>
      </div>
    </div>
  );
};

DashboardHeader.propTypes = propTypes;
DashboardHeader.defaultProps = defaultProps;

export default DashboardHeader;

1	import React from 'react';
2	import PropTypes from 'prop-types';
3	import { SkeletonText } from 'carbon-components-react';
4	import warning from 'warning';
5
6	import icons, { bundledIconNames } from '../../utils/bundledIcons';
7	import { settings } from '../../constants/Settings';
8	import Button from '../Button';
9	import { SvgPropType } from '../../constants/SharedPropTypes';
10
11	const { prefix } = settings;	5✔
12
13	const propTypes = {	5✔
14	/** title of the dashboard */
15	title: PropTypes.string,
16	/** Optional description of the dashboard */
17	description: PropTypes.string,
18	/** string that represents the last updated date */
19	lastUpdated: PropTypes.string,
20	/** i18n label for last updated text */
21	lastUpdatedLabel: PropTypes.string,
22	/** Optional filter component that might be used to filter this dashboard */
23	filter: PropTypes.node,
24	/** If the component should render the last updated section */
25	hasLastUpdated: PropTypes.bool,
26	/** optional actions that will be rendered in the Dashboard header and used in onDashboardAction */
27	actions: PropTypes.arrayOf(
28	PropTypes.shape({
29	/** Unique id of the action */
30	id: PropTypes.string.isRequired,
31	/** used as the description to show for the icon */
32	labelText: PropTypes.string,
33	/** icon ultimately gets passed through all the way to <Button>, which has this same copied proptype definition for icon */
34	icon: PropTypes.oneOfType([
35	PropTypes.oneOf(bundledIconNames),
36	PropTypes.shape({
37	width: PropTypes.string,
38	height: PropTypes.string,
39	viewBox: PropTypes.string.isRequired,
40	svgData: SvgPropType.isRequired,
41	}),
42	PropTypes.object, // Could be a react icon name
43	PropTypes.element,
44	]),
45	/** Optional custom component */
46	customActionComponent: PropTypes.node,
47	})
48	),
49	/** callback invoked if a dashboard action is clicked */
50	onDashboardAction: PropTypes.func,
51
52	testId: PropTypes.string,
53	};
54
55	const defaultProps = {	5✔
56	title: null,
57	description: null,
58	lastUpdated: null,
59	lastUpdatedLabel: 'Last updated:',
60	filter: null,
61	actions: [],
62	onDashboardAction: null,
63	hasLastUpdated: true,
64	testId: 'dashboard-header',
65	};
66
67	/** Renders the dashboard header at the top of the dashboard */
68	const DashboardHeader = ({	5✔
69	title,
70	description,
71	lastUpdated,
72	lastUpdatedLabel,
73	filter,
74	hasLastUpdated,
75	actions,
76	onDashboardAction,
77	testId,
78	}) => {
79	if (__DEV__) {	45!
80	warning(	×
81	false,
82	'Dashboard component has been deprecated and will be removed in the next release of `carbon-addons-iot-react`.'
83	);
84	}
85	return (	45✔
86	<div data-testid={testId} className="dashboard--header">
87	<div className="dashboard--header-left">
88	{title ? <h2>{title}</h2> : null}	45✔
89	{description ? <p>{description}</p> : null}	45✔
90	{hasLastUpdated && lastUpdatedLabel ? (	126✔
91	<div className="dashboard--lastupdated">
92	{lastUpdatedLabel} {lastUpdated \|\| <SkeletonText />}	45✔
93	</div>
94	) : null}
95	</div>
96	<div className="dashboard--header-right">
97	{filter}
98	<div className="dashboard--header-actions">
99	{actions.map((action) =>
100	action.icon ? (	35✔
101	<Button
102	className={`${prefix}--btn--icon-only`}
103	id={`action-icon--${action.id}`}
104	key={action.id}
105	onClick={() => onDashboardAction(action.id)}	1✔
106	kind="ghost"
107	title={action.labelText}
108	renderIcon={
109	typeof action.icon === 'string' // legacy support for naming the icon by string	30✔
110	? icons[action.icon]
111	: React.isValidElement(action.icon)	14✔
112	? (props) => React.cloneElement(action.icon, props)	14✔
113	: action.icon // alternatively you can pass the
114	}
115	iconDescription={action.labelText}
116	testId={`${testId}-button-${action.id}`}
117	/>
118	) : (
119	React.cloneElement(action.customActionComponent, {
120	key: `icon-${action.id}`,
121	})
122	)
123	)}
124	</div>
125	</div>
126	</div>
127	);
128	};
129
130	DashboardHeader.propTypes = propTypes;	5✔
131	DashboardHeader.defaultProps = defaultProps;	5✔
132
133	export default DashboardHeader;

carbon-design-system / carbon-addons-iot-react / 4734265692

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous