From 4143e313dad197617cb1ad4eb00e7f952f763aea Mon Sep 17 00:00:00 2001 From: palash-signoz <88981777+palash-signoz@users.noreply.github.com> Date: Thu, 26 Aug 2021 11:50:47 +0530 Subject: [PATCH] Fix(FE): Eslint Prettier are configured (#269) * fix(FE): eslint * chore: run eslint on frontend folder * chore: run eslint on src * chore: eslint fixing is updated * chore: linting errors are updated Co-authored-by: Nidhi Tandon --- frontend/.eslintignore | 2 + frontend/.eslintrc.js | 41 + frontend/.prettierrc.json | 2 +- .../1-getting-started/todo.spec.ts | 78 +- frontend/cypress/support/commands.ts | 2 +- frontend/cypress/support/index.ts | 2 +- frontend/eslintrc.js | 24 - frontend/gulpfile.js | 26 +- frontend/package-lock.json | 21590 ---------------- frontend/package.json | 18 +- frontend/src/AppRoutes/index.tsx | 21 +- frontend/src/AppRoutes/routes.ts | 22 +- frontend/src/api/apiV1.ts | 2 +- frontend/src/api/index.ts | 7 +- frontend/src/assets/NotFound.tsx | 36 +- frontend/src/assets/index.css | 6 +- frontend/src/components/Loadable/index.tsx | 2 +- frontend/src/components/Modal.tsx | 4 +- frontend/src/components/NotFound/index.tsx | 9 +- frontend/src/components/NotFound/styles.ts | 4 +- frontend/src/components/Spinner/index.tsx | 14 +- frontend/src/components/Spinner/styles.ts | 8 +- frontend/src/constants/app.ts | 6 +- frontend/src/constants/auth.ts | 2 +- frontend/src/constants/env.ts | 2 +- frontend/src/constants/localStorage.ts | 2 +- frontend/src/constants/onboarding.ts | 2 +- frontend/src/constants/query.ts | 14 +- frontend/src/constants/routes.ts | 18 +- frontend/src/index.tsx | 19 +- frontend/src/modules/AppLayout.tsx | 20 +- frontend/src/modules/Auth/Signup.tsx | 65 +- .../src/modules/Metrics/ErrorRateChart.tsx | 63 +- .../Metrics/ExternalApi/ExternalApiGraph.tsx | 29 +- .../Metrics/ExternalApi/graphConfig.ts | 54 +- .../src/modules/Metrics/ExternalApi/index.tsx | 2 +- .../modules/Metrics/GenericVisualization.tsx | 19 +- .../src/modules/Metrics/LatencyLineChart.tsx | 68 +- .../src/modules/Metrics/RequestRateChart.tsx | 63 +- .../src/modules/Metrics/ServiceMetrics.tsx | 52 +- .../src/modules/Metrics/ServiceMetricsDef.tsx | 2 +- .../src/modules/Metrics/ServicesTable.tsx | 94 +- .../src/modules/Metrics/ServicesTableDef.tsx | 2 +- .../src/modules/Metrics/TopEndpointsTable.tsx | 51 +- frontend/src/modules/Nav/SideNav.tsx | 48 +- .../Nav/TopNav/CustomDateTimeModal.tsx | 12 +- .../modules/Nav/TopNav/DateTimeSelector.tsx | 67 +- .../modules/Nav/TopNav/ShowBreadcrumbs.tsx | 28 +- frontend/src/modules/Nav/TopNav/config.ts | 22 +- frontend/src/modules/Nav/TopNav/index.tsx | 12 +- frontend/src/modules/Nav/TopNav/utils.ts | 8 +- frontend/src/modules/Nav/styles.ts | 4 +- frontend/src/modules/RouteProvider.tsx | 8 +- .../src/modules/Servicemap/ServiceMap.tsx | 36 +- frontend/src/modules/Servicemap/index.ts | 2 +- frontend/src/modules/Servicemap/utils.ts | 19 +- .../src/modules/Settings/settingsPage.tsx | 12 +- .../src/modules/Traces/FilterStateDisplay.tsx | 133 +- .../src/modules/Traces/LatencyModalForm.tsx | 64 +- .../modules/Traces/SelectedSpanDetails.tsx | 18 +- .../Traces/TraceCustomVisualizations.tsx | 112 +- frontend/src/modules/Traces/TraceDetail.tsx | 9 +- frontend/src/modules/Traces/TraceFilter.tsx | 167 +- .../TraceGanttChart/TraceGanttChart.tsx | 103 +- .../TraceGanttChart/TraceGanttChartHelpers.ts | 12 +- .../modules/Traces/TraceGanttChart/index.js | 2 +- frontend/src/modules/Traces/TraceGraph.css | 2 +- frontend/src/modules/Traces/TraceGraph.tsx | 66 +- .../src/modules/Traces/TraceGraphColumn.tsx | 45 +- frontend/src/modules/Traces/TraceGraphDef.tsx | 2 +- frontend/src/modules/Traces/TraceList.tsx | 78 +- frontend/src/modules/Usage/UsageExplorer.tsx | 64 +- .../src/modules/Usage/UsageExplorerDef.tsx | 2 +- .../instrumentationPage.tsx | 34 +- frontend/src/pages.ts | 20 +- .../src/store/actions/MetricsActions/index.ts | 6 +- .../MetricsActions/metricsActionTypes.ts | 20 +- .../actions/MetricsActions/metricsActions.ts | 82 +- .../MetricsActions/metricsInterfaces.ts | 2 +- frontend/src/store/actions/global.ts | 89 +- frontend/src/store/actions/index.ts | 14 +- frontend/src/store/actions/serviceMap.ts | 19 +- frontend/src/store/actions/traceFilters.ts | 4 +- frontend/src/store/actions/traces.ts | 22 +- frontend/src/store/actions/types.ts | 25 +- frontend/src/store/actions/usage.ts | 12 +- frontend/src/store/index.ts | 7 +- frontend/src/store/reducers/global.ts | 10 +- frontend/src/store/reducers/index.ts | 23 +- frontend/src/store/reducers/metrics.ts | 112 +- frontend/src/store/reducers/serviceMap.ts | 26 +- frontend/src/store/reducers/traceFilters.ts | 18 +- frontend/src/store/reducers/traces.ts | 28 +- frontend/src/store/reducers/usage.ts | 10 +- frontend/src/themes/index.ts | 6 +- frontend/src/typings/d3-tip.d.ts | 2 +- frontend/src/typings/react-graph-vis.d.ts | 8 +- frontend/src/utils/app.ts | 4 +- frontend/src/utils/history.ts | 2 +- frontend/src/utils/spanToTree.ts | 58 +- frontend/src/utils/token.ts | 2 +- frontend/webpack.config.js | 50 +- frontend/webpack.config.prod.js | 42 +- frontend/yarn.lock | 4648 ++-- yarn.lock | 4 - 105 files changed, 3965 insertions(+), 25170 deletions(-) create mode 100644 frontend/.eslintignore create mode 100644 frontend/.eslintrc.js delete mode 100644 frontend/eslintrc.js delete mode 100644 frontend/package-lock.json delete mode 100644 yarn.lock diff --git a/frontend/.eslintignore b/frontend/.eslintignore new file mode 100644 index 0000000000..b7dab5e9cb --- /dev/null +++ b/frontend/.eslintignore @@ -0,0 +1,2 @@ +node_modules +build \ No newline at end of file diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js new file mode 100644 index 0000000000..1ebe27f73c --- /dev/null +++ b/frontend/.eslintrc.js @@ -0,0 +1,41 @@ +module.exports = { + env: { + browser: true, + es2021: true, + node: true, + }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:@typescript-eslint/eslint-recommended', + ], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + ecmaVersion: 12, + sourceType: 'module', + }, + plugins: ['react', '@typescript-eslint', 'simple-import-sort'], + rules: { + 'react/jsx-filename-extension': [ + 'error', + { + extensions: ['.tsx', '.js', '.jsx'], + }, + ], + 'react/prop-types': 'off', + '@typescript-eslint/explicit-function-return-type': 'error', + '@typescript-eslint/no-var-requires': 0, + 'linebreak-style': ['error', 'unix'], + indent: ['error', 'tab'], + quotes: ['error', 'single'], + semi: ['error', 'always'], + + // simple sort error + 'simple-import-sort/imports': 'error', + 'simple-import-sort/exports': 'error', + }, +}; diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json index 3708afab4f..fd2d5e75d1 100644 --- a/frontend/.prettierrc.json +++ b/frontend/.prettierrc.json @@ -2,6 +2,6 @@ "trailingComma": "all", "useTabs": true, "tabWidth": 1, - "singleQuote": false, + "singleQuote": true, "jsxSingleQuote": false } diff --git a/frontend/cypress/integration/1-getting-started/todo.spec.ts b/frontend/cypress/integration/1-getting-started/todo.spec.ts index 887f791b3f..d8c9810c02 100644 --- a/frontend/cypress/integration/1-getting-started/todo.spec.ts +++ b/frontend/cypress/integration/1-getting-started/todo.spec.ts @@ -11,32 +11,32 @@ // please read our getting started guide: // https://on.cypress.io/introduction-to-cypress -describe("example to-do app", () => { +describe('example to-do app', () => { beforeEach(() => { // Cypress starts out with a blank slate for each test // so we must tell it to visit our website with the `cy.visit()` command. // Since we want to visit the same URL at the start of all our tests, // we include it in our beforeEach function so that it runs before each test - cy.visit("https://example.cypress.io/todo"); + cy.visit('https://example.cypress.io/todo'); }); - it("displays two todo items by default", () => { + it('displays two todo items by default', () => { // We use the `cy.get()` command to get all elements that match the selector. // Then, we use `should` to assert that there are two matched items, // which are the two default items. - cy.get(".todo-list li").should("have.length", 2); + cy.get('.todo-list li').should('have.length', 2); // We can go even further and check that the default todos each contain // the correct text. We use the `first` and `last` functions // to get just the first and last matched elements individually, // and then perform an assertion with `should`. - cy.get(".todo-list li").first().should("have.text", "Pay electric bill"); - cy.get(".todo-list li").last().should("have.text", "Walk the dog"); + cy.get('.todo-list li').first().should('have.text', 'Pay electric bill'); + cy.get('.todo-list li').last().should('have.text', 'Walk the dog'); }); - it("can add new todo items", () => { + it('can add new todo items', () => { // We'll store our item text in a variable so we can reuse it - const newItem = "Feed the cat"; + const newItem = 'Feed the cat'; // Let's get the input element and use the `type` command to // input our new list item. After typing the content of our item, @@ -44,7 +44,7 @@ describe("example to-do app", () => { // This input has a data-test attribute so we'll use that to select the // element in accordance with best practices: // https://on.cypress.io/selecting-elements - cy.get("[data-test=new-todo]").type(`${newItem}{enter}`); + cy.get('[data-test=new-todo]').type(`${newItem}{enter}`); // Now that we've typed our new item, let's check that it actually was added to the list. // Since it's the newest item, it should exist as the last element in the list. @@ -52,13 +52,13 @@ describe("example to-do app", () => { // Since assertions yield the element that was asserted on, // we can chain both of these assertions together into a single statement. cy - .get(".todo-list li") - .should("have.length", 3) + .get('.todo-list li') + .should('have.length', 3) .last() - .should("have.text", newItem); + .should('have.text', newItem); }); - it("can check off an item as completed", () => { + it('can check off an item as completed', () => { // In addition to using the `get` command to get an element by selector, // we can also use the `contains` command to get an element by its contents. // However, this will yield the