Add precommit hook (#112)

.drone.yml

@@ -41,5 +41,3 @@ steps:
 ---
 kind: signature
 hmac: a2e180c09fe108e09838e4c44aa5648124fff138cb0372080677dcdd14e49f9f
-
-...

.github/issue_commands.json

@@ -1,34 +1,34 @@
-[   
-    {
-      "type": "label",
-      "name": "grafana-aws-sdk-react",
-      "action": "addToProject",
-      "addToProject": {
-        "url": "https://github.com/orgs/grafana/projects/97"
-      }
-    },
-    {
-      "type": "label",
-      "name": "grafana-aws-sdk-react",
-      "action": "removeFromProject",
-      "removeFromProject": {
-        "url": "https://github.com/orgs/grafana/projects/97"
-      }
-    },
-    {
-      "type": "label",
-      "name": "type/docs",
-      "action": "addToProject",
-      "addToProject": {
-        "url": "https://github.com/orgs/grafana/projects/69"
-      }
-    },
-    {
-      "type": "label",
-      "name": "type/docs",
-      "action": "removeFromProject",
-      "removeFromProject": {
-        "url": "https://github.com/orgs/grafana/projects/69"
-      }
+[
+  {
+    "type": "label",
+    "name": "grafana-aws-sdk-react",
+    "action": "addToProject",
+    "addToProject": {
+      "url": "https://github.com/orgs/grafana/projects/97"
     }
-]
+  },
+  {
+    "type": "label",
+    "name": "grafana-aws-sdk-react",
+    "action": "removeFromProject",
+    "removeFromProject": {
+      "url": "https://github.com/orgs/grafana/projects/97"
+    }
+  },
+  {
+    "type": "label",
+    "name": "type/docs",
+    "action": "addToProject",
+    "addToProject": {
+      "url": "https://github.com/orgs/grafana/projects/69"
+    }
+  },
+  {
+    "type": "label",
+    "name": "type/docs",
+    "action": "removeFromProject",
+    "removeFromProject": {
+      "url": "https://github.com/orgs/grafana/projects/69"
+    }
+  }
+]

.gitignore

@@ -6,6 +6,9 @@ cypress/screenshots/actual
 cypress/videos/
 dist/
 compiled/
+
 yarn-error.log
 .idea/
 .DS_Store
+
+.eslintcache

README.md

@@ -26,6 +26,7 @@ export DRONE_TOKEN=<Your DRONE_TOKEN>
 
 drone --server https://drone.grafana.net sign --save grafana/grafana-aws-sdk-react
 ```
+
 ### Local Development
 
-For local development instructions, please see the [contributing guide](https://github.com/grafana/grafana-aws-sdk-react/blob/main/CONTRIBUTING.md).
+For local development instructions, please see the [contributing guide](https://github.com/grafana/grafana-aws-sdk-react/blob/main/CONTRIBUTING.md).

cspell.config.json

@@ -1,21 +1,21 @@
 {
-  "ignorePaths": [
-    ".github/**",
-    "node_modules/**",
-    "dist/**",
-    "yarn.lock"
-  ],
+  "ignorePaths": [".github/**", "node_modules/**", "dist/**", "yarn.lock"],
   "words": [
     "SIGV",
     "isob",
     "Creds",
     "CREDS",
-    "opensearch", 
+    "opensearch",
     "esbuild",
     "testid",
     "Datasources",
     "Datasource",
     "typecheck",
-    "tibdex"
+    "tibdex",
+    "eslintcache",
+    "lefthook",
+    "gofmt",
+    "hmac",
+    "grabpl"
   ]
 }

lefthook.yml

@@ -0,0 +1,11 @@
+pre-commit:
+  parallel: true
+  commands:
+    frontend-lint:
+      glob: '*.{js,ts,tsx}'
+      run: |
+        yarn lint {staged_files}
+        yarn prettier --write {staged_files}
+      stage_fixed: true
+    spellcheck:
+      run: yarn spellcheck {staged_files}

package.json

@@ -64,7 +64,9 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lefthook": "^1.9.2",
     "node-notifier": "^10.0.1",
+    "prettier": "^3.4.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "^6.27.0",

src/components/SIGV4ConnectionConfig.test.tsx

@@ -3,24 +3,24 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { AwsAuthType } from '../types';
 import { SIGV4ConnectionConfig } from './SIGV4ConnectionConfig';
-import {config} from '@grafana/runtime'
+import { config } from '@grafana/runtime';
 
 jest.mock('@grafana/runtime', () => ({
   ...jest.requireActual('@grafana/runtime'),
   config: {
     awsAllowedAuthProviders: [AwsAuthType.Credentials, AwsAuthType.Keys],
     awsAssumeRoleEnabled: true,
     featureToggles: {
-      awsDatasourcesTempCredentials: false
-    }
+      awsDatasourcesTempCredentials: false,
+    },
   },
 }));
 
 describe('SIGV4ConnectionConfig', () => {
   beforeEach(() => {
     config.awsAllowedAuthProviders = [AwsAuthType.Credentials, AwsAuthType.Keys];
     config.awsAssumeRoleEnabled = true;
-    config.featureToggles.awsDatasourcesTempCredentials = false
+    config.featureToggles.awsDatasourcesTempCredentials = false;
   });
   const setup = (onOptionsChange?: () => {}) => {
     const props: DataSourcePluginOptionsEditorProps<any, any> = {

src/components/SIGV4ConnectionConfig.tsx

@@ -6,11 +6,9 @@ import { AwsAuthDataSourceSecureJsonData, AwsAuthDataSourceJsonData, ConnectionC
 
 export interface SIGV4ConnectionConfigProps extends DataSourcePluginOptionsEditorProps<any, any> {
   inExperimentalAuthComponent?: boolean;
-};
+}
 
-export const SIGV4ConnectionConfig: React.FC<SIGV4ConnectionConfigProps> = (
-  props: SIGV4ConnectionConfigProps
-) => {
+export const SIGV4ConnectionConfig: React.FC<SIGV4ConnectionConfigProps> = (props: SIGV4ConnectionConfigProps) => {
   const { onOptionsChange, options } = props;
 
   // Map HttpSettings props to ConnectionConfigProps

src/sql/ConfigEditor/ConfigSelect.test.tsx

@@ -16,38 +16,38 @@ const props: ConfigSelectProps = {
 };
 
 describe('ConfigSelect', () => {
-      it('should call onChange with the new value', async () => {
-        const fetch = jest.fn().mockResolvedValue(['bar']);
-        const onChange = jest.fn();
-        const label = 'foo-id';
-        render(<ConfigSelect {...props} label={label} fetch={fetch} onChange={onChange} />);
-  
-        const selectEl = screen.getByLabelText(label);
-        expect(selectEl).toBeInTheDocument();
-        expect(selectEl).not.toBeDisabled();
-        await select(selectEl, 'bar', { container: document.body });
-        expect(fetch).toHaveBeenCalled();
-        expect(onChange).toHaveBeenCalledWith({ label: 'bar', value: 'bar' });
-      });
-  
-      it('should show disabled select if passed disabled as prop', () => {
-        const label = 'foo-id';
-        render(<ConfigSelect {...props} disabled={true} label={label} />);
-        const selectEl = screen.getByLabelText(label);
-  
-        expect(selectEl).toBeDisabled();
-      });
-  
-      it('should show disabled select if passed disabled=false as prop but jsonData.defaultRegion is not set', () => {
-        const propsWithoutDefaultRegion = {
-          ...props,
-          options: { ...props.options, jsonData: { ...props.options.jsonData } },
-        };
-        propsWithoutDefaultRegion.options.jsonData = {};
-        const label = 'foo-id';
-        render(<ConfigSelect {...propsWithoutDefaultRegion} disabled={false} label={label} />);
-        const selectEl = screen.getByLabelText(label);
-  
-        expect(selectEl).toBeDisabled();
-      });
+  it('should call onChange with the new value', async () => {
+    const fetch = jest.fn().mockResolvedValue(['bar']);
+    const onChange = jest.fn();
+    const label = 'foo-id';
+    render(<ConfigSelect {...props} label={label} fetch={fetch} onChange={onChange} />);
+
+    const selectEl = screen.getByLabelText(label);
+    expect(selectEl).toBeInTheDocument();
+    expect(selectEl).not.toBeDisabled();
+    await select(selectEl, 'bar', { container: document.body });
+    expect(fetch).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ label: 'bar', value: 'bar' });
+  });
+
+  it('should show disabled select if passed disabled as prop', () => {
+    const label = 'foo-id';
+    render(<ConfigSelect {...props} disabled={true} label={label} />);
+    const selectEl = screen.getByLabelText(label);
+
+    expect(selectEl).toBeDisabled();
+  });
+
+  it('should show disabled select if passed disabled=false as prop but jsonData.defaultRegion is not set', () => {
+    const propsWithoutDefaultRegion = {
+      ...props,
+      options: { ...props.options, jsonData: { ...props.options.jsonData } },
+    };
+    propsWithoutDefaultRegion.options.jsonData = {};
+    const label = 'foo-id';
+    render(<ConfigSelect {...propsWithoutDefaultRegion} disabled={false} label={label} />);
+    const selectEl = screen.getByLabelText(label);
+
+    expect(selectEl).toBeDisabled();
+  });
 });

src/sql/QueryEditor/FormatSelect.test.tsx

@@ -22,15 +22,15 @@ const props: FormatSelectProps<SQLQuery, SQLOptions> = {
 };
 
 describe('FormatSelect', () => {
-      it('should change the format mode', async () => {
-        render(<FormatSelect {...props} />);
-        expect(screen.getByText('Table')).toBeInTheDocument();
+  it('should change the format mode', async () => {
+    render(<FormatSelect {...props} />);
+    expect(screen.getByText('Table')).toBeInTheDocument();
 
-        const selectEl = screen.getByLabelText('Format data frames as');
-        expect(selectEl).toBeInTheDocument();
-        await select(selectEl, 'Time Series', { container: document.body });
+    const selectEl = screen.getByLabelText('Format data frames as');
+    expect(selectEl).toBeInTheDocument();
+    await select(selectEl, 'Time Series', { container: document.body });
 
-        expect(props.onChange).toHaveBeenCalledWith({ ...props.query, format: SQLOptions.TimeSeries });
-        expect(props.onRunQuery).toHaveBeenCalled();
-      });
-    });
+    expect(props.onChange).toHaveBeenCalledWith({ ...props.query, format: SQLOptions.TimeSeries });
+    expect(props.onRunQuery).toHaveBeenCalled();
+  });
+});

src/sql/QueryEditor/QueryEditorHeader.tsx

@@ -8,7 +8,7 @@ import { RunQueryButtons } from '@grafana/async-query-data';
 export interface Props<
   Datasource extends DataSourceApi<TQuery, JsonData>,
   TQuery extends DataQuery,
-  JsonData extends DataSourceJsonData
+  JsonData extends DataSourceJsonData,
 > extends QueryEditorProps<Datasource, TQuery, JsonData> {
   showAsyncQueryButtons?: boolean;
   extraHeaderElementLeft?: React.JSX.Element;
@@ -21,7 +21,7 @@ export interface Props<
 export function QueryEditorHeader<
   Datasource extends DataSourceApi<TQuery, JsonData>,
   TQuery extends DataQuery,
-  JsonData extends DataSourceJsonData
+  JsonData extends DataSourceJsonData,
 >({
   query,
   showAsyncQueryButtons,

src/sql/ResourceSelector.tsx

@@ -114,17 +114,18 @@ export function ResourceSelector(props: ResourceSelectorProps) {
     }
   };
 
-  return <Select
-          {...props}
-          id={props.id}
-          inputId={props.id}
-          aria-label={props.label}
-          options={options}
-          onChange={onChange}
-          isLoading={isLoading}
-          className={props.className || 'min-width-6'}
-          onOpenMenu={() => props.fetch && onClick()}
-          menuShouldPortal={true}
-        />
-
+  return (
+    <Select
+      {...props}
+      id={props.id}
+      inputId={props.id}
+      aria-label={props.label}
+      options={options}
+      onChange={onChange}
+      isLoading={isLoading}
+      className={props.className || 'min-width-6'}
+      onOpenMenu={() => props.fetch && onClick()}
+      menuShouldPortal={true}
+    />
+  );
 }

src/types.ts

@@ -9,7 +9,7 @@ export enum AwsAuthType {
    * @deprecated use default
    */
   ARN = 'arn',
-  GrafanaAssumeRole = 'grafana_assume_role'
+  GrafanaAssumeRole = 'grafana_assume_role',
 }
 
 export interface AwsAuthDataSourceJsonData extends DataSourceJsonData {
@@ -31,7 +31,7 @@ export type AwsAuthDataSourceSettings = DataSourceSettings<AwsAuthDataSourceJson
 
 export interface ConnectionConfigProps<
   J extends AwsAuthDataSourceJsonData = AwsAuthDataSourceJsonData,
-  S = AwsAuthDataSourceSecureJsonData
+  S = AwsAuthDataSourceSecureJsonData,
 > extends DataSourcePluginOptionsEditorProps<J, S> {
   standardRegions?: string[];
   loadRegions?: () => Promise<string[]>;