@corva/ui 0.38.0-1 → 0.38.0-6

package/src/components/FolderMenuItem/index.js

@@ -0,0 +1,159 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { Tooltip, makeStyles } from '@material-ui/core';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+
+import { FolderIcon } from './components';
+
+const useStyles = makeStyles(theme => ({
+  folderMenuItem: {
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.b8,
+    color: '#FFFFFF',
+    cursor: 'pointer',
+    display: 'flex',
+    fontSize: '0.875rem',
+    fontWeight: '500',
+    height: 36,
+    justifyContent: 'space-between',
+    paddingLeft: 48,
+    paddingRight: 4,
+    position: 'relative',
+    width: '100%',
+    boxSizing: 'border-box',
+    '&:hover': {
+      backgroundColor: 'rgba(3, 188, 212, 0.07)',
+    },
+    '&:hover svg': {
+      visibility: 'visible',
+    },
+  },
+  folderMenuItemSelected: {
+    backgroundColor: 'rgba(3, 188, 212, 0.15) !important',
+    '&::before': {
+      left: 0,
+      height: '100%',
+      width: 4,
+      backgroundColor: theme.palette.primary.main,
+      position: 'absolute',
+      content: '""',
+      borderRadius: '4px 0 0 4px',
+    },
+  },
+  // TODO: remove icon styles when Icon is implemented
+  icon: {
+    boxSizing: 'content-box',
+    cursor: 'pointer',
+    color: theme.palette.primary.text6,
+    padding: 7,
+    fontSize: '1rem',
+    '&:hover': {
+      color: '#FFFFFF',
+      backgroundColor: 'rgba(51, 51, 51, 0.9)',
+      borderRadius: '50%',
+    },
+    '&:active': {
+      backgroundColor: theme.palette.background.b9,
+    },
+  },
+  addCircleIcon: {
+    visibility: 'hidden',
+  },
+  actions: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  folderIcon: {
+    position: 'absolute',
+    left: 24,
+    top: 8,
+  },
+  folderName: {
+    overflow: 'hidden',
+    marginRight: 4,
+    height: '36px',
+    lineHeight: '36px',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    userSelect: 'none',
+  },
+}));
+
+const FolderMenuItem = ({
+  folderColor,
+  isCreatable,
+  isOpen,
+  isSelected,
+  name,
+  onAdd,
+  onClick,
+  onToggle,
+}) => {
+  const classes = useStyles();
+
+  const ToggleIcon = isOpen
+    ? props => (
+        // eslint-disable-next-line react/jsx-indent
+        <Tooltip title="Collapse" placement="bottom-end">
+          <ExpandLess {...props} />
+        </Tooltip>
+      )
+    : ExpandMore;
+
+  const handleAddItem = e => {
+    e.stopPropagation();
+    onAdd();
+  };
+
+  const handleToggle = e => {
+    e.stopPropagation();
+    onToggle();
+  };
+
+  return (
+    <div
+      className={classNames(
+        classes.folderMenuItem,
+        { [classes.folderMenuItemSelected]: isSelected },
+      )}
+      onClick={onClick}
+    >
+      <FolderIcon color={folderColor} isOpen={isOpen} className={classes.folderIcon} />
+      <div className={classes.folderName}>{name}</div>
+      <div className={classes.actions}>
+        {isCreatable && (
+          <Tooltip title="Add Page" placement="bottom-end">
+            <AddCircleIcon
+              fontSize="small"
+              onClick={handleAddItem}
+              className={classNames(classes.icon, classes.addCircleIcon)}
+            />
+          </Tooltip>
+        )}
+        <ToggleIcon fontSize="small" className={classNames(classes.icon, classes.toggleIcon)} onClick={handleToggle}/>
+      </div>
+    </div>
+  );
+};
+
+FolderMenuItem.propTypes = {
+  folderColor: PropTypes.string.isRequired,
+  isCreatable: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  isSelected: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onAdd: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onToggle: PropTypes.func.isRequired,
+};
+
+FolderMenuItem.defaultProps = {
+  isCreatable: false,
+  isOpen: false,
+  isSelected: false,
+};
+
+export default FolderMenuItem;

package/src/components/FolderMenuItemWithLinks/index.js

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { Collapse, List } from '@material-ui/core';
+
+import FolderMenuItem from '../FolderMenuItem';
+import { EditableItemWithBadge } from '../EditableItem';
+
+const FolderMenuItemWithLinks = ({
+  folderColor,
+  id,
+  isCreatable,
+  isOpen: initialIsOpen,
+  items,
+  name,
+  onAdd,
+  onFolderClick,
+  onItemClick,
+  onSave,
+  selectedItemId,
+}) => {
+  const [isOpen, setIsOpen] = useState(initialIsOpen);
+
+   // eslint-disable-next-line consistent-return
+   const handleFolderClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    if (selectedItemId !== id) {
+      onFolderClick();
+    }
+  };
+
+  const getItemClickHandler = item => () => onItemClick(item);
+
+  const getSaveHandler = id => title => onSave({id, title});
+
+  return (
+    <div>
+      <FolderMenuItem
+        folderColor={folderColor}
+        isCreatable={isCreatable}
+        isOpen={isOpen}
+        isSelected={selectedItemId === id}
+        name={name}
+        onAdd={() => onAdd(id)}
+        onClick={handleFolderClick}
+        onToggle={() => setIsOpen(!isOpen)}
+      />
+      <Collapse in={isOpen} timeout="auto" unmountOnExit>
+        <List disablePadding>
+          { items.map(item => (
+            <EditableItemWithBadge
+              isEditable={item.isEditable}
+              isSelected={selectedItemId === item.id}
+              key={item.id}
+              onClick={getItemClickHandler(item)}
+              onSave={getSaveHandler(item.id)}
+              value={item.title}
+            />
+          )) }
+        </List>
+      </Collapse>
+    </div>
+  );
+};
+
+FolderMenuItemWithLinks.propTypes = {
+  id: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool,
+  selectedItemId: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    isEditable: PropTypes.bool,
+    url: PropTypes.string.isRequired,
+  })),
+  name: PropTypes.string.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onFolderClick: PropTypes.func,
+  folderColor: PropTypes.string.isRequired,
+  isCreatable: PropTypes.bool,
+  onSave: PropTypes.func.isRequired,
+  onAdd: PropTypes.func.isRequired,
+};
+
+FolderMenuItemWithLinks.defaultProps = {
+  isCreatable: false,
+  isOpen: true,
+  items: [],
+  onFolderClick: () => {},
+};
+
+export default FolderMenuItemWithLinks;

package/src/components/GoogleDocsViewer/index.js

@@ -0,0 +1,139 @@
+import { createRef, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Typography from '@material-ui/core/Typography';
+import BackIcon from '@material-ui/icons/ArrowBack';
+
+import LoadingIndicator from '~components/LoadingIndicator';
+
+import styles from './styles.css';
+
+const REQUEST_TIMEOUT = 10000;
+const BYTES_IN_MEGABYTE = 1048576;
+
+const Toolbar = props => (
+  <div className={styles.cGoogleDocsViewerToolbar}>
+    <button
+      type="button"
+      aria-label="Close"
+      className={styles.cGoogleDocsViewerToolbarButton}
+      onClick={props.onClose}
+    >
+      <div className={styles.cGoogleDocsViewerToolbarBackButton}>
+        <BackIcon className={styles.cGoogleDocsViewerToolbarIcon} htmlColor="#b3b3b3" />
+        {props.fileName && (
+          <span className={styles.cGoogleDocsViewerToolbarBackButtonFileName}>
+            {props.fileName}
+          </span>
+        )}
+      </div>
+    </button>
+  </div>
+);
+
+class GoogleDocsViewer extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      reloadsCounter: 0,
+      loading: true,
+      loadingFailed: false,
+    };
+
+    this.frameRef = createRef();
+  }
+
+  componentDidMount() {
+    // NOTE: Workaround when google viewer returns 204:
+    // https://productforums.google.com/forum/#!msg/docs/hmj39HMDP1M/X6a8xJwLBQAJ
+
+    const timeOut =
+      this.props.fileSize && this.props.fileSize >= BYTES_IN_MEGABYTE
+        ? (this.props.fileSize / BYTES_IN_MEGABYTE) * REQUEST_TIMEOUT
+        : REQUEST_TIMEOUT;
+
+    this.frameLoadInterval = setInterval(this.reloadFrame, timeOut);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.frameLoadInterval);
+  }
+
+  get frameLink() {
+    return `https://docs.google.com/viewer?url=${encodeURIComponent(
+      this.props.fileUrl
+    )}&embedded=true`;
+  }
+
+  reloadFrame = () => {
+    if (this.frameRef.current) {
+      this.setState(
+        prevState => ({ reloadsCounter: prevState.reloadsCounter + 1 }),
+        () => {
+          this.frameRef.current.src = this.frameLink;
+        }
+      );
+    }
+  };
+
+  onFrameLoad = () => {
+    this.setState({ loading: false }, () => {
+      clearInterval(this.frameLoadInterval);
+    });
+  };
+
+  render() {
+    const { fileUrl, width, height, fileName, onClose } = this.props;
+    const { loading, loadingFailed } = this.state;
+
+    return (
+      <div className={styles.cGoogleDocsViewer} style={{ width, height }}>
+        <Toolbar fileName={fileName} onClose={onClose} />
+        {loading && <LoadingIndicator white={false} />}
+        {loadingFailed ? (
+          <Typography variant="body2">Loading failed</Typography>
+        ) : (
+          <iframe
+            className={classNames(styles.cGoogleDocsViewerFrame, {
+              [styles.cGoogleDocsViewerFrameHidden]: loading,
+            })}
+            title={fileUrl}
+            src={this.frameLink}
+            onLoad={this.onFrameLoad}
+            ref={this.frameRef}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+GoogleDocsViewer.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  fileUrl: PropTypes.string.isRequired,
+  fileName: PropTypes.string,
+  fileSize: PropTypes.number,
+  onClose: PropTypes.func.isRequired,
+};
+
+Toolbar.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  fileName: PropTypes.string,
+};
+
+GoogleDocsViewer.defaultProps = {
+  width: '100%',
+  height: '100%',
+  fileName: undefined,
+
+  fileSize: undefined,
+};
+
+Toolbar.defaultProps = {
+  fileName: undefined,
+};
+
+export default GoogleDocsViewer;

package/src/components/GoogleDocsViewer/styles.css

@@ -0,0 +1,56 @@
+.cGoogleDocsViewer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cGoogleDocsViewerFrame {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.cGoogleDocsViewerFrameHidden {
+  visibility: 0;
+  height: 0;
+}
+
+.cGoogleDocsViewerToolbarButton {
+  vertical-align: middle;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.cGoogleDocsViewerToolbarButton:focus {
+  outline: none;
+}
+
+.cGoogleDocsViewerToolbarIcon {
+  width: 42px !important;
+  height: 34px !important;
+  padding: 4px 6px;
+}
+
+.cGoogleDocsViewerToolbarIcon:hover {
+  color: '#fff';
+}
+
+.cGoogleDocsViewerToolbar {
+  top: 5px;
+  left: 5px;
+  color: #fff;
+  position: fixed;
+  z-index: 1001;
+}
+
+.cGoogleDocsViewerToolbarBackButton {
+  display: flex;
+  align-items: center;
+}
+
+.cGoogleDocsViewerToolbarBackButtonFileName {
+  font-size: 1rem;
+  color: #fff;
+}

package/src/components/GridLockButton/assets/Locked.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="#dadada" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17 8H18C19.1 8 20 8.9 20 10V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V10C4 8.9 4.9 8 6 8H7V6C7 3.24 9.24 1 12 1C14.76 1 17 3.24 17 6V8ZM12 3C10.34 3 9 4.34 9 6V8H15V6C15 4.34 13.66 3 12 3ZM6 20V10H18V20H6ZM14 15C14 16.1 13.1 17 12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15Z" fill="#dadada"/>
+</svg>

package/src/components/GridLockButton/assets/LockedWhite.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M17 8H18C19.1 8 20 8.9 20 10V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V10C4 8.9 4.9 8 6 8H7V6C7 3.24 9.24 1 12 1C14.76 1 17 3.24 17 6V8ZM12 3C10.34 3 9 4.34 9 6V8H15V6C15 4.34 13.66 3 12 3ZM6 20V10H18V20H6ZM14 15C14 16.1 13.1 17 12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15Z" fill="white"/>
+</svg>

package/src/components/GridLockButton/assets/Unlocked.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6H9C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM6 20V10H18V20H6ZM14 15C14 16.1 13.1 17 12 17C10.9 17 10 16.1 10 15C10 13.9 10.9 13 12 13C13.1 13 14 13.9 14 15Z" fill="#03BCD4"/>
+</svg>

package/src/components/GridLockButton/index.js

@@ -0,0 +1,57 @@
+import { Tooltip, IconButton, makeStyles } from '@material-ui/core';
+import classNames from 'classnames';
+import LockedIcon from './assets/Locked.svg';
+import UnlockedIcon from './assets/Unlocked.svg';
+import LockedWhiteIcon from './assets/LockedWhite.svg';
+
+const LOCK_TEXT = 'Lock Dashboard Layout';
+const UNLOCK_TEXT = 'Unlock Dashboard Layout';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: 36,
+    height: 36,
+    '&:hover': { backgroundColor: theme.palette.background.b7 },
+    borderRadius: '50%',
+  },
+  button: {
+    width: '100%',
+    height: '100%',
+    '&:hover': { backgroundColor: theme.palette.background.b7 },
+  },
+}));
+
+function GridLockButton({
+  className,
+  disabled,
+  isDraggableAndResizable,
+  lockedIcon,
+  onClick,
+  pageName,
+}) {
+  const styles = useStyles();
+  const tooltipText = isDraggableAndResizable ? LOCK_TEXT : UNLOCK_TEXT;
+  return (
+    <Tooltip title={disabled ? "Can't unlock dashboard layout" : tooltipText}>
+      <div className={classNames(styles.root, className)}>
+        <IconButton
+          className={styles.button}
+          color="primary"
+          data-testid={`${pageName}_${isDraggableAndResizable ? 'gridUnlocked' : 'gridLocked'}`}
+          disabled={disabled}
+          onClick={onClick}
+        >
+          <img src={isDraggableAndResizable ? UnlockedIcon : lockedIcon} alt="Lock" />
+        </IconButton>
+      </div>
+    </Tooltip>
+  );
+}
+
+GridLockButton.defaultProps = {
+  lockedIcon: LockedIcon,
+};
+
+GridLockButton.LockedWhiteIcon = LockedWhiteIcon;
+
+export default GridLockButton;

package/src/components/HeaderLayout/HeaderLayout.css

@@ -0,0 +1,57 @@
+.layoutContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.layoutTopLarge {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.layoutTopRightLarge {
+  display: flex;
+  align-items: baseline;
+  justify-content: end;
+  width: auto;
+  overflow: hidden;
+}
+
+.layoutTopSmall {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  overflow: hidden;
+}
+
+.assetChips {
+  overflow: hidden;
+  display: flex;
+  justify-content: end;
+}
+
+.layoutBottomSmall {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding-top: 8px;
+}
+
+.layoutOffsetpicker {
+  display: flex;
+  align-items: center;
+}
+
+.layoutOffsetwellChipsLarge {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.layoutOffsetwellChipsSmall {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}