Skip to content

Commit

Permalink
Fixed issue where users cannot return to edit mode after turning off …
Browse files Browse the repository at this point in the history
…editing. Make extensions a seperate FAB. Improved styling for rule-based styling creation modal
  • Loading branch information
nielsdejong committed Aug 17, 2023
1 parent 9428a7d commit 58dd726
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 31 deletions.
48 changes: 32 additions & 16 deletions src/dashboard/header/DashboardTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
import debounce from 'lodash/debounce';
import { connect } from 'react-redux';
import { setDashboardTitle } from '../DashboardActions';
import { applicationGetConnection } from '../../application/ApplicationSelectors';
import { applicationGetConnection, applicationIsStandalone } from '../../application/ApplicationSelectors';
import { getDashboardTitle, getDashboardExtensions, getDashboardSettings } from '../DashboardSelectors';
import { getDashboardIsEditable } from '../../settings/SettingsSelectors';
import { updateDashboardSetting } from '../../settings/SettingsActions';
Expand All @@ -21,6 +21,7 @@ export const NeoDashboardTitle = ({
dashboardTitle,
setDashboardTitle,
editable,
isStandalone,
dashboardSettings,
extensions,
updateDashboardSetting,
Expand Down Expand Up @@ -98,20 +99,26 @@ export const NeoDashboardTitle = ({
<div className={'n-flex n-flex-row n-flex-wrap n-justify-between n-items-center'}>
<Typography variant='h3'>{dashboardTitle}</Typography>
<Tooltip title={'Edit'} disableInteractive>
<IconButton
className='logo-btn n-p-1'
aria-label={'edit'}
size='large'
onClick={() => setEditing(true)}
clean
>
<PencilSquareIconOutline className='header-icon' type='outline' />
</IconButton>
{editable ? (
<IconButton
className='logo-btn n-p-1'
aria-label={'edit'}
size='large'
onClick={() => setEditing(true)}
clean
>
<PencilSquareIconOutline className='header-icon' type='outline' />
</IconButton>
) : (
<></>
)}
</Tooltip>
</div>
)}
{editable && (
{/* If the app is not running in standalone mode (i.e. in edit mode) always show dashboard settings. */}
{!isStandalone ? (
<div className='flex flex-row flex-wrap items-center gap-2'>
{editable ? <NeoExtensionsModal closeMenu={handleSettingsMenuClose} /> : <></>}
<IconButton aria-label='Dashboard actions' onClick={handleSettingsMenuOpen}>
<EllipsisHorizontalIconOutline />
</IconButton>
Expand All @@ -134,14 +141,22 @@ export const NeoDashboardTitle = ({
dashboardSettings={dashboardSettings}
updateDashboardSetting={updateDashboardSetting}
></NeoSettingsModal>
<NeoSaveModal />
<NeoLoadModal />
<NeoShareModal />
<NeoExtensionsModal closeMenu={handleSettingsMenuClose} />
{renderExtensionsButtons()}
{/* Saving, loading, extensions, sharing is only enabled when the dashboard is editable. */}
{editable ? (
<>
<NeoSaveModal />
<NeoLoadModal />
<NeoShareModal />
{renderExtensionsButtons()}
</>
) : (
<></>
)}
</MenuItems>
</Menu>
</div>
) : (
<></>
)}
</div>
);
Expand All @@ -150,6 +165,7 @@ export const NeoDashboardTitle = ({
const mapStateToProps = (state) => ({
dashboardTitle: getDashboardTitle(state),
editable: getDashboardIsEditable(state),
isStandalone: applicationIsStandalone(state),
dashboardSettings: getDashboardSettings(state),
extensions: getDashboardExtensions(state),
connection: applicationGetConnection(state),
Expand Down
11 changes: 4 additions & 7 deletions src/extensions/ExtensionsModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { createNotificationThunk } from '../page/PageThunks';
import { getDashboardExtensions } from '../dashboard/DashboardSelectors';
import { setExtensionEnabled } from '../dashboard/DashboardActions';
import { setExtensionReducerEnabled } from './state/ExtensionActions';
import { Dialog, Label, MenuItem, TextLink, Typography, Checkbox } from '@neo4j-ndl/react';
import { Dialog, Label, MenuItem, TextLink, Typography, Checkbox, IconButton } from '@neo4j-ndl/react';
import { PuzzlePieceIconSolid } from '@neo4j-ndl/react/icons';
import { Section, SectionContent } from '../modal/ModalUtils';

Expand All @@ -30,12 +30,9 @@ const NeoExtensionsModal = ({

return (
<>
<MenuItem
title='Manage extensions'
id='extensions-sidebar-button'
onClick={handleClickOpen}
icon={<PuzzlePieceIconSolid />}
/>
<IconButton className='n-mx-1' aria-label='Extensions' onClick={handleClickOpen}>
<PuzzlePieceIconSolid />
</IconButton>

{open ? (
<Dialog size='large' open={open} onClose={handleClose} aria-labelledby='form-dialog-title'>
Expand Down
6 changes: 3 additions & 3 deletions src/extensions/actions/ActionsRuleCreationModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export const NeoCustomReportActionsModal = ({
if (customization == 'set variable') {
return (
<>
<div style={{ marginLeft: 15, display: 'inline' }}>
<div style={{ marginLeft: 10, display: 'inline' }}>
<span
style={{
height: '2.25rem',
Expand All @@ -213,7 +213,7 @@ export const NeoCustomReportActionsModal = ({
fontSize: 'var(--font-size-body-medium)',
fontWeight: '700',
letterSpacing: '0.016rem',
lineHeight: '36px',
lineHeight: '37px',
}}
>
$neodash_
Expand All @@ -222,7 +222,7 @@ export const NeoCustomReportActionsModal = ({
<TextInput
className='n-inline-block n-align-middle n-w-1/2 font-bold'
fluid
style={{ minWidth: 150, fontWeight: 700 }}
style={{ minWidth: 100, fontWeight: 700 }}
placeholder=''
value={rule.customizationValue}
onChange={(e) => updateRuleField(index, 'customizationValue', e.target.value)}
Expand Down
10 changes: 5 additions & 5 deletions src/extensions/styling/StyleRuleCreationModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,7 @@ export const NeoCustomReportStyleModal = ({
className='n-align-middle n-inline-block n-w-5/12 n-pr-1'
disableClearable={true}
id={`autocomplete-label-type${index}`}
size='small'
noOptionsText='*Specify an exact field name'
options={createFieldVariableSuggestions().filter((e) =>
e.toLowerCase().includes(rule.field.toLowerCase())
Expand All @@ -267,7 +268,6 @@ export const NeoCustomReportStyleModal = ({
InputLabelProps={{ shrink: true }}
style={{ padding: '6px 0 7px' }}
size={'small'}
variant={'standard'}
/>
)}
/>
Expand Down Expand Up @@ -302,8 +302,8 @@ export const NeoCustomReportStyleModal = ({
<div style={{ border: '2px dashed grey' }} className='n-p-1'>
<Dropdown
type='select'
className='n-align-middle n-w-4/12 n-pr-1'
style={{ minWidth: 125, display: 'inline-block' }}
className='n-align-middle n-w-5/12 n-pr-1'
style={{ minWidth: 100, display: 'inline-block' }}
selectProps={{
onChange: (newValue) => updateRuleField(index, 'customization', newValue.value),
options: RULE_BASED_REPORT_CUSTOMIZATIONS[type].map((option) => ({
Expand All @@ -318,8 +318,8 @@ export const NeoCustomReportStyleModal = ({
fluid
/>
<TextInput
className='n-align-middle n-inline-block n-w-2/12 n-pr-1'
style={{ minWidth: 50 }}
className='n-align-middle n-inline-block n-w-1/12 n-pr-1'
style={{ minWidth: 30 }}
disabled={true}
value={'='}
fluid
Expand Down

0 comments on commit 58dd726

Please sign in to comment.