Merge pull request #2 from getredash/master

upstream update

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",
       {

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>

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>
             )}

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>
         )}

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));

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 });

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");
+    });
+  });
 });

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") => {

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"]
 }

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"]
 }