ManageIQ/manageiq-ui-classic

View on GitHub
app/javascript/components/breadcrumbs/breadcrumbs.jsx

Summary

Maintainability
A
0 mins
Test Coverage
/* eslint-disable react/no-array-index-key */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import PropTypes from 'prop-types';
import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';
import { unescape } from 'lodash';
import { onClickTree, onClick, onClickToExplorer } from './on-click-functions';

// FIXME: don't parse html here
const parsedText = (text) => unescape(text).replace(/<[/]{0,1}strong>/g, '');

const renderItems = ({ items, controllerName }) => items
  .filter((_item, index) => index !== (items.length - 1))
  .map((item, index) => {
    const text = parsedText(item.title);
    if (item.action || (!item.url && !item.key && !item.to_explorer)) {
      return <li key={index} className="inactive-item">{text}</li>;
    }

    if (item.key || item.to_explorer) {
      return (
        <BreadcrumbItem
          key={`${item.key}-${index}`}
          href="#"
          onClick={(e) =>
            (item.to_explorer
              ? onClickToExplorer(e, controllerName, item.to_explorer)
              : onClickTree(e, controllerName, item))}
        >
          {text}
        </BreadcrumbItem>
      );
    }

    return (
      <BreadcrumbItem
        key={item.url || index}
        href={item.url}
        onClick={(e) => onClick(e, item.url)}
      >
        {text}
      </BreadcrumbItem>
    );
  });

export const Breadcrumbs = ({ items, title, controllerName }) => (
  <Breadcrumb noTrailingSlash>
    {items && renderItems({ items, controllerName })}
    <BreadcrumbItem isCurrentPage>
      <strong>
        {items && items.length > 0 ? parsedText(items[items.length - 1].title) : parsedText(title)}
      </strong>
    </BreadcrumbItem>
  </Breadcrumb>
);

Breadcrumbs.propTypes = {
  controllerName: PropTypes.string.isRequired,
  items: PropTypes.arrayOf(PropTypes.shape({
    action: PropTypes.string,
    key: PropTypes.string,
    title: PropTypes.string.isRequired,
    url: PropTypes.string,
  })),
  title: PropTypes.string.isRequired,
};

Breadcrumbs.defaultProps = {
  items: null,
};