Merge pull request #6 from getredash/master

pull from master
getredash · Dec 20, 2020 · cb84ac2 · cb84ac2
2 parents b917287 + dcdff66
commit cb84ac2
Show file tree

Hide file tree

Showing 230 changed files with 5,696 additions and 2,061 deletions.
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -20,6 +20,7 @@ module.exports = {
     // allow debugger during development
     "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
     "jsx-a11y/anchor-is-valid": "off",
+    "no-console": ["warn", { allow: ["warn", "error"] }],
     "no-restricted-imports": [
       "error",
       {

diff --git a/client/app/components/ApplicationArea/routeWithUserSession.tsx b/client/app/components/ApplicationArea/routeWithUserSession.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-// @ts-expect-error (Must be removed after adding @redash/viz typing)
 import ErrorBoundary, { ErrorBoundaryContext } from "@redash/viz/lib/components/ErrorBoundary";
 import { Auth } from "@/services/auth";
 import { policy } from "@/services/policy";
@@ -62,9 +61,10 @@ export function UserSessionWrapper<P>({ bodyClass, currentRoute, render }: UserS
   return (
     <ApplicationLayout>
       <React.Fragment key={currentRoute.key}>
+        {/* @ts-expect-error FIXME */}
         <ErrorBoundary renderError={(error: Error) => <ErrorMessage error={error} />}>
           <ErrorBoundaryContext.Consumer>
-            {({ handleError }: { handleError: UserSessionWrapperRenderChildrenProps<P>["onError"] }) =>
+            {({ handleError } /* : { handleError: UserSessionWrapperRenderChildrenProps<P>["onError"] } FIXME bring back type */) =>
               render({ ...currentRoute.routeParams, pageTitle: currentRoute.title, onError: handleError })
             }
           </ErrorBoundaryContext.Consumer>

diff --git a/client/app/components/ParameterValueInput.jsx b/client/app/components/ParameterValueInput.jsx
@@ -101,7 +101,6 @@ class ParameterValueInput extends React.Component {
       <SelectWithVirtualScroll
         className={this.props.className}
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
-        optionFilterProp="children"
         value={normalize(value)}
         onChange={this.onSelect}
         options={map(enumOptionsArray, opt => ({ label: String(opt), value: opt }))}
@@ -120,7 +119,6 @@ class ParameterValueInput extends React.Component {
       <QueryBasedParameterInput
         className={this.props.className}
         mode={parameter.multiValuesOptions ? "multiple" : "default"}
-        optionFilterProp="children"
         parameter={parameter}
         value={value}
         queryId={queryId}

diff --git a/client/app/components/QueryBasedParameterInput.jsx b/client/app/components/QueryBasedParameterInput.jsx
@@ -89,7 +89,6 @@ export default class QueryBasedParameterInput extends React.Component {
           value={this.state.value}
           onChange={onSelect}
           options={map(options, ({ value, name }) => ({ label: String(name), value }))}
-          optionFilterProp="children"
           showSearch
           showArrow
           notFoundContent={isEmpty(options) ? "No options available" : null}

diff --git a/client/app/components/SelectWithVirtualScroll.tsx b/client/app/components/SelectWithVirtualScroll.tsx
@@ -9,7 +9,7 @@ interface VirtualScrollLabeledValue extends LabeledValue {
   label: string;
 }
 
-interface VirtualScrollSelectProps extends SelectProps<string> {
+interface VirtualScrollSelectProps extends Omit<SelectProps<string>, "optionFilterProp" | "children"> {
   options: Array<VirtualScrollLabeledValue>;
 }
 function SelectWithVirtualScroll({ options, ...props }: VirtualScrollSelectProps): JSX.Element {
@@ -32,7 +32,14 @@ function SelectWithVirtualScroll({ options, ...props }: VirtualScrollSelectProps
     return false;
   }, [options]);
 
-  return <AntdSelect<string> dropdownMatchSelectWidth={dropdownMatchSelectWidth} options={options} {...props} />;
+  return (
+    <AntdSelect<string>
+      dropdownMatchSelectWidth={dropdownMatchSelectWidth}
+      options={options}
+      optionFilterProp="label" // as this component expects "options" prop
+      {...props}
+    />
+  );
 }
 
 export default SelectWithVirtualScroll;
diff --git a/client/app/components/admin/RQStatus.jsx b/client/app/components/admin/RQStatus.jsx
@@ -35,11 +35,11 @@ CounterCard.defaultProps = {
 
 const queryJobsColumns = [
   { title: "Queue", dataIndex: "origin" },
-  { title: "Query ID", dataIndex: "meta.query_id" },
-  { title: "Org ID", dataIndex: "meta.org_id" },
-  { title: "Data Source ID", dataIndex: "meta.data_source_id" },
-  { title: "User ID", dataIndex: "meta.user_id" },
-  Columns.custom(scheduled => scheduled.toString(), { title: "Scheduled", dataIndex: "meta.scheduled" }),
+  { title: "Query ID", dataIndex: ["meta", "query_id"] },
+  { title: "Org ID", dataIndex: ["meta", "org_id"] },
+  { title: "Data Source ID", dataIndex: ["meta", "data_source_id"] },
+  { title: "User ID", dataIndex: ["meta", "user_id"] },
+  Columns.custom(scheduled => scheduled.toString(), { title: "Scheduled", dataIndex: ["meta", "scheduled"] }),
   Columns.timeAgo({ title: "Start Time", dataIndex: "started_at" }),
   Columns.timeAgo({ title: "Enqueue Time", dataIndex: "enqueued_at" }),
 ];

diff --git a/client/app/pages/settings/OrganizationSettings.jsx b/client/app/pages/settings/OrganizationSettings.jsx
@@ -26,7 +26,7 @@ function OrganizationSettings({ onError }) {
             {isLoading ? (
               <Skeleton.Button active />
             ) : (
-              <Button type="primary" htmlType="submit" loading={isSaving}>
+              <Button type="primary" htmlType="submit" loading={isSaving} data-test="OrganizationSettingsSaveButton">
                 Save
               </Button>
             )}

diff --git a/client/app/pages/settings/components/GeneralSettings/FormatSettings.jsx b/client/app/pages/settings/components/GeneralSettings/FormatSettings.jsx
@@ -20,7 +20,9 @@ export default function FormatSettings(props) {
             onChange={value => onChange({ date_format: value })}
             data-test="DateFormatSelect">
             {clientConfig.dateFormatList.map(dateFormat => (
-              <Select.Option key={dateFormat}>{dateFormat}</Select.Option>
+              <Select.Option key={dateFormat} data-test={`DateFormatSelect:${dateFormat}`}>
+                {dateFormat}
+              </Select.Option>
             ))}
           </Select>
         )}

diff --git a/client/app/pages/settings/hooks/useOrganizationSettings.js b/client/app/pages/settings/hooks/useOrganizationSettings.js
@@ -3,6 +3,7 @@ import { useState, useEffect, useCallback } from "react";
 import recordEvent from "@/services/recordEvent";
 import OrgSettings from "@/services/organizationSettings";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
+import { updateClientConfig } from "@/services/auth";
 
 export default function useOrganizationSettings({ onError }) {
   const [settings, setSettings] = useState({});
@@ -49,6 +50,11 @@ export default function useOrganizationSettings({ onError }) {
           const settings = get(response, "settings");
           setSettings(settings);
           setCurrentValues({ ...settings });
+          updateClientConfig({
+            dateFormat: currentValues.date_format,
+            timeFormat: currentValues.time_format,
+            dateTimeFormat: `${currentValues.date_format} ${currentValues.time_format}`,
+          });
         })
         .catch(handleError)
         .finally(() => setIsSaving(false));

diff --git a/client/app/services/auth.js b/client/app/services/auth.js
@@ -44,6 +44,10 @@ const AuthUrls = {
   Login: "login",
 };
 
+export function updateClientConfig(newClientConfig) {
+  extend(clientConfig, newClientConfig);
+}
+
 function updateSession(sessionData) {
   logger("Updating session to be:", sessionData);
   extend(session, sessionData, { loaded: true });

diff --git a/client/cypress/integration/query/parameter_spec.js b/client/cypress/integration/query/parameter_spec.js
@@ -1,3 +1,9 @@
+function openAndSearchAntdDropdown(testId, paramOption) {
+  cy.getByTestId(testId)
+    .find(".ant-select-selection-search-input")
+    .type(paramOption, { force: true });
+}
+
 describe("Parameter", () => {
   const expectDirtyStateChange = edit => {
     cy.getByTestId("ParameterName-test-parameter")
@@ -107,11 +113,13 @@ describe("Parameter", () => {
     });
 
     it("updates the results after selecting a value", () => {
-      cy.getByTestId("ParameterName-test-parameter")
-        .find(".ant-select")
-        .click();
+      openAndSearchAntdDropdown("ParameterName-test-parameter", "value2"); // asserts option filter prop
 
-      cy.contains(".ant-select-item-option", "value2").click();
+      // only the filtered option should be on the DOM
+      cy.get(".ant-select-item-option")
+        .should("have.length", 1)
+        .and("contain", "value2")
+        .click();
 
       cy.getByTestId("ParameterApplyButton").click();
       // ensure that query is being executed
@@ -219,6 +227,22 @@ describe("Parameter", () => {
         });
       });
 
+      it("updates the results after selecting a value", () => {
+        openAndSearchAntdDropdown("ParameterName-test-parameter", "value2"); // asserts option filter prop
+
+        // only the filtered option should be on the DOM
+        cy.get(".ant-select-item-option")
+          .should("have.length", 1)
+          .and("contain", "value2")
+          .click();
+
+        cy.getByTestId("ParameterApplyButton").click();
+        // ensure that query is being executed
+        cy.getByTestId("QueryExecutionStatus").should("exist");
+
+        cy.getByTestId("TableVisualization").should("contain", "2");
+      });
+
       it("supports multi-selection", () => {
         cy.clickThrough(`
           ParameterSettings-test-parameter

diff --git a/client/cypress/integration/settings/organization_settings_spec.js b/client/cypress/integration/settings/organization_settings_spec.js
@@ -6,10 +6,40 @@ describe("Settings", () => {
 
   it("renders the page and takes a screenshot", () => {
     cy.getByTestId("OrganizationSettings").within(() => {
-      cy.getByTestId("DateFormatSelect").should("contain", "DD/MM/YY");
       cy.getByTestId("TimeFormatSelect").should("contain", "HH:mm");
     });
 
     cy.percySnapshot("Organization Settings");
   });
+
+  it("can set date format setting", () => {
+    cy.getByTestId("DateFormatSelect").click();
+    cy.getByTestId("DateFormatSelect:YYYY-MM-DD").click();
+    cy.getByTestId("OrganizationSettingsSaveButton").click();
+
+    cy.createQuery({
+      name: "test date format",
+      query: "SELECT NOW()",
+    }).then(({ id: queryId }) => {
+      cy.visit(`/queries/${queryId}`);
+      cy.findByText("Refresh Now").click();
+
+      // "created at" field is formatted with the date format.
+      cy.getByTestId("TableVisualization")
+        .findAllByText(/\d{4}-\d{2}-\d{2}/)
+        .should("exist");
+
+      // set to a different format and expect a different result in the table
+      cy.visit("/settings/general");
+      cy.getByTestId("DateFormatSelect").click();
+      cy.getByTestId("DateFormatSelect:MM/DD/YY").click();
+      cy.getByTestId("OrganizationSettingsSaveButton").click();
+
+      cy.visit(`/queries/${queryId}`);
+
+      cy.getByTestId("TableVisualization")
+        .findAllByText(/\d{2}\/\d{2}\/\d{2}/)
+        .should("exist");
+    });
+  });
 });
diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js
@@ -2,6 +2,8 @@
 
 import "@percy/cypress"; // eslint-disable-line import/no-extraneous-dependencies, import/no-unresolved
 
+import "@testing-library/cypress/add-commands";
+
 const { each } = Cypress._;
 
 Cypress.Commands.add("login", (email = "admin@redash.io", password = "password") => {

diff --git a/client/cypress/tsconfig.json b/client/cypress/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "types": ["cypress","@percy/cypress","@testing-library/cypress"]
+    "types": ["cypress", "@percy/cypress", "@testing-library/cypress"]
   },
   "include": ["./**/*.ts"]
 }
diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -15,21 +15,14 @@
     "jsx": "react",
     "allowSyntheticDefaultImports": true,
     "noUnusedLocals": true,
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "forceConsistentCasingInFileNames": true,
     "baseUrl": "./",
     "paths": {
       "@/*": ["./app/*"]
-    }
+    },
+    "skipLibCheck": true
   },
-  "include": [
-    "app/**/*"
-  ],
-  "exclude": [
-    "dist"
-  ]
+  "include": ["app/**/*"],
+  "exclude": ["dist"]
 }