fix(playground): replace antd daterange picker (#7735)

Author: vasilev-alex

packages/cubejs-playground/package.json

@@ -58,6 +58,7 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@cube-dev/ui-kit": "0.30.0",
     "@ant-design/compatible": "^1.0.2",
     "@ant-design/icons": "^4.7.0",
     "@cubejs-client/core": "^0.34.37",
@@ -98,6 +99,7 @@
     "prismjs": ">=1.25.0",
     "react": ">=17.0.1",
     "react-dom": ">=17.0.1",
-    "styled-components": ">=5.2.0"
+    "styled-components": ">=5.2.0",
+    "@cube-dev/ui-kit": ">=0.30.0"
   }
 }

packages/cubejs-playground/src/App.tsx

@@ -4,6 +4,7 @@ import { Alert, Layout } from 'antd';
 import { Component, useEffect } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
+import { Root, tasty } from '@cube-dev/ui-kit';
 
 import { CubeLoader } from './atoms';
 import { AppContextConsumer, PlaygroundContext } from './components/AppContext';
@@ -102,23 +103,25 @@ class App extends Component<RouteComponentProps, AppState> {
       <LivePreviewContextProvider
         disabled={context!.livePreview == null || !context!.livePreview}
       >
-        <Layout>
-          <GlobalStyles />
-
-          <Header selectedKeys={[location.pathname]} />
-
-          <StyledLayoutContent>
-            {fatalError ? (
-              <Alert
-                message="Error occured while rendering"
-                description={fatalError.stack || ''}
-                type="error"
-              />
-            ) : (
-              children
-            )}
-          </StyledLayoutContent>
-        </Layout>
+        <Root>
+          <Layout>
+            <GlobalStyles />
+
+            <Header selectedKeys={[location.pathname]} />
+
+            <StyledLayoutContent>
+              {fatalError ? (
+                <Alert
+                  message="Error occured while rendering"
+                  description={fatalError.stack || ''}
+                  type="error"
+                />
+              ) : (
+                children
+              )}
+            </StyledLayoutContent>
+          </Layout>
+        </Root>
       </LivePreviewContextProvider>
     );
   }

packages/cubejs-playground/src/QueryBuilder/TimeGroup.tsx

@@ -1,22 +1,20 @@
 import { PlusOutlined } from '@ant-design/icons';
-import { DatePicker, Menu } from 'antd';
-import moment from 'moment';
-import { useState, Fragment } from 'react';
+import { Menu } from 'antd';
+import { Fragment, useState } from 'react';
 import styled from 'styled-components';
 
+import { SectionRow } from '../components';
 import { ButtonDropdown } from './ButtonDropdown';
 import MemberDropdown from './MemberDropdown';
-import RemoveButtonGroup from './RemoveButtonGroup';
 import MissingMemberTooltip from './MissingMemberTooltip';
-import { SectionRow } from '../components';
+import RemoveButtonGroup from './RemoveButtonGroup';
+import { TimeDateRangeSelector } from './TimeRangeSelector';
 
 const Label = styled.div`
   color: var(--dark-04-color);
   line-height: 32px;
 `;
 
-const { RangePicker } = DatePicker;
-
 const DateRanges = [
   { title: 'Custom', value: 'custom' },
   { title: 'All time', value: undefined },
@@ -52,7 +50,7 @@ const TimeGroup = ({
     if (dateRange && !dateRange.some((d) => !d)) {
       updateMethods.update(m, {
         ...m,
-        dateRange: dateRange.map((dateTime) => dateTime.format('YYYY-MM-DD')),
+        dateRange,
       });
     }
   }
@@ -62,7 +60,11 @@ const TimeGroup = ({
       <Menu className="ant-dropdown-menu ant-dropdown-menu-root">
         {member.granularities.length ? (
           member.granularities.map((m) => (
-            <Menu.Item key={m.title} className="ant-dropdown-menu-item" onClick={() => onClick(m)}>
+            <Menu.Item
+              key={m.title}
+              className="ant-dropdown-menu-item"
+              onClick={() => onClick(m)}
+            >
               {m.title}
             </Menu.Item>
           ))
@@ -147,13 +149,11 @@ const TimeGroup = ({
             </ButtonDropdown>
 
             {isRangePickerVisible || isCustomDateRange ? (
-              <RangePicker
-                disabled={disabled}
-                format="YYYY-MM-DD"
-                defaultValue={(parsedDateRange || []).map((date) =>
-                  moment(date)
-                )}
-                onChange={(dateRange) => onDateRangeSelect(m, dateRange)}
+              <TimeDateRangeSelector
+                value={parsedDateRange || []}
+                onChange={(dateRange) => {
+                  onDateRangeSelect(m, dateRange);
+                }}
               />
             ) : null}
 

packages/cubejs-playground/src/QueryBuilder/TimeRangeSelector.tsx

@@ -0,0 +1,46 @@
+import { DateRangeSeparatedPicker, parseAbsoluteDate } from '@cube-dev/ui-kit';
+import { useCallback, useMemo } from 'react';
+
+interface TimeDateRangeSelectorProps {
+  type?: 'time' | 'date';
+  value: [string | undefined, string | undefined];
+  onChange: (value: [string, string]) => void;
+}
+
+export function TimeDateRangeSelector(props: TimeDateRangeSelectorProps) {
+  const { value, onChange } = props;
+
+  const onChangeHandler = useCallback(
+    (val) => {
+      onChange([
+        val.start.toString().split(/[+\]]/)[0].replace('T00:00:00', ''),
+        val.end.toString().split(/[+\]]/)[0].replace('T00:00:00', ''),
+      ]);
+    },
+    [onChange]
+  );
+
+  const dateValue = useMemo(() => {
+    const startDate = parseAbsoluteDate(value[0]);
+    const endDate = parseAbsoluteDate(value[1]);
+
+    return startDate && endDate
+      ? {
+          start: startDate,
+          end: endDate,
+        }
+      : null;
+  }, [value[0], value[1]]);
+
+  return useMemo(
+    () => (
+      <DateRangeSeparatedPicker
+        aria-label="Date range picker"
+        size="small"
+        defaultValue={dateValue}
+        onChange={onChangeHandler}
+      />
+    ),
+    [onChangeHandler]
+  );
+}

packages/cubejs-playground/src/rollup-designer/components/Settings.tsx

@@ -374,13 +374,6 @@ export function Settings({
                       </Space>
                     </>
                   )}
-
-                  {/* <Typography.Paragraph strong>Build Range</Typography.Paragraph> */}
-                  {/* <Flex direction="column" gap={4}>
-  <BuildRange time="since" />
-
-  <BuildRange time="until" />
-</Flex> */}
                 </>
               ) : null}
             </>