Merge branch 'develop' into notes/release-notes-2.3.4

BennuFire · web-flow · commit ae07a9311d33 · 2023-09-22T14:38:48.000+02:00
diff --git a/docs/modules/ROOT/pages/developer-guide/configuration.adoc b/docs/modules/ROOT/pages/developer-guide/configuration.adoc
@@ -16,6 +16,7 @@ will look like this:
 ....
 {
     "ssoEnabled": false,
+    "ssoProviders": [],
     "ssoDiscoveryUrl": "https://example.com",
     "standalone": false,
     "standaloneProtocol": "neo4j",
@@ -37,6 +38,8 @@ will look like this:
 using SSO. This requires the app to be running in standalone mode, and a
 valid ssoDiscoveryUrl to be set.
 
+|ssoProviders |List |[] |When using multiple SSO providers on the database, you can configure the list of providers (by id) to be used on Neodash. If empty, all providers will be displayed.
+
 |ssoDiscoveryUrl |string |https://example.com |If ssoEnabled is true &
 standalone mode is enabled, the URL to retrieve SSO auth config from.
 
diff --git a/docs/modules/ROOT/pages/developer-guide/standalone-mode.adoc b/docs/modules/ROOT/pages/developer-guide/standalone-mode.adoc
@@ -39,6 +39,7 @@ variables to Docker:
 ....
 docker run  -it --rm -p 5005:5005 \
     -e ssoEnabled=false \
+    -e ssoProviders=[] \
     -e ssoDiscoveryUrl="https://example.com" \
     -e standalone=true \
     -e standaloneProtocol="neo4j" \
diff --git a/docs/modules/ROOT/pages/developer-guide/state-management.adoc b/docs/modules/ROOT/pages/developer-guide/state-management.adoc
@@ -127,6 +127,7 @@ standalone mode.
     "standalone": false,
     "oldDashboard": null,
     "ssoEnabled": false,
+    "ssoProviders": [],
     "ssoDiscoveryUrl": "https://example.com",
     "standaloneProtocol": "neo4j",
     "standaloneHost": "localhost",
diff --git a/docs/modules/ROOT/pages/quickstart.adoc b/docs/modules/ROOT/pages/quickstart.adoc
@@ -8,7 +8,7 @@ https://neodash.graphapp.io.
 App Gallery].
 . Using Docker:
 ```
-docker pull neo4jlabs/neodash:latest      
+docker pull neo4jlabs/neodash:latest
 docker run -it --rm -p 5005:5005 neo4jlabs/neodash
 ```
 
diff --git a/docs/modules/ROOT/pages/user-guide/reports/pie-chart.adoc b/docs/modules/ROOT/pages/user-guide/reports/pie-chart.adoc
@@ -73,13 +73,13 @@ slice.
 |Margin Left (px) |number |50 |The margin in pixels on the left side of
 the visualization.
 
-|Margin Right (px) |number |24 |The margin in pixels on the right side
+|Margin Right (px) |number |50 |The margin in pixels on the right side
 of the visualization.
 
-|Margin Top (px) |number |24 |The margin in pixels on the top side of
+|Margin Top (px) |number |50 |The margin in pixels on the top side of
 the visualization.
 
-|Margin Bottom (px) |number |40 |The margin in pixels on the bottom side
+|Margin Bottom (px) |number |50 |The margin in pixels on the bottom side
 of the visualization.
 
 |Hide Selections |on/off |off |If enabled, hides the property selector
diff --git a/public/config.json b/public/config.json
@@ -1,5 +1,6 @@
 {
   "ssoEnabled": false,
+  "ssoProviders": [],
   "ssoDiscoveryUrl": "https://example.com",
   "standalone": false,
   "standaloneProtocol": "neo4j",
diff --git a/public/index.html b/public/index.html
@@ -30,6 +30,7 @@
 </head>
 
 <body>
+    <div id="overlay"></div>
     <div id="root"></div>
     <noscript>Please enable JavaScript to view this site.</noscript>
     <script src="bundle.js"></script>
diff --git a/public/style.css b/public/style.css
@@ -228,4 +228,11 @@
 		transform: scale(0.95);
 		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
 	}
-}
+}
+
+/* Workaround for Needle not handling menu placement of dropdowns on modals */
+#overlay {
+  z-index: 99 !important;
+  position: absolute;
+}
+/* End workaround */
diff --git a/scripts/config-entrypoint.sh b/scripts/config-entrypoint.sh
@@ -5,6 +5,7 @@ set -e
 echo " \
     { \
     \"ssoEnabled\": ${ssoEnabled:=false}, \
+    \"ssoProviders\": ${ssoProviders:=[]}, \
     \"ssoDiscoveryUrl\": \"${ssoDiscoveryUrl:='https://example.com'}\",  \
     \"standalone\": "${standalone:=false}", \
     \"standaloneProtocol\": \"${standaloneProtocol:='neo4j+s'}\", \
diff --git a/src/application/ApplicationActions.ts b/src/application/ApplicationActions.ts
@@ -178,6 +178,12 @@ export const setSSOEnabled = (enabled: boolean, discoveryUrl: string) => ({
   payload: { enabled, discoveryUrl },
 });
 
+export const SET_SSO_PROVIDERS = 'APPLICATION/SET_SSO_PROVIDERS';
+export const setSSOProviders = (providers: []) => ({
+  type: SET_SSO_PROVIDERS,
+  payload: { providers },
+});
+
 export const SET_WAIT_FOR_SSO = 'APPLICATION/SET_WAIT_FOR_SSO';
 export const setWaitForSSO = (wait: boolean) => ({
   type: SET_WAIT_FOR_SSO,
diff --git a/src/application/ApplicationReducer.ts b/src/application/ApplicationReducer.ts
@@ -21,6 +21,7 @@ import {
   SET_SESSION_PARAMETERS,
   SET_SHARE_DETAILS_FROM_URL,
   SET_SSO_ENABLED,
+  SET_SSO_PROVIDERS,
   SET_STANDALONE_DASHBOARD_DATEBASE,
   SET_STANDALONE_ENABLED,
   SET_STANDALONE_MODE,
@@ -112,6 +113,11 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
       state = update(state, { ssoEnabled: enabled, ssoDiscoveryUrl: discoveryUrl });
       return state;
     }
+    case SET_SSO_PROVIDERS: {
+      const { providers } = payload;
+      state = update(state, { ssoProviders: providers });
+      return state;
+    }
     case SET_WAIT_FOR_SSO: {
       const { wait } = payload;
       state = update(state, { waitForSSO: wait });
diff --git a/src/application/ApplicationSelectors.ts b/src/application/ApplicationSelectors.ts
@@ -64,6 +64,7 @@ export const applicationHasReportHelpModalOpen = (state: any) => {
 export const applicationGetSsoSettings = (state: any) => {
   return {
     ssoEnabled: state.application.ssoEnabled,
+    ssoProviders: state.application.ssoProviders,
     ssoDiscoveryUrl: state.application.ssoDiscoveryUrl,
     cachedSSODiscoveryUrl: state.application.cachedSSODiscoveryUrl,
   };
diff --git a/src/application/ApplicationThunks.ts b/src/application/ApplicationThunks.ts
@@ -30,6 +30,7 @@ import {
   clearDesktopConnectionProperties,
   clearNotification,
   setSSOEnabled,
+  setSSOProviders,
   setStandaloneEnabled,
   setAboutModalOpen,
   setStandaloneMode,
@@ -124,7 +125,7 @@ export const createConnectionThunk =
         query,
         parameters,
         1,
-        () => {},
+        () => { },
         (records) => validateConnection(records)
       );
     } catch (e) {
@@ -254,7 +255,7 @@ export const handleSharedDashboardsThunk = () => (dispatch: any) => {
           dispatch(onConfirmLoadSharedDashboardThunk());
         }
 
-        window.history.pushState({}, document.title, '/');
+        window.history.pushState({}, document.title, window.location.pathname);
       } else {
         dispatch(setConnectionModalOpen(false));
         // dispatch(setWelcomeScreenOpen(false));
@@ -273,7 +274,7 @@ export const handleSharedDashboardsThunk = () => (dispatch: any) => {
             false
           )
         );
-        window.history.pushState({}, document.title, '/');
+        window.history.pushState({}, document.title, window.location.pathname);
       }
     } else {
       // dispatch(resetShareDetails());
@@ -340,6 +341,7 @@ export const onConfirmLoadSharedDashboardThunk = () => (dispatch: any, getState:
 export const loadApplicationConfigThunk = () => async (dispatch: any, getState: any) => {
   let config = {
     ssoEnabled: false,
+    ssoProviders: [],
     ssoDiscoveryUrl: 'http://example.com',
     standalone: false,
     standaloneProtocol: 'neo4j',
@@ -377,6 +379,7 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState:
     }
     const state = getState();
     dispatch(setSSOEnabled(config.ssoEnabled, state.application.cachedSSODiscoveryUrl));
+    dispatch(setSSOProviders(config.ssoProviders));
 
     const { standalone } = config;
     dispatch(
diff --git a/src/card/settings/CardSettings.tsx b/src/card/settings/CardSettings.tsx
@@ -91,7 +91,11 @@ const NeoCardSettings = ({
   );
 
   return (
-    <div className={`card-view n-bg-palette-neutral-bg-weak ${expanded ? 'expanded' : ''} n-overflow-y-auto n-h-full`}>
+    <div
+      className={`card-view n-bg-palette-neutral-bg-weak n-text-palette-neutral-text-default ${
+        expanded ? 'expanded' : ''
+      } n-overflow-y-auto n-h-full`}
+    >
       {cardSettingsHeader}
       <ReportItemContainer style={{ height: reportHeight }} className='-n-mt-2'>
         {cardSettingsContent}
diff --git a/src/card/settings/CardSettingsContent.tsx b/src/card/settings/CardSettingsContent.tsx
@@ -111,7 +111,7 @@ const NeoCardSettingsContent = ({
             label: report?.label || '',
             value: report?.label || '',
           },
-          menuPortalTarget: document.querySelector('body'),
+          menuPortalTarget: document.querySelector('#overlay'),
         }}
         fluid
         style={{ marginLeft: '0px', marginRight: '10px', width: '47%', maxWidth: '200px', display: 'inline-block' }}
@@ -133,7 +133,7 @@ const NeoCardSettingsContent = ({
               value: database,
             })),
             value: { label: databaseText, value: databaseText },
-            menuPortalTarget: document.querySelector('body'),
+            menuPortalTarget: document.querySelector('#overlay'),
           }}
           fluid
           style={{ marginLeft: '0px', marginRight: '10px', width: '47%', maxWidth: '200px', display: 'inline-block' }}
diff --git a/src/card/view/CardView.tsx b/src/card/view/CardView.tsx
@@ -213,7 +213,9 @@ const NeoCardView = ({
 
   return (
     <div
-      className={`card-view n-bg-palette-neutral-bg-weak ${expanded ? 'expanded' : ''}`}
+      className={`card-view n-bg-palette-neutral-bg-weak n-text-palette-neutral-text-default ${
+        expanded ? 'expanded' : ''
+      }`}
       style={settings && settings.backgroundColor ? { backgroundColor: settings.backgroundColor } : {}}
     >
       {reportHeader}
diff --git a/src/card/view/CardViewFooter.tsx b/src/card/view/CardViewFooter.tsx
@@ -121,7 +121,7 @@ const NeoCardViewFooter = ({
                       : { label: selection[selectable], value: selection[selectable] },
                     isMulti: selectableFields[selectable].multiple,
                     isClearable: false,
-                    menuPortalTarget: document.querySelector('body'),
+                    menuPortalTarget: document.querySelector('#overlay'),
                   }}
                   fluid
                   style={{
diff --git a/src/card/view/CardViewHeader.tsx b/src/card/view/CardViewHeader.tsx
@@ -71,6 +71,9 @@ const NeoCardViewHeader = ({
       text: {
         primary: 'rgb(var(--palette-neutral-text))',
       },
+      action: {
+        disabled: 'rgb(var(--palette-neutral-text-weak))',
+      },
     },
   });
 
@@ -103,7 +106,7 @@ const NeoCardViewHeader = ({
                 onBlur={() => {
                   setEditing(false);
                 }}
-                className={'n-text-palette-neutral-text-default no-underline large'}
+                className={'no-underline large'}
                 label=''
                 disabled={!editable}
                 placeholder='Report name...'
@@ -117,6 +120,11 @@ const NeoCardViewHeader = ({
                 size={'small'}
                 style={{ paddingTop: '0px important!' }}
                 variant={'standard'}
+                sx={{
+                  '& .MuiInputBase-input.Mui-disabled': {
+                    WebkitTextFillColor: 'inherit',
+                  },
+                }}
               />
             </td>
           </tr>
diff --git a/src/chart/ChartUtils.ts b/src/chart/ChartUtils.ts
@@ -140,6 +140,11 @@ export function getRecordType(value) {
       return 'objectNumber';
     }
     return 'object';
+  } else if (typeof value === 'string' || value instanceof String) {
+    if (value.startsWith('http') || value.startsWith('https')) {
+      return 'link';
+    }
+    return 'string';
   }
 
   // Use string as default type
diff --git a/src/chart/Utils.ts b/src/chart/Utils.ts
@@ -121,14 +121,14 @@ export const themeNivo = {
   textColor: 'rgb(var(--palette-neutral-text-default))',
   text: { fill: 'rgb(var(--palette-neutral-text-default))' },
   axis: {
-    ticks: { text: { fill: 'rgb(var(--palette-light-neutral-text-default))' } },
+    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
     legend: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
   },
   legends: {
-    text: { fill: 'rgb(var(--palette-neutral-text-weak))' },
-    title: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
-    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
-    hidden: { text: { fill: 'rgb(var(--palette-neutral-text-weak))' } },
+    text: { fill: 'rgb(var(--palette-neutral-text-default))' },
+    title: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
+    ticks: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
+    hidden: { text: { fill: 'rgb(var(--palette-neutral-text-default))' } },
   },
   markers: {
     text: { fill: 'rgb(var(--palette-neutral-text-default))' },
diff --git a/src/chart/bar/BarChart.tsx b/src/chart/bar/BarChart.tsx
@@ -28,7 +28,7 @@ const NeoBarChart = (props: ChartProps) => {
 
   const { records, selection } = props;
 
-  const [keys, setKeys] = React.useState({});
+  const [keys, setKeys] = React.useState<string[]>([]);
   const [data, setData] = React.useState<Record<string, any>[]>([]);
 
   useEffect(() => {
@@ -72,7 +72,7 @@ const NeoBarChart = (props: ChartProps) => {
         return row;
       });
 
-    setKeys(newKeys);
+    setKeys(Object.keys(newKeys));
     setData(newData);
   }, [selection]);
 
@@ -114,8 +114,8 @@ const NeoBarChart = (props: ChartProps) => {
   const chartColorsByScheme = getD3ColorsByScheme(colorScheme);
   // Compute bar color based on rules - overrides default color scheme completely.
   const getBarColor = (bar) => {
-    let { data, id } = bar;
-    let colorIndex = Object.keys(data).indexOf(id);
+    let { id } = bar;
+    let colorIndex = keys.indexOf(id);
     if (colorIndex >= chartColorsByScheme.length) {
       colorIndex %= chartColorsByScheme.length;
     }
@@ -218,7 +218,7 @@ const NeoBarChart = (props: ChartProps) => {
       layout={layout}
       groupMode={groupMode == 'stacked' ? 'stacked' : 'grouped'}
       enableLabel={enableLabel}
-      keys={Object.keys(keys)}
+      keys={keys}
       indexBy='index'
       margin={{
         top: marginTop,
diff --git a/src/chart/graph/component/GraphChartInspectModal.tsx b/src/chart/graph/component/GraphChartInspectModal.tsx
@@ -17,7 +17,9 @@ export const NeoGraphChartInspectModal = (props: GraphChartVisualizationProps) =
         aria-labelledby='form-dialog-title'
       >
         <Dialog.Header id='form-dialog-title'>
-          {props.interactivity.selectedEntity ? getEntityHeader(props.interactivity.selectedEntity) : ''}
+          {props.interactivity.selectedEntity
+            ? getEntityHeader(props.interactivity.selectedEntity, props.engine.selection)
+            : ''}
         </Dialog.Header>
         <Dialog.Content>
           <GraphEntityInspectionTable entity={props.interactivity.selectedEntity}></GraphEntityInspectionTable>
diff --git a/src/chart/graph/util/NodeUtils.ts b/src/chart/graph/util/NodeUtils.ts
@@ -24,8 +24,26 @@ export const parseNodeIconConfig = (iconStyle) => {
   }
 };
 
-export const getEntityHeader = (entity) => {
-  return (entity.labels && entity.labels.join(', ')) || entity.type;
+const getSelectedNodeProperty = (entity: any, sourceOrTarget: string, propertySelections: any) => {
+  const selection = propertySelections[entity[sourceOrTarget]?.mainLabel];
+  switch (selection) {
+    case '(label)':
+      return entity[sourceOrTarget]?.mainLabel;
+    case '(id)':
+      return entity[sourceOrTarget]?.id;
+    default:
+      return entity[sourceOrTarget]?.properties[selection];
+  }
+};
+
+const getRelPatternString = (entity: any, selection: any) => {
+  const sourceTitle = getSelectedNodeProperty(entity, 'source', selection);
+  const targetTitle = getSelectedNodeProperty(entity, 'target', selection);
+  return `(${sourceTitle ? sourceTitle : '[no value]'} --> ${targetTitle ? targetTitle : '[no value]'})`;
+};
+
+export const getEntityHeader = (entity: any, selection: any) => {
+  return entity.labels?.join(', ') || `${entity.type} ${getRelPatternString(entity, selection)}`;
 };
 
 export const drawDataURIOnCanvas = (node, strDataURI, canvas, defaultNodeSize) => {
diff --git a/src/chart/parameter/component/NodePropertyParameterSelect.tsx b/src/chart/parameter/component/NodePropertyParameterSelect.tsx
@@ -120,6 +120,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
 
     handleParametersUpdate(newValue, newDisplay, manualParameterSave);
   };
+
   return (
     <div className={'n-flex n-flex-row n-flex-wrap n-items-center'}>
       <Autocomplete
@@ -151,7 +152,7 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
             variant='outlined'
           />
         )}
-        getOptionLabel={(option) => RenderSubValue(option)}
+        getOptionLabel={(option) => option?.toString() || ''}
       />
       {manualParameterSave ? <SelectionConfirmationButton onClick={() => manualHandleParametersUpdate()} /> : <></>}
     </div>
diff --git a/src/chart/pie/PieChart.tsx b/src/chart/pie/PieChart.tsx
diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx
diff --git a/src/component/sso/SSOLoginButton.tsx b/src/component/sso/SSOLoginButton.tsx
diff --git a/src/config/ReportConfig.tsx b/src/config/ReportConfig.tsx
diff --git a/src/modal/ConnectionModal.tsx b/src/modal/ConnectionModal.tsx
diff --git a/src/report/ReportRecordProcessing.tsx b/src/report/ReportRecordProcessing.tsx
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"ssoEnabled": false,`
	`3`	`+ "ssoProviders": [],`
`3`	`4`	`"ssoDiscoveryUrl": "https://example.com",`
`4`	`5`	`"standalone": false,`
`5`	`6`	`"standaloneProtocol": "neo4j",`