+
-
-
+
+
+
{i18n.t('Layout')}
+
+ {columns.length ? (
+
+ ) : (
+
+ )}
+
+ {columns.length
+ ? i18n.t('{{numberOfColumns}} columns', {
+ numberOfColumns: columns.length, // TODO: Add pluralisation
+ })
+ : i18n.t('Freeflow')}
+
+
+
+
+
+
+ {i18n.t('Add new items to')}
+
+
+
+ value.checked &&
+ onChangeInsertPosition(value.name)
+ }
+ checked={insertPosition === 'END'}
+ />
+
+ value.checked &&
+ onChangeInsertPosition(value.name)
+ }
+ checked={insertPosition === 'START'}
+ />
+
+
+
+
+
-
+ {showLayoutModal && (
+
setShowLayoutModal(false)}
+ columns={columns.length}
+ onSaveLayout={onSaveLayout}
+ />
+ )}
+
)
}
EditTitleBar.propTypes = {
onChangeDescription: PropTypes.func.isRequired,
+ onChangeInsertPosition: PropTypes.func.isRequired,
onChangeTitle: PropTypes.func.isRequired,
+ onSaveLayout: PropTypes.func.isRequired,
+ columns: PropTypes.array,
description: PropTypes.string,
+ insertPosition: PropTypes.string,
name: PropTypes.string,
}
EditTitleBar.defaultProps = {
name: '',
description: '',
+ insertPosition: 'END',
}
const mapStateToProps = state => {
@@ -72,13 +147,24 @@ const mapStateToProps = state => {
return {
name: selectedDashboard.name,
+ columns: sGetLayoutColumns(state),
description: selectedDashboard.description,
+ insertPosition: sGetItemConfigInsertPosition(state),
}
}
const mapDispatchToProps = {
onChangeTitle: acSetDashboardTitle,
onChangeDescription: acSetDashboardDescription,
+ onChangeInsertPosition: acSetItemConfigInsertPosition,
+ onSaveLayout: columns => dispatch => {
+ dispatch(
+ acSetLayoutColumns(
+ [...Array(columns).keys()].map(i => ({ index: i }))
+ )
+ )
+ dispatch(tSetDashboardItems())
+ },
}
export default connect(mapStateToProps, mapDispatchToProps)(EditTitleBar)
diff --git a/src/pages/edit/__tests__/ActionsBar.spec.js b/src/pages/edit/__tests__/ActionsBar.spec.js
index e489cdebe..1f6ddc795 100644
--- a/src/pages/edit/__tests__/ActionsBar.spec.js
+++ b/src/pages/edit/__tests__/ActionsBar.spec.js
@@ -4,7 +4,7 @@ import { render } from '@testing-library/react'
import React from 'react'
import { Provider } from 'react-redux'
import configureMockStore from 'redux-mock-store'
-import { NEW_DASHBOARD_STATE } from '../../../reducers/editDashboard'
+import { DEFAULT_STATE_EDIT_DASHBOARD } from '../../../reducers/editDashboard'
import ActionsBar from '../ActionsBar'
const mockStore = configureMockStore()
@@ -94,7 +94,7 @@ test('renders only the Go to Dashboards button when no update access', async ()
test('renders Save and Discard buttons but not translation dialog when new dashboard (no dashboard id)', async () => {
const store = {
- editDashboard: NEW_DASHBOARD_STATE,
+ editDashboard: DEFAULT_STATE_EDIT_DASHBOARD,
}
const { container } = render(
diff --git a/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap
index 33aab0dd7..5752c9e0d 100644
--- a/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap
+++ b/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap
@@ -2,14 +2,14 @@
exports[`TitleBar renders correctly when no name or description 1`] = `
-
+ class="layoutWrapper"
+ >
+
+ Layout
+
+
+
+
+ Freeflow
+
+
+
+
+
+
+ Add new items to
+
+
+
+
-
+