@cdc/dashboard 1.1.2 → 9.22.9

package/src/components/Header.jsx

@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useContext } from 'react'
+
+import ConfigContext from '../ConfigContext'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import Modal from '@cdc/core/components/ui/Modal'
+
+const Header = ({setPreview, tabSelected, setTabSelected, back, subEditor = null}) => {
+
+  const {
+    config,
+    updateConfig,
+    setParentConfig
+  } = useContext(ConfigContext);
+
+  const { overlay } = useGlobalContext()
+
+  const [ columns, setColumns ] = useState([])
+
+  const changeConfigValue = (parentObj, key, value) => {
+
+    let newConfig = {...config};
+    if(!newConfig[parentObj]) newConfig[parentObj] = {};
+    newConfig[parentObj][key] = value;
+
+    updateConfig(newConfig)
+  }
+
+  const setTab = (index) => {
+    setTabSelected(index)
+    if(index === 3){
+      setPreview(true)
+    } else {
+      setPreview(false)
+    }
+  }
+
+  const addNewFilter = () => {
+    let dashboardConfig = {...config.dashboard};
+
+    dashboardConfig.sharedFilters = dashboardConfig.sharedFilters || [];
+
+    dashboardConfig.sharedFilters.push({key: 'Dashboard Filter ' + (dashboardConfig.sharedFilters.length + 1), values: []});
+
+    updateConfig({...config, dashboard: dashboardConfig});
+
+  }
+
+  const removeFilter = (index) => {
+    let dashboardConfig = {...config.dashboard};
+
+    dashboardConfig.sharedFilters.splice(index, 1);
+
+    updateConfig({...config, dashboard: dashboardConfig});
+
+    overlay?.actions.toggleOverlay();
+  }
+
+  const convertStateToConfig = (type = "JSON") => {
+    let strippedState = JSON.parse(JSON.stringify(config))
+    delete strippedState.newViz
+    delete strippedState.runtime
+
+    if(type === "JSON") {
+      return JSON.stringify( strippedState )
+    }
+
+    return strippedState
+  }
+
+  useEffect(() => {
+    const parsedData = convertStateToConfig()
+
+    // Emit the data in a regular JS event so it can be consumed by anything.
+    const event = new CustomEvent('updateVizConfig', { detail: parsedData})
+
+    window.dispatchEvent(event)
+
+    // Pass up to Editor if needed
+    if(setParentConfig) {
+      const newConfig = convertStateToConfig("object")
+      setParentConfig(newConfig)
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
+  useEffect(() => {
+    const runSetColumns = async () => {
+      let columns = {};
+      let dataKeys = Object.keys(config.datasets);
+
+      for(let i = 0; i < dataKeys.length; i++){
+        if(!config.datasets[dataKeys[i]].data && config.datasets[dataKeys[i]].dataUrl){
+          config.datasets[dataKeys[i]].data = await fetchRemoteData(config.datasets[dataKeys[i]].dataUrl);
+          if(config.datasets[dataKeys[i]].dataDescription) {
+            try {
+              config.datasets[dataKeys[i]].data = transform.autoStandardize(config.datasets[dataKeys[i]].data);
+              config.datasets[dataKeys[i]].data = transform.developerStandardize(config.datasets[dataKeys[i]].data, config.datasets[dataKey].dataDescription);
+            } catch(e) {
+              //Data not able to be standardized, leave as is
+            }
+          }
+        }
+
+        if(config.datasets[dataKeys[i]].data) {
+          config.datasets[dataKeys[i]].data.map(row => {
+            Object.keys(row).forEach(columnName => columns[columnName] = true)
+          })
+        }
+      }
+
+      setColumns(Object.keys(columns))
+    }
+
+    runSetColumns()
+  }, [config.datasets]);
+
+  const filterModal = (filter, index) => {
+
+    const saveChanges = () => {
+      let tempConfig = {...config.dashboard};
+      tempConfig.sharedFilters[index] = filter;
+
+      updateConfig({...config, dashboard: tempConfig});
+  
+      overlay?.actions.toggleOverlay()
+    }
+
+    const updateFilterProp = (name, index, value) => {
+      let newFilter = {...filter};
+
+      newFilter[name] = value;
+
+      overlay?.actions.openOverlay(filterModal(newFilter, index))
+    }
+
+    const addFilterUsedBy = (filter, index, value) => {
+      if(!filter.usedBy) filter.usedBy = [];
+      filter.usedBy.push(value);
+      updateFilterProp('usedBy', index, filter.usedBy);
+    }
+  
+    const removeFilterUsedBy = (filter, index, value) => {
+      let usedByIndex = filter.usedBy.indexOf(value);
+      if(usedByIndex !== -1){
+        filter.usedBy.splice(usedByIndex, 1);
+        updateFilterProp('usedBy', index, filter.usedBy);
+      }
+  
+    }
+    
+    return (
+      <Modal>
+        <Modal.Content>
+          <h2>Dashboard Filter Settings</h2>
+          <fieldset className="shared-filter-modal" key={filter.columnName + index}>
+            <button type="button" className="btn btn-primary remove-column" onClick={() => {removeFilter(index)}}>Remove Filter</button>
+            <label>
+              <span className="edit-label column-heading">Filter: </span>
+              <select value={filter.columnName} onChange={(e) => {updateFilterProp('columnName', index, e.target.value)}}>
+                <option value="">- Select Option -</option>
+                {columns.map((dataKey) => (
+                  <option value={dataKey} key={`filter-column-select-item-${dataKey}`}>{dataKey}</option>
+                ))}
+              </select>
+            </label>
+            <label>
+              <span className="edit-label column-heading">Label: </span>
+              <input type="text" value={filter.key} onChange={(e) => {updateFilterProp('key', index, e.target.value)}}/>
+            </label>
+            <label>
+              <span className="edit-label column-heading">Show Dropdown</span>
+              <input type="checkbox" defaultChecked={filter.showDropdown === true} onChange={(e) => {updateFilterProp('showDropdown', index, !filter.showDropdown)}}/>
+            </label>
+            <label>
+              <span className="edit-label column-heading">Set By: </span>
+              <select value={filter.setBy} onChange={e => updateFilterProp('setBy', index, e.target.value)}>
+                <option value="">- Select Option -</option>
+                {Object.keys(config.visualizations).map((vizKey) => (
+                  <option value={vizKey} key={`set-by-select-item-${vizKey}`}>{config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : (config.visualizations[vizKey].title || vizKey)}</option>
+                ))}
+              </select>
+            </label>
+            <label>
+              <span className="edit-label column-heading">Used By:</span>
+              <ul>
+                {filter.usedBy && filter.usedBy.map(vizKey => (
+                  <li key={`used-by-list-item-${vizKey}`}><span>{config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : (config.visualizations[vizKey].title || vizKey)}</span> <button onClick={(e) => {e.preventDefault();removeFilterUsedBy(filter, index, vizKey)}}>X</button></li>
+                ))}
+              </ul>
+              <select onChange={e => addFilterUsedBy(filter, index, e.target.value)}>
+                <option value="">- Select Option -</option>
+                {Object.keys(config.visualizations).filter(vizKey => filter.setBy !== vizKey && (!filter.usedBy || filter.usedBy.indexOf(vizKey) === -1) && !config.visualizations[vizKey].usesSharedFilter).map((vizKey) => (
+                  <option value={vizKey} key={`used-by-select-item-${vizKey}`}>{config.visualizations[vizKey].general && config.visualizations[vizKey].general.title ? config.visualizations[vizKey].general.title : (config.visualizations[vizKey].title || vizKey)}</option>
+                ))}
+              </select>
+            </label>
+          </fieldset>
+          <button type="button" className="btn btn-primary" style={{display: 'inline-block', 'margin-right': '1em'}} onClick={overlay?.actions.toggleOverlay}>Cancel</button>
+          <button type="button" className="btn btn-primary" style={{display: 'inline-block'}} onClick={saveChanges}>Save</button>
+        </Modal.Content>
+      </Modal>
+    )
+  }
+
+  return (
+    <div aria-level="2" role="heading" className={`editor-heading${subEditor ? ' sub-dashboard-viz' : ''}`}>
+      {subEditor ? <div className="heading-1 back-to" onClick={back} style={{cursor: 'pointer'}}><span>&#8592;</span> Back to Dashboard</div> : <div className="heading-1">Dashboard Editor<br/>{<input type="text" placeholder="Enter Dashboard Name Here" defaultValue={config.dashboard.title} onChange={e => changeConfigValue('dashboard', 'title', e.target.value)}/>}</div>}
+      {!subEditor && <div>
+        <ul className="toggle-bar">
+          <li className={tabSelected === 0 ? 'active' : 'inactive'} onClick={() => {setTab(0)}}>Dashboard Description</li>
+          <li className={tabSelected === 1 ? 'active' : 'inactive'} onClick={() => {setTab(1)}}>Dashboard Filters</li>
+          <li className={tabSelected === 2 ? 'active' : 'inactive'} onClick={() => {setTab(2)}}>Data Table Settings</li>
+          <li className={tabSelected === 3 ? 'active' : 'inactive'} onClick={() => {setTab(3)}}>Dashboard Preview</li>
+        </ul>
+        <div className="heading-body">
+          {tabSelected === 0 && <input type="text" className="description-input" placeholder="Type a dashboard description here." defaultValue={config.dashboard.description} onChange={e => changeConfigValue('dashboard', 'description', e.target.value)} />}
+          {tabSelected === 1 && (
+            <>
+              {config.dashboard.sharedFilters && config.dashboard.sharedFilters.map((sharedFilter, index) => (
+                <span className="shared-filter-button" key={`shared-filter-${sharedFilter.key}`}>
+                  <a href="#" onClick={(e) => {e.preventDefault(); overlay?.actions.openOverlay(filterModal(sharedFilter, index))}}>{sharedFilter.key}</a>
+                  <button onClick={() => removeFilter(index)}>X</button>
+                </span>
+              ))}
+              <button onClick={addNewFilter}>Add New Filter</button></>
+          )}
+          {tabSelected === 2 && (
+            <>
+              <label>Show Table</label><input type="checkbox" defaultChecked={config.table.show} onChange={e => changeConfigValue('table', 'show', e.target.checked)}  />
+              <label>Expanded by Default</label><input type="checkbox" defaultChecked={config.table.expanded} onChange={e => changeConfigValue('table', 'expanded', e.target.checked)} />
+              <label>Display Download Button</label><input type="checkbox" defaultChecked={config.table.download} onChange={e => changeConfigValue('table', 'download', e.target.checked)} />
+            </>
+          )}
+        </div>
+      </div>}
+    </div>
+  )
+}
+
+export default Header

package/src/components/Row.js

@@ -135,3 +135,4 @@ const Row = ({ row, idx: rowIdx, uuid}) => {
 }
 
 export default Row
+ 

package/src/components/Row.jsx

@@ -0,0 +1,181 @@
+import React, { useContext, useState } from 'react'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import ConfigContext from '../ConfigContext'
+
+import Modal from '@cdc/core/components/ui/Modal'
+import InputToggle from '@cdc/core/components/inputs/InputToggle'
+import Icon from '@cdc/core/components/ui/Icon'
+
+import Column from './Column'
+
+import OneColIcon from '../images/icon-col-12.svg'
+import TwoColIcon from '../images/icon-col-6.svg'
+import ThreeColIcon from '../images/icon-col-4.svg'
+import FourEightColIcon from '../images/icon-col-4-8.svg'
+import EightFourColIcon from '../images/icon-col-8-4.svg'
+
+const RowMenu = ({ rowIdx, row }) => {
+  const { overlay } = useGlobalContext()
+  const { rows, config, updateConfig } = useContext(ConfigContext)
+
+  const getCurr = () => {
+    let res = []
+
+    for (let i = 0; i < row.length; i++) {
+      if (row[i].width) res.push(row[i].width)
+    }
+
+    return res.join('')
+  }
+
+  const [ curr, setCurr ] = useState(getCurr())
+  const [ equalHeight, setEqualHeight ] = useState(false)
+
+  const setRowLayout = (layout) => {
+    const newRows = [ ...rows ]
+    const r = newRows[rowIdx]
+
+    for (let i = 0; i < r.length; i++) {
+      r[i].width = layout[i] ?? null
+    }
+
+    updateConfig({ ...config, rows: newRows })
+    setCurr(layout.join(''))
+  }
+
+  const moveRow = (dir = 'down') => {
+    if (rowIdx === rows.length - 1 && dir === 'down') return
+
+    let newIdx = dir === 'down' ? rowIdx + 1 : rowIdx - 1
+
+    // Swap
+    const temp = rows[newIdx]
+
+    rows[newIdx] = row
+    rows[rowIdx] = temp
+
+    rows[newIdx].uuid = Date.now()
+    rows[rowIdx].uuid = Date.now()
+
+    updateConfig({ ...config, rows })
+
+    // TODO: Migrate this animation to a React animation library once one is selected for COVE. This is pretty minor so can stay for now.
+    let calcRowMove = dir === 'down' ? 202 : -202
+    let calcRowMove2 = dir === 'down' ? -202 : 202
+
+    let rowEle = document.querySelector('[data-row-id=\'' + rowIdx + '\']')
+    let rowNewEle = document.querySelector('[data-row-id=\'' + newIdx + '\']')
+
+    rowEle.style.pointerEvents = 'none'
+    rowNewEle.style.pointerEvents = 'none'
+    rowEle.style.top = calcRowMove + 'px'
+    rowNewEle.style.top = calcRowMove2 + 'px'
+
+    setTimeout(() => {
+      rowEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowNewEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowEle.style.top = '0'
+      rowNewEle.style.top = '0'
+    }, 0)
+
+    setTimeout(() => {
+      rowEle.style = null
+      rowNewEle.style = null
+    }, 500)
+  }
+
+  const deleteRow = () => {
+    rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
+
+    updateConfig({ ...config, rows })
+  }
+
+  const rowItemsHeight = () => {
+    setEqualHeight(!equalHeight)
+
+    row.equalHeight = !equalHeight
+  }
+
+  const layoutList = [
+    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 12 ])} key="12" title="1 Column">
+      <OneColIcon/>
+    </li>,
+    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 6, 6 ])} key="66" title="2 Columns">
+      <TwoColIcon/>
+    </li>,
+    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 4, 4 ])} key="444" title="3 Columns">
+      <ThreeColIcon/>
+    </li>,
+    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 8 ])} key="48" title="2 Columns">
+      <FourEightColIcon/>
+    </li>,
+    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 8, 4 ])} key="84" title="2 Columns">
+      <EightFourColIcon/>
+    </li>
+  ]
+
+  const rowSettings = (
+    <Modal>
+      <Modal.Header>
+        Row Settings
+      </Modal.Header>
+      <Modal.Content>
+        <InputToggle
+          label="Visualizations in this row should be equal height"
+          fieldName={`toggleEqualHeight${rowIdx}`}
+          value={row.equalHeight ? row.equalHeight : false}
+          updateField={rowItemsHeight}
+        ></InputToggle>
+      </Modal.Content>
+    </Modal>
+  )
+
+  return (
+    <nav className="row-menu">
+      <div className="row-menu__btn">
+        <ul className="row-menu__flyout">
+          {layoutList}
+        </ul>
+      </div>
+      <div className="spacer"></div>
+      {/*<button className={'row-menu__btn'} title="Row Settings"*/}
+      {/*        onClick={() => overlay?.actions.openOverlay(rowSettings)}>*/}
+      {/*  <Icon display="edit" color="#fff" size={25}/>*/}
+      {/*</button>*/}
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up"
+              onClick={() => moveRow('up')}>
+        <Icon display="caretUp" color="#fff" size={25}/>
+      </button>
+      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'}
+              title="Move Row Down" onClick={() => moveRow('down')}>
+        <Icon display="caretDown" color="#fff" size={25}/>
+      </button>
+      <button
+        className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'}
+        title="Delete Row" onClick={deleteRow}>
+        <Icon display="close" color="#fff" size={25}/>
+      </button>
+    </nav>
+  )
+}
+
+const Row = ({ row, idx: rowIdx, uuid }) => {
+  return (
+    <div className="builder-row" data-row-id={rowIdx}>
+      <RowMenu rowIdx={rowIdx} row={row}/>
+      <div className="column-container">
+        {row.filter(column => column.width).map((column, colIdx) => <Column data={column}
+                                                                            key={`row-${uuid}-col-${colIdx}`}
+                                                                            rowIdx={rowIdx} colIdx={colIdx}/>)}
+      </div>
+    </div>
+  )
+}
+
+export default Row

package/src/components/Row.jsx~HEAD

@@ -0,0 +1,212 @@
+import React, { useContext, useState } from 'react'
+
+import { useGlobalContext } from '@cdc/core/components/GlobalContext'
+import ConfigContext from '../ConfigContext'
+
+import Modal from '@cdc/core/components/ui/Modal'
+import InputToggle from '@cdc/core/components/inputs/InputToggle'
+import Icon from '@cdc/core/components/ui/Icon'
+
+import Column from './Column'
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+
+=======
+import Context from '../context'
+import CloseIcon from '../images/icon-close.svg'
+import RowUp from '../images/icon-up.svg'
+import RowDown from '../images/icon-down.svg'
+>>>>>>> test:packages/dashboard/src/components/Row.js
+import OneColIcon from '../images/icon-col-12.svg'
+import TwoColIcon from '../images/icon-col-6.svg'
+import ThreeColIcon from '../images/icon-col-4.svg'
+import FourEightColIcon from '../images/icon-col-4-8.svg'
+import EightFourColIcon from '../images/icon-col-8-4.svg'
+
+const RowMenu = ({ rowIdx, row }) => {
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const { overlay } = useGlobalContext()
+  const { rows, config, updateConfig } = useContext(ConfigContext)
+=======
+  const { rows, config, updateConfig } = useContext(Context)
+>>>>>>> test:packages/dashboard/src/components/Row.js
+
+  const getCurr = () => {
+    let res = []
+
+    for (let i = 0; i < row.length; i++) {
+      if (row[i].width) res.push(row[i].width)
+    }
+
+    return res.join('')
+  }
+
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const [ curr, setCurr ] = useState(getCurr())
+  const [ equalHeight, setEqualHeight ] = useState(false)
+=======
+  const [curr, setCurr] = useState(getCurr())
+>>>>>>> test:packages/dashboard/src/components/Row.js
+
+  const setRowLayout = (layout) => {
+    const newRows = [ ...rows ]
+    const r = newRows[rowIdx]
+
+    for (let i = 0; i < r.length; i++) {
+      r[i].width = layout[i] ?? null
+    }
+
+    updateConfig({ ...config, rows: newRows })
+    setCurr(layout.join(''))
+  }
+
+  const moveRow = (dir = 'down') => {
+    if (rowIdx === rows.length - 1 && dir === 'down') return
+
+    let newIdx = dir === 'down' ? rowIdx + 1 : rowIdx - 1
+
+    // Swap
+    const temp = rows[newIdx]
+
+    rows[newIdx] = row
+    rows[rowIdx] = temp
+
+    rows[newIdx].uuid = Date.now()
+    rows[rowIdx].uuid = Date.now()
+
+    updateConfig({ ...config, rows })
+
+    // TODO: Migrate this animation to a React animation library once one is selected for COVE. This is pretty minor so can stay for now.
+    let calcRowMove = dir === 'down' ? 202 : -202
+    let calcRowMove2 = dir === 'down' ? -202 : 202
+
+    let rowEle = document.querySelector('[data-row-id=\'' + rowIdx + '\']')
+    let rowNewEle = document.querySelector('[data-row-id=\'' + newIdx + '\']')
+
+    rowEle.style.pointerEvents = 'none'
+    rowNewEle.style.pointerEvents = 'none'
+    rowEle.style.top = calcRowMove + 'px'
+    rowNewEle.style.top = calcRowMove2 + 'px'
+
+    setTimeout(() => {
+      rowEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowNewEle.style.transition = 'top 500ms cubic-bezier(0.16, 1, 0.3, 1)'
+      rowEle.style.top = '0'
+      rowNewEle.style.top = '0'
+    }, 0)
+
+    setTimeout(() => {
+      rowEle.style = null
+      rowNewEle.style = null
+    }, 500)
+  }
+
+  const deleteRow = () => {
+    rows.splice(rowIdx, 1) // Just delete the row. Don't delete the instantiated widgets for now.
+
+    updateConfig({ ...config, rows })
+  }
+
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const rowItemsHeight = () => {
+    console.log('hit')
+    setEqualHeight(!equalHeight)
+
+    row.equalHeight = !equalHeight
+
+    console.log('equalHeight var', equalHeight)
+    console.log('equalHeight', row.equalHeight)
+  }
+  console.log('equal height var', row.equalHeight)
+
+=======
+>>>>>>> test:packages/dashboard/src/components/Row.js
+  const layoutList = [
+    <li className={curr === '12' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 12 ])} key="12" title="1 Column">
+      <OneColIcon/>
+    </li>,
+    <li className={curr === '66' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 6, 6 ])} key="66" title="2 Columns">
+      <TwoColIcon/>
+    </li>,
+    <li className={curr === '444' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 4, 4 ])} key="444" title="3 Columns">
+      <ThreeColIcon/>
+    </li>,
+    <li className={curr === '48' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 4, 8 ])} key="48" title="2 Columns">
+      <FourEightColIcon/>
+    </li>,
+    <li className={curr === '84' ? `current row-menu__list--item` : `row-menu__list--item`}
+        onClick={() => setRowLayout([ 8, 4 ])} key="84" title="2 Columns">
+      <EightFourColIcon/>
+    </li>
+  ]
+
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+  const rowSettings = (
+    <Modal>
+      <Modal.Header>
+        Row Settings
+      </Modal.Header>
+      <Modal.Content>
+        <InputToggle
+          label="Visualizations in this row should be equal height"
+          fieldName={`toggleEqualHeight${rowIdx}`}
+          value={row.equalHeight ? row.equalHeight : false}
+          updateField={rowItemsHeight}
+        ></InputToggle>
+      </Modal.Content>
+    </Modal>
+  )
+
+=======
+>>>>>>> test:packages/dashboard/src/components/Row.js
+  return (
+    <nav className="row-menu">
+      <div className="row-menu__btn">
+        <ul className="row-menu__flyout">
+          {layoutList}
+        </ul>
+      </div>
+      <div className="spacer"></div>
+<<<<<<< HEAD:packages/dashboard/src/components/Row.jsx
+      <button className={'row-menu__btn'} title="Row Settings"
+              onClick={() => overlay?.actions.openOverlay(rowSettings)}>
+        <Icon display="edit" color="#fff" size={25}/>
+      </button>
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up"
+              onClick={() => moveRow('up')}>
+        <Icon display="caretUp" color="#fff" size={25}/>
+=======
+      <button className={rowIdx === 0 ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'} title="Move Row Up" onClick={() => moveRow('up')}>
+        <RowUp />
+>>>>>>> test:packages/dashboard/src/components/Row.js
+      </button>
+      <button className={rowIdx + 1 === rows.length ? 'row-menu__btn row-menu__btn-disabled' : 'row-menu__btn'}
+              title="Move Row Down" onClick={() => moveRow('down')}>
+        <Icon display="caretDown" color="#fff" size={25}/>
+      </button>
+      <button
+        className={rowIdx === 0 && rows.length === 1 ? 'row-menu__btn row-menu__btn--remove row-menu__btn-disabled' : 'row-menu__btn row-menu__btn--remove'}
+        title="Delete Row" onClick={deleteRow}>
+        <Icon display="close" color="#fff" size={25}/>
+      </button>
+    </nav>
+  )
+}
+
+const Row = ({ row, idx: rowIdx, uuid }) => {
+  return (
+    <div className="builder-row" data-row-id={rowIdx}>
+      <RowMenu rowIdx={rowIdx} row={row}/>
+      <div className="column-container">
+        {row.filter(column => column.width).map((column, colIdx) => <Column data={column}
+                                                                            key={`row-${uuid}-col-${colIdx}`}
+                                                                            rowIdx={rowIdx} colIdx={colIdx}/>)}
+      </div>
+    </div>
+  )
+}
+
+export default Row