Prettier all the Javascript code & GitHub Action (getredash#4433)

* Prettier all the JS files

* Add GitHub Action to autoformat code pushed to master

* Fix eslint violation due to formatting.

* Remove GitHub actions for styling

* Add restyled.io config

Author: arikfr

.github/workflows/black.yml

@@ -0,0 +1,61 @@
+enabled: true
+
+auto: false
+
+# Open Restyle PRs?
+pull_requests: true
+
+# Leave comments on the original PR linking to the Restyle PR?
+comments: true
+
+# Set commit statuses on the original PR?
+statuses:
+  # Red status in the case of differences found
+  differences: true
+  # Green status in the case of no differences found
+  no_differences: true
+  # Red status if we encounter errors restyling
+  error: true
+
+# Request review on the Restyle PR?
+#
+# Possible values:
+#
+#   author: From the author of the original PR
+#   owner: From the owner of the repository
+#   none: Don't
+#
+# One value will apply to both origin and forked PRs, but you can also specify
+# separate values.
+#
+#   request_review:
+#     origin: author
+#     forked: owner
+#
+request_review: author
+
+# Add labels to any created Restyle PRs
+#
+# These can be used to tell other automation to avoid our PRs.
+#
+labels: ["Skip CI"]
+
+# Labels to ignore
+#
+# PRs with any of these labels will be ignored by Restyled.
+#
+# ignore_labels:
+#   - restyled-ignore
+
+# Restylers to run, and how
+restylers: 
+  - name: black:
+    include:
+      - redash 
+      - tests 
+      - migrations/versions 
+  - name: prettier:
+    include:
+      - client/app/**/*.js
+      - client/app/**/*.jsx
+      - client/cypress/**/*.js

.restyled.yaml

@@ -7,4 +7,4 @@ module.exports = {
   rules: {
     "jest/no-focused-tests": "off",
   },
-};
+};

client/app/.eslintrc.js

@@ -1,4 +1,4 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
 
 configure({ adapter: new Adapter() });

client/app/__tests__/enzyme_setup.js

@@ -1,5 +1,5 @@
-import MockDate from 'mockdate';
+import MockDate from "mockdate";
 
-const date = new Date('2000-01-01T02:00:00.000');
+const date = new Date("2000-01-01T02:00:00.000");
 
 MockDate.set(date);

client/app/__tests__/mocks.js

@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react';
-import AceEditor from 'react-ace';
+import React, { forwardRef } from "react";
+import AceEditor from "react-ace";
 
-import './AceEditorInput.less';
+import "./AceEditorInput.less";
 
 function AceEditorInput(props, ref) {
   return (

client/app/components/AceEditorInput.jsx

@@ -1,36 +1,35 @@
-import React from 'react';
-import Tooltip from 'antd/lib/tooltip';
-import PropTypes from 'prop-types';
-import '@/redash-font/style.less';
-import recordEvent from '@/services/recordEvent';
+import React from "react";
+import Tooltip from "antd/lib/tooltip";
+import PropTypes from "prop-types";
+import "@/redash-font/style.less";
+import recordEvent from "@/services/recordEvent";
 
 export default function AutocompleteToggle({ state, disabled, onToggle }) {
-  let tooltipMessage = 'Live Autocomplete Enabled';
-  let icon = 'icon-flash';
+  let tooltipMessage = "Live Autocomplete Enabled";
+  let icon = "icon-flash";
   if (!state) {
-    tooltipMessage = 'Live Autocomplete Disabled';
-    icon = 'icon-flash-off';
+    tooltipMessage = "Live Autocomplete Disabled";
+    icon = "icon-flash-off";
   }
 
   if (disabled) {
-    tooltipMessage = 'Live Autocomplete Not Available (Use Ctrl+Space to Trigger)';
-    icon = 'icon-flash-off';
+    tooltipMessage = "Live Autocomplete Not Available (Use Ctrl+Space to Trigger)";
+    icon = "icon-flash-off";
   }
 
-  const toggle = (newState) => {
-    recordEvent('toggle_autocomplete', 'screen', 'query_editor', { state: newState });
+  const toggle = newState => {
+    recordEvent("toggle_autocomplete", "screen", "query_editor", { state: newState });
     onToggle(newState);
   };
 
   return (
     <Tooltip placement="top" title={tooltipMessage}>
       <button
         type="button"
-        className={'btn btn-default m-r-5' + (disabled ? ' disabled' : '')}
+        className={"btn btn-default m-r-5" + (disabled ? " disabled" : "")}
         onClick={() => toggle(!state)}
-        disabled={disabled}
-      >
-        <i className={'icon ' + icon} />
+        disabled={disabled}>
+        <i className={"icon " + icon} />
       </button>
     </Tooltip>
   );

client/app/components/AutocompleteToggle.jsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import Card from 'antd/lib/card';
-import Button from 'antd/lib/button';
-import Typography from 'antd/lib/typography';
-import { clientConfig } from '@/services/auth';
-import HelpTrigger from '@/components/HelpTrigger';
-import DynamicComponent from '@/components/DynamicComponent';
-import OrgSettings from '@/services/organizationSettings';
+import React, { useState } from "react";
+import Card from "antd/lib/card";
+import Button from "antd/lib/button";
+import Typography from "antd/lib/typography";
+import { clientConfig } from "@/services/auth";
+import HelpTrigger from "@/components/HelpTrigger";
+import DynamicComponent from "@/components/DynamicComponent";
+import OrgSettings from "@/services/organizationSettings";
 
 const Text = Typography.Text;
 
@@ -21,11 +21,11 @@ function BeaconConsent() {
     setHide(true);
   };
 
-  const confirmConsent = (confirm) => {
-    let message = '🙏 Thank you.';
+  const confirmConsent = confirm => {
+    let message = "🙏 Thank you.";
 
     if (!confirm) {
-      message = 'Settings Saved.';
+      message = "Settings Saved.";
     }
 
     OrgSettings.save({ beacon_consent: confirm }, message)
@@ -40,14 +40,13 @@ function BeaconConsent() {
     <DynamicComponent name="BeaconConsent">
       <div className="m-t-10 tiled">
         <Card
-          title={(
+          title={
             <>
-              Would you be ok with sharing anonymous usage data with the Redash team?{' '}
+              Would you be ok with sharing anonymous usage data with the Redash team?{" "}
               <HelpTrigger type="USAGE_DATA_SHARING" />
             </>
-          )}
-          bordered={false}
-        >
+          }
+          bordered={false}>
           <Text>Help Redash improve by automatically sending anonymous usage data:</Text>
           <div className="m-t-5">
             <ul>
@@ -66,7 +65,8 @@ function BeaconConsent() {
           </div>
           <div className="m-t-15">
             <Text type="secondary">
-              You can change this setting anytime from the <a href="settings/organization">Organization Settings</a> page.
+              You can change this setting anytime from the <a href="settings/organization">Organization Settings</a>{" "}
+              page.
             </Text>
           </div>
         </Card>

client/app/components/BeaconConsent.jsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
+import React from "react";
+import PropTypes from "prop-types";
+import { react2angular } from "react2angular";
 
 export function BigMessage({ message, icon, children, className }) {
   return (
-    <div className={'p-15 text-center ' + className}>
+    <div className={"p-15 text-center " + className}>
       <h3 className="m-t-0 m-b-0">
-        <i className={'fa ' + icon} />
+        <i className={"fa " + icon} />
       </h3>
       <br />
       {message}
@@ -23,13 +23,13 @@ BigMessage.propTypes = {
 };
 
 BigMessage.defaultProps = {
-  message: '',
+  message: "",
   children: null,
-  className: 'tiled bg-white',
+  className: "tiled bg-white",
 };
 
 export default function init(ngModule) {
-  ngModule.component('bigMessage', react2angular(BigMessage));
+  ngModule.component("bigMessage", react2angular(BigMessage));
 }
 
 init.init = true;

client/app/components/BigMessage.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Button from 'antd/lib/button';
-import Tooltip from 'antd/lib/tooltip';
-import './CodeBlock.less';
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "antd/lib/button";
+import Tooltip from "antd/lib/tooltip";
+import "./CodeBlock.less";
 
 export default class CodeBlock extends React.Component {
   static propTypes = {
@@ -20,7 +20,7 @@ export default class CodeBlock extends React.Component {
   constructor(props) {
     super(props);
     this.ref = React.createRef();
-    this.copyFeatureEnabled = props.copyable && document.queryCommandSupported('copy');
+    this.copyFeatureEnabled = props.copyable && document.queryCommandSupported("copy");
     this.resetCopyState = null;
   }
 
@@ -36,14 +36,14 @@ export default class CodeBlock extends React.Component {
 
     // copy
     try {
-      const success = document.execCommand('copy');
+      const success = document.execCommand("copy");
       if (!success) {
         throw new Error();
       }
-      this.setState({ copied: 'Copied!' });
+      this.setState({ copied: "Copied!" });
     } catch (err) {
       this.setState({
-        copied: 'Copy failed',
+        copied: "Copy failed",
       });
     }
 
@@ -58,13 +58,8 @@ export default class CodeBlock extends React.Component {
     const { copyable, children, ...props } = this.props;
 
     const copyButton = (
-      <Tooltip title={this.state.copied || 'Copy'}>
-        <Button
-          icon="copy"
-          type="dashed"
-          size="small"
-          onClick={this.copy}
-        />
+      <Tooltip title={this.state.copied || "Copy"}>
+        <Button icon="copy" type="dashed" size="small" onClick={this.copy} />
       </Tooltip>
     );
 

client/app/components/CodeBlock.jsx

@@ -1,12 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import AntCollapse from 'antd/lib/collapse';
+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import AntCollapse from "antd/lib/collapse";
 
 export default function Collapse({ collapsed, children, className, ...props }) {
   return (
-    <AntCollapse {...props} activeKey={collapsed ? null : 'content'} className={cx(className, 'ant-collapse-headerless')}>
-      <AntCollapse.Panel key="content" header="">{children}</AntCollapse.Panel>
+    <AntCollapse
+      {...props}
+      activeKey={collapsed ? null : "content"}
+      className={cx(className, "ant-collapse-headerless")}>
+      <AntCollapse.Panel key="content" header="">
+        {children}
+      </AntCollapse.Panel>
     </AntCollapse>
   );
 }
@@ -20,5 +25,5 @@ Collapse.propTypes = {
 Collapse.defaultProps = {
   collapsed: true,
   children: null,
-  className: '',
+  className: "",
 };

client/app/components/Collapse.jsx

@@ -1,12 +1,12 @@
 // ANGULAR_REMOVE_ME
-import { react2angular } from 'react2angular';
+import { react2angular } from "react2angular";
 
-import ColorPicker from '@/components/ColorPicker';
+import ColorPicker from "@/components/ColorPicker";
 
-import './color-box.less';
+import "./color-box.less";
 
 export default function init(ngModule) {
-  ngModule.component('colorBox', react2angular(ColorPicker.Swatch));
+  ngModule.component("colorBox", react2angular(ColorPicker.Swatch));
 }
 
 init.init = true;