SSDM-10833 : Entity Deletion History - NG_UI - add material ui date picker library

openbis_ng_ui/package.json

@@ -5,9 +5,12 @@
   "author": "Antti Luomi",
   "license": "Apache-2.0",
   "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/pickers": "^3.3.10",
+    "date-fns": "^2.22.1",
     "history": "^4.10.1",
     "install": "^0.13.0",
     "npm": "^6.14.8",

openbis_ng_ui/src/js/components/common/date/DatePickerProvider.jsx

+import React from 'react'
+import { MuiPickersUtilsProvider } from '@material-ui/pickers'
+import DateFnsUtils from '@date-io/date-fns'
+
+class DatePickerProvider extends React.Component {
+  render() {
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        {this.props.children}
+      </MuiPickersUtilsProvider>
+    )
+  }
+}
+
+export default DatePickerProvider

openbis_ng_ui/src/js/components/tools/common/HistoryGrid.jsx

@@ -5,6 +5,7 @@ import Grid from '@src/js/components/common/grid/Grid.jsx'
 import UserLink from '@src/js/components/common/link/UserLink.jsx'
 import Collapse from '@material-ui/core/Collapse'
 import SelectField from '@src/js/components/common/form/SelectField.jsx'
+import { DateTimePicker } from '@material-ui/pickers'
 import Link from '@material-ui/core/Link'
 import FormUtil from '@src/js/components/common/form/FormUtil.js'
 import openbis from '@src/js/services/openbis.js'
@@ -265,7 +266,16 @@ class HistoryGrid extends React.PureComponent {
             label: messages.get(messages.DATE),
             sortable: true,
             sort: 'desc',
-            getValue: ({ row }) => date.format(row.registrationDate.value)
+            getValue: ({ row }) => date.format(row.registrationDate.value),
+            renderFilter: ({ value, onChange }) => {
+              return (
+                <DateTimePicker
+                  variant='inline'
+                  value={value}
+                  onChange={onChange}
+                />
+              )
+            }
           }
         ]}
         rows={rows}

openbis_ng_ui/src/js/index.js

@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import store from '@src/js/store/store.js'
 import ErrorBoundary from '@src/js/components/common/error/ErrorBoundary.jsx'
+import DatePickerProvider from '@src/js/components/common/date/DatePickerProvider.jsx'
 import ThemeProvider from '@src/js/components/common/theme/ThemeProvider.jsx'
 
 const render = () => {
@@ -13,7 +14,9 @@ const render = () => {
     <Provider store={store}>
       <ThemeProvider>
         <ErrorBoundary>
-          <App />
+          <DatePickerProvider>
+            <App />
+          </DatePickerProvider>
         </ErrorBoundary>
       </ThemeProvider>
     </Provider>,