diff --git a/frontend/.github/workflows/e2e.auth.yml b/frontend/.github/workflows/e2e.auth.yml index 6270d196b9..441ef0fdfd 100644 --- a/frontend/.github/workflows/e2e.auth.yml +++ b/frontend/.github/workflows/e2e.auth.yml @@ -16,10 +16,10 @@ jobs: uses: actions/checkout@v2 - name: Run Cypress uses: cypress-io/github-action@v2 - with: - env: AUTH_TOKEN=${{ secrets.UNLEASH_TOKEN }},DEFAULT_ENV="development" + with: + env: AUTH_TOKEN=${{ secrets.UNLEASH_TOKEN }} config: baseUrl=${{ github.event.deployment_status.target_url }} record: true - spec: cypress/integration/auth/auth.spec.js + spec: cypress/integration/auth/auth.spec.ts env: - CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} \ No newline at end of file + CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} diff --git a/frontend/.github/workflows/e2e.feature.yml b/frontend/.github/workflows/e2e.feature.yml index cfa3af2438..c0826e6194 100644 --- a/frontend/.github/workflows/e2e.feature.yml +++ b/frontend/.github/workflows/e2e.feature.yml @@ -16,10 +16,10 @@ jobs: uses: actions/checkout@v2 - name: Run Cypress uses: cypress-io/github-action@v2 - with: - env: AUTH_TOKEN=${{ secrets.UNLEASH_TOKEN }},DEFAULT_ENV="development" + with: + env: AUTH_TOKEN=${{ secrets.UNLEASH_TOKEN }} config: baseUrl=${{ github.event.deployment_status.target_url }} record: true - spec: cypress/integration/feature-toggle/feature.spec.js + spec: cypress/integration/feature/feature.spec.ts env: - CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} \ No newline at end of file + CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} diff --git a/frontend/cypress.json b/frontend/cypress.json index e91af16203..ba6b740e2d 100644 --- a/frontend/cypress.json +++ b/frontend/cypress.json @@ -1,4 +1,6 @@ { "projectId": "tc2qff", - "defaultCommandTimeout": 12000 + "defaultCommandTimeout": 12000, + "screenshotOnRunFailure": false, + "video": false } diff --git a/frontend/cypress/integration/auth/auth.spec.js b/frontend/cypress/integration/auth/auth.spec.ts similarity index 93% rename from frontend/cypress/integration/auth/auth.spec.js rename to frontend/cypress/integration/auth/auth.spec.ts index 63500c543d..d05a936a4d 100644 --- a/frontend/cypress/integration/auth/auth.spec.js +++ b/frontend/cypress/integration/auth/auth.spec.ts @@ -1,15 +1,4 @@ -/* eslint-disable jest/no-conditional-expect */ /// -// Welcome to Cypress! -// -// This spec file contains a variety of sample tests -// for a todo list app that are designed to demonstrate -// the power of writing tests in Cypress. -// -// To learn more about how Cypress works and -// what makes it such an awesome testing tool, -// please read our getting started guide: -// https://on.cypress.io/introduction-to-cypress const username = 'test@test.com'; const password = 'qY70$NDcJNXA'; diff --git a/frontend/cypress/integration/feature-toggle/feature.spec.js b/frontend/cypress/integration/feature/feature.spec.ts similarity index 76% rename from frontend/cypress/integration/feature-toggle/feature.spec.js rename to frontend/cypress/integration/feature/feature.spec.ts index a808390cae..0e682af659 100644 --- a/frontend/cypress/integration/feature-toggle/feature.spec.js +++ b/frontend/cypress/integration/feature/feature.spec.ts @@ -1,82 +1,48 @@ -/* eslint-disable jest/no-conditional-expect */ /// -// Welcome to Cypress! -// -// This spec file contains a variety of sample tests -// for a todo list app that are designed to demonstrate -// the power of writing tests in Cypress. -// -// To learn more about how Cypress works and -// what makes it such an awesome testing tool, -// please read our getting started guide: -// https://on.cypress.io/introduction-to-cypress -let featureToggleName = ''; -let enterprise = false; +import { disableFeatureStrategiesProductionGuard } from '../../../src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard'; + +const randomId = String(Math.random()).split('.')[1]; +const featureToggleName = `unleash-e2e-${randomId}`; +const enterprise = Boolean(Cypress.env('ENTERPRISE')); +const passwordAuth = Cypress.env('PASSWORD_AUTH'); +const authToken = Cypress.env('AUTH_TOKEN'); +const baseUrl = Cypress.config().baseUrl; let strategyId = ''; -let defaultEnv = 'development'; - -describe('feature toggle', () => { - before(() => { - featureToggleName = `unleash-e2e-${Math.floor(Math.random() * 100)}`; - enterprise = Boolean(Cypress.env('ENTERPRISE')); - - const env = Cypress.env('DEFAULT_ENV'); - if (env) { - defaultEnv = env; - } - }); +describe('feature', () => { after(() => { - const authToken = Cypress.env('AUTH_TOKEN'); - cy.request({ method: 'DELETE', - url: `${ - Cypress.config().baseUrl - }/api/admin/features/${featureToggleName}`, - headers: { - Authorization: authToken, - }, + url: `${baseUrl}/api/admin/features/${featureToggleName}`, + headers: { Authorization: authToken }, }); - cy.request({ method: 'DELETE', - url: `${ - Cypress.config().baseUrl - }/api/admin/archive/${featureToggleName}`, - headers: { - Authorization: authToken, - }, + url: `${baseUrl}/api/admin/archive/${featureToggleName}`, + headers: { Authorization: authToken }, }); }); 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 - const passwordAuth = Cypress.env('PASSWORD_AUTH'); - enterprise = Boolean(Cypress.env('ENTERPRISE')); - + disableFeatureStrategiesProductionGuard(); cy.visit('/'); if (passwordAuth) { cy.get('[data-test="LOGIN_EMAIL_ID"]').type('test@test.com'); - cy.get('[data-test="LOGIN_PASSWORD_ID"]').type('qY70$NDcJNXA'); - cy.get("[data-test='LOGIN_BUTTON']").click(); } else { cy.get('[data-test=LOGIN_EMAIL_ID]').type('test@unleash-e2e.com'); cy.get('[data-test=LOGIN_BUTTON]').click(); } + + // Wait for the login redirects to complete. + cy.get('[data-test=HEADER_USER_AVATAR'); }); - it('Creates a feature toggle', () => { - if ( - document.querySelectorAll("[data-test='CLOSE_SPLASH']").length > 0 - ) { + it('can create a feature toggle', () => { + if (document.querySelector("[data-test='CLOSE_SPLASH']")) { cy.get("[data-test='CLOSE_SPLASH']").click(); } @@ -87,14 +53,13 @@ describe('feature toggle', () => { ); cy.get("[data-test='CF_NAME_ID'").type(featureToggleName); - cy.get("[data-test='CF_DESC_ID'").type('hellowrdada'); - + cy.get("[data-test='CF_DESC_ID'").type('hello-world'); cy.get("[data-test='CF_CREATE_BTN_ID']").click(); cy.wait('@createFeature'); cy.url().should('include', featureToggleName); }); - it('Gives an error if a toggle exists with the same name', () => { + it('gives an error if a toggle exists with the same name', () => { cy.get('[data-test=NAVIGATE_TO_CREATE_FEATURE').click(); cy.intercept('POST', '/api/admin/projects/default/features').as( @@ -102,16 +67,14 @@ describe('feature toggle', () => { ); cy.get("[data-test='CF_NAME_ID'").type(featureToggleName); - cy.get("[data-test='CF_DESC_ID'").type('hellowrdada'); - + cy.get("[data-test='CF_DESC_ID'").type('hello-world'); cy.get("[data-test='CF_CREATE_BTN_ID']").click(); - cy.get("[data-test='INPUT_ERROR_TEXT']").contains( 'A feature with this name already exists' ); }); - it('Gives an error if a toggle name is url unsafe', () => { + it('gives an error if a toggle name is url unsafe', () => { cy.get('[data-test=NAVIGATE_TO_CREATE_FEATURE').click(); cy.intercept('POST', '/api/admin/projects/default/features').as( @@ -119,17 +82,14 @@ describe('feature toggle', () => { ); cy.get("[data-test='CF_NAME_ID'").type('featureToggleUnsafe####$#//'); - cy.get("[data-test='CF_DESC_ID'").type('hellowrdada'); - + cy.get("[data-test='CF_DESC_ID'").type('hello-world'); cy.get("[data-test='CF_CREATE_BTN_ID']").click(); - cy.get("[data-test='INPUT_ERROR_TEXT']").contains( `"name" must be URL friendly` ); }); - it('Can add a gradual rollout strategy to the development environment', () => { - cy.wait(1000); + it('can add a gradual rollout strategy to the development environment', () => { cy.visit(`/projects/default/features/${featureToggleName}/strategies`); cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click(); cy.get('[data-test=ADD_NEW_STRATEGY_CARD_BUTTON_ID-2').click(); @@ -147,10 +107,9 @@ describe('feature toggle', () => { cy.intercept( 'POST', - `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies`, + `/api/admin/projects/default/features/${featureToggleName}/environments/*/strategies`, req => { expect(req.body.name).to.equal('flexibleRollout'); - expect(req.body.parameters.groupId).to.equal(featureToggleName); expect(req.body.parameters.stickiness).to.equal('default'); expect(req.body.parameters.rollout).to.equal(30); @@ -172,7 +131,6 @@ describe('feature toggle', () => { }); it('can update a strategy in the development environment', () => { - cy.wait(1000); cy.visit(`/projects/default/features/${featureToggleName}/strategies`); cy.get('[data-test=STRATEGY_ACCORDION_ID-flexibleRollout').click(); @@ -188,7 +146,6 @@ describe('feature toggle', () => { .first() .click(); - let newGroupId = 'new-group-id'; cy.get('[data-test=FLEXIBLE_STRATEGY_GROUP_ID]') .first() .clear() @@ -196,9 +153,9 @@ describe('feature toggle', () => { cy.intercept( 'PUT', - `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies/${strategyId}`, + `/api/admin/projects/default/features/${featureToggleName}/environments/*/strategies/${strategyId}`, req => { - expect(req.body.parameters.groupId).to.equal(newGroupId); + expect(req.body.parameters.groupId).to.equal('new-group-id'); expect(req.body.parameters.stickiness).to.equal('sessionId'); expect(req.body.parameters.rollout).to.equal(60); @@ -219,12 +176,11 @@ describe('feature toggle', () => { }); it('can delete a strategy in the development environment', () => { - cy.wait(1000); cy.visit(`/projects/default/features/${featureToggleName}/strategies`); cy.intercept( 'DELETE', - `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies/${strategyId}`, + `/api/admin/projects/default/features/${featureToggleName}/environments/*/strategies/${strategyId}`, req => { req.continue(res => { expect(res.statusCode).to.equal(200); @@ -237,8 +193,7 @@ describe('feature toggle', () => { cy.wait('@deleteStrategy'); }); - it('Can add a userid strategy to the development environment', () => { - cy.wait(1000); + it('can add a userid strategy to the development environment', () => { cy.visit(`/projects/default/features/${featureToggleName}/strategies`); cy.get('[data-test=ADD_NEW_STRATEGY_ID]').click(); cy.get('[data-test=ADD_NEW_STRATEGY_CARD_BUTTON_ID-3').click(); @@ -260,7 +215,7 @@ describe('feature toggle', () => { cy.intercept( 'POST', - `/api/admin/projects/default/features/${featureToggleName}/environments/${defaultEnv}/strategies`, + `/api/admin/projects/default/features/${featureToggleName}/environments/*/strategies`, req => { expect(req.body.name).to.equal('userWithId'); @@ -282,11 +237,12 @@ describe('feature toggle', () => { cy.wait('@addStrategyToFeature'); }); - it('Can add two variant to the feature', () => { + it('can add two variant to the feature', () => { const variantName = 'my-new-variant'; const secondVariantName = 'my-second-variant'; - cy.wait(1000); + cy.visit(`/projects/default/features/${featureToggleName}/variants`); + cy.intercept( 'PATCH', `/api/admin/projects/default/features/${featureToggleName}/variants`, @@ -304,20 +260,23 @@ describe('feature toggle', () => { expect(req.body[1].value.name).to.equal(secondVariantName); } } - ).as('variantcreation'); - cy.get('[data-test=ADD_VARIANT_BUTTON]').click(); - cy.get('[data-test=VARIANT_NAME_INPUT]').type(variantName); - cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); - cy.wait('@variantcreation'); - cy.get('[data-test=ADD_VARIANT_BUTTON]').click(); - cy.get('[data-test=VARIANT_NAME_INPUT]').type(secondVariantName); - cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); - cy.wait('@variantcreation'); - }); - it('Can set weight to fixed value for one of the variants', () => { - cy.wait(1000); + ).as('variantCreation'); + cy.get('[data-test=ADD_VARIANT_BUTTON]').click(); + cy.get('[data-test=VARIANT_NAME_INPUT]').click().type(variantName); + cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); + cy.wait('@variantCreation'); + cy.get('[data-test=ADD_VARIANT_BUTTON]').click(); + cy.get('[data-test=VARIANT_NAME_INPUT]') + .click() + .type(secondVariantName); + cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); + cy.wait('@variantCreation'); + }); + + it('can set weight to fixed value for one of the variants', () => { cy.visit(`/projects/default/features/${featureToggleName}/variants`); + cy.get('[data-test=VARIANT_EDIT_BUTTON]').first().click(); cy.get('[data-test=VARIANT_NAME_INPUT]') .children() @@ -328,6 +287,7 @@ describe('feature toggle', () => { .find('input') .check(); cy.get('[data-test=VARIANT_WEIGHT_INPUT]').clear().type('15'); + cy.intercept( 'PATCH', `/api/admin/projects/default/features/${featureToggleName}/variants`, @@ -342,21 +302,23 @@ describe('feature toggle', () => { expect(req.body[2].path).to.match(/weight/); expect(req.body[2].value).to.equal(150); } - ).as('variantupdate'); + ).as('variantUpdate'); + cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); - cy.wait('@variantupdate'); + cy.wait('@variantUpdate'); cy.get('[data-test=VARIANT_WEIGHT]') .first() .should('have.text', '15 %'); }); - it(`can delete variant`, () => { + it('can delete variant', () => { const variantName = 'to-be-deleted'; - cy.wait(1000); + cy.visit(`/projects/default/features/${featureToggleName}/variants`); cy.get('[data-test=ADD_VARIANT_BUTTON]').click(); - cy.get('[data-test=VARIANT_NAME_INPUT]').type(variantName); + cy.get('[data-test=VARIANT_NAME_INPUT]').click().type(variantName); cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); + cy.intercept( 'PATCH', `/api/admin/projects/default/features/${featureToggleName}/variants`, @@ -365,6 +327,7 @@ describe('feature toggle', () => { expect(e.path).to.match(/\//); } ).as('delete'); + cy.get(`[data-test=VARIANT_DELETE_BUTTON_${variantName}]`).click(); cy.get('[data-test=DIALOGUE_CONFIRM_ID]').click(); cy.wait('@delete'); diff --git a/frontend/cypress/plugins/index.js b/frontend/cypress/plugins/index.ts similarity index 100% rename from frontend/cypress/plugins/index.js rename to frontend/cypress/plugins/index.ts diff --git a/frontend/cypress/support/commands.js b/frontend/cypress/support/commands.ts similarity index 100% rename from frontend/cypress/support/commands.js rename to frontend/cypress/support/commands.ts diff --git a/frontend/cypress/support/index.js b/frontend/cypress/support/index.ts similarity index 100% rename from frontend/cypress/support/index.js rename to frontend/cypress/support/index.ts diff --git a/frontend/package.json b/frontend/package.json index cef39d30c2..e002d93ddc 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "unleash-frontend", "description": "unleash your features", - "version": "4.8.0-beta.8", + "version": "4.8.0", "keywords": [ "unleash", "feature toggle", @@ -42,14 +42,15 @@ "@material-ui/core": "4.12.3", "@material-ui/icons": "4.11.2", "@material-ui/lab": "4.0.0-alpha.60", + "@testing-library/dom": "8.11.3", "@testing-library/jest-dom": "5.16.2", "@testing-library/react": "12.1.3", "@testing-library/user-event": "13.5.0", "@types/debounce": "1.2.1", "@types/deep-diff": "1.0.1", - "@types/jest": "27.4.0", + "@types/jest": "27.4.1", "@types/lodash.clonedeep": "4.5.6", - "@types/node": "14.18.12", + "@types/node": "17.0.18", "@types/react": "17.0.39", "@types/react-dom": "17.0.11", "@types/react-outside-click-handler": "1.3.1", @@ -63,7 +64,7 @@ "copy-to-clipboard": "3.3.1", "craco": "0.0.3", "css-loader": "6.6.0", - "cypress": "8.7.0", + "cypress": "9.5.0", "date-fns": "2.28.0", "debounce": "1.2.1", "deep-diff": "1.0.2", @@ -82,7 +83,7 @@ "react-outside-click-handler": "1.3.0", "react-router-dom": "5.3.0", "react-scripts": "4.0.3", - "react-test-renderer": "16.14.0", + "react-test-renderer": "17.0.2", "react-timeago": "6.2.1", "sass": "1.49.8", "swr": "1.2.2", @@ -117,6 +118,9 @@ "no-restricted-globals": "off", "no-useless-computed-key": "off", "import/no-anonymous-default-export": "off" - } + }, + "ignorePatterns": [ + "cypress" + ] } } diff --git a/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx b/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx index 3beb70432c..8e70661277 100644 --- a/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx +++ b/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx @@ -7,7 +7,9 @@ import { IAddonProvider } from '../../../../interfaces/addons'; interface IAddonProps { provider: IAddonProvider; checkedEvents: string[]; - setEventValue: (name: string) => void; + setEventValue: ( + name: string + ) => (event: React.ChangeEvent) => void; error: Record; } diff --git a/frontend/src/component/addons/AddonList/AddonList.tsx b/frontend/src/component/addons/AddonList/AddonList.tsx index 8d96e5c3d0..a5a43b0812 100644 --- a/frontend/src/component/addons/AddonList/AddonList.tsx +++ b/frontend/src/component/addons/AddonList/AddonList.tsx @@ -1,4 +1,4 @@ -import { ReactElement } from 'react'; +import React, { ReactElement } from 'react'; import { ConfiguredAddons } from './ConfiguredAddons/ConfiguredAddons'; import { AvailableAddons } from './AvailableAddons/AvailableAddons'; import { Avatar } from '@material-ui/core'; @@ -12,7 +12,7 @@ import dataDogIcon from '../../../assets/icons/datadog.svg'; import { formatAssetPath } from '../../../utils/format-path'; import useAddons from '../../../hooks/api/getters/useAddons/useAddons'; -const style = { +const style: React.CSSProperties = { width: '40px', height: '40px', marginRight: '16px', diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx index 78ef5188cc..7defb1f187 100644 --- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx +++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx @@ -21,6 +21,7 @@ import AccessContext from '../../../../contexts/AccessContext'; import { IAddon } from '../../../../interfaces/addons'; import PermissionIconButton from '../../../common/PermissionIconButton/PermissionIconButton'; import Dialogue from '../../../common/Dialogue'; +import { formatUnknownError } from '../../../../utils/format-unknown-error'; interface IConfigureAddonsProps { getAddonIcon: (name: string) => ReactElement; @@ -59,8 +60,8 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => { title: 'Success', text: 'Addon state switched successfully', }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx index 7e97a831b1..7f6058b383 100644 --- a/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx +++ b/frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx @@ -24,7 +24,6 @@ import { DELETE_API_TOKEN, } from '../../../providers/AccessProvider/permissions'; import { useStyles } from './ApiTokenList.styles'; -import { formatDateWithLocale } from '../../../common/util'; import Secret from './secret'; import { Delete, FileCopy } from '@material-ui/icons'; import Dialogue from '../../../common/Dialogue'; @@ -32,6 +31,7 @@ import { CREATE_API_TOKEN_BUTTON } from '../../../../testIds'; import { Alert } from '@material-ui/lab'; import copy from 'copy-to-clipboard'; import { useLocationSettings } from '../../../../hooks/useLocationSettings'; +import { formatDateYMD } from '../../../../utils/format-date'; interface IApiToken { createdAt: Date; @@ -146,7 +146,7 @@ export const ApiTokenList = () => { align="left" className={styles.hideSM} > - {formatDateWithLocale( + {formatDateYMD( item.createdAt, locationSettings.locale )} diff --git a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx index 85f2ff0e0e..a1a31d6035 100644 --- a/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx +++ b/frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx @@ -10,6 +10,7 @@ import { ADMIN } from '../../../providers/AccessProvider/permissions'; import { ConfirmToken } from '../ConfirmToken/ConfirmToken'; import { useState } from 'react'; import { scrollToTop } from '../../../common/util'; +import { formatUnknownError } from '../../../../utils/format-unknown-error'; export const CreateApiToken = () => { const { setToastApiError } = useToast(); @@ -49,8 +50,8 @@ export const CreateApiToken = () => { setToken(api.secret); setShowConfirm(true); }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx index f9860a1fe0..43c9712e6b 100644 --- a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx +++ b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx @@ -68,8 +68,8 @@ export const GoogleAuth = () => { title: 'Settings stored', type: 'success', }); - } catch (err) { - setToastApiError(formatUnknownError(err)); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx index c32b10da00..9fa252e6d9 100644 --- a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx +++ b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx @@ -79,8 +79,8 @@ export const OidcAuth = () => { title: 'Settings stored', type: 'success', }); - } catch (err) { - setToastApiError(formatUnknownError(err)); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx index 068563b2e6..cef119c529 100644 --- a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx +++ b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx @@ -51,8 +51,8 @@ export const PasswordAuth = () => { type: 'success', show: true, }); - } catch (err) { - setToastApiError(formatUnknownError(err)); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); setDisablePasswordAuth(config.disabled); } }; diff --git a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx index 26f8c7a293..5120ddaa57 100644 --- a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx +++ b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx @@ -75,8 +75,8 @@ export const SamlAuth = () => { title: 'Settings stored', type: 'success', }); - } catch (err) { - setToastApiError(formatUnknownError(err)); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx index adf6d589b9..8e766ef5ea 100644 --- a/frontend/src/component/admin/invoice/InvoiceList.tsx +++ b/frontend/src/component/admin/invoice/InvoiceList.tsx @@ -8,7 +8,6 @@ import { Button, } from '@material-ui/core'; import OpenInNew from '@material-ui/icons/OpenInNew'; -import { formatDateWithLocale } from '../../common/util'; import PageContent from '../../common/PageContent'; import HeaderTitle from '../../common/HeaderTitle'; import ConditionallyRender from '../../common/ConditionallyRender'; @@ -16,6 +15,7 @@ import { formatApiPath } from '../../../utils/format-path'; import useInvoices from '../../../hooks/api/getters/useInvoices/useInvoices'; import { IInvoice } from '../../../interfaces/invoice'; import { useLocationSettings } from '../../../hooks/useLocationSettings'; +import { formatDateYMD } from '../../../utils/format-date'; const PORTAL_URL = formatApiPath('api/admin/invoices/portal'); @@ -87,7 +87,7 @@ const InvoiceList = () => { style={{ textAlign: 'left' }} > {item.dueDate && - formatDateWithLocale( + formatDateYMD( item.dueDate, locationSettings.locale )} diff --git a/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx b/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx index 78048e0ab0..97835a132f 100644 --- a/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx +++ b/frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx @@ -7,6 +7,7 @@ import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import useToast from '../../../../hooks/useToast'; import PermissionButton from '../../../common/PermissionButton/PermissionButton'; import { ADMIN } from '../../../providers/AccessProvider/permissions'; +import { formatUnknownError } from '../../../../utils/format-unknown-error'; const CreateProjectRole = () => { const { setToastData, setToastApiError } = useToast(); @@ -49,8 +50,8 @@ const CreateProjectRole = () => { confetti: true, type: 'success', }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; diff --git a/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx b/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx index eb79af949c..6b9b752bea 100644 --- a/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx +++ b/frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx @@ -13,6 +13,7 @@ import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig'; import useToast from '../../../../hooks/useToast'; import PermissionButton from '../../../common/PermissionButton/PermissionButton'; import { ADMIN } from '../../../providers/AccessProvider/permissions'; +import { formatUnknownError } from '../../../../utils/format-unknown-error'; const EditProjectRole = () => { const { uiConfig } = useUiConfig(); @@ -88,8 +89,8 @@ const EditProjectRole = () => { text: 'Your role changes will automatically be applied to the users with this role.', confetti: true, }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; diff --git a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx index 4b0676c471..3578deb444 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx +++ b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx @@ -1,16 +1,16 @@ import Input from '../../../common/Input/Input'; import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion'; import { + Button, Checkbox, FormControlLabel, TextField, - Button, } from '@material-ui/core'; import useProjectRolePermissions from '../../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions'; import { useStyles } from './ProjectRoleForm.styles'; import ConditionallyRender from '../../../common/ConditionallyRender'; -import React from 'react'; +import React, { ReactNode } from 'react'; import { IPermission } from '../../../../interfaces/project'; import { ICheckedPermission, @@ -33,6 +33,7 @@ interface IProjectRoleForm { clearErrors: () => void; validateNameUniqueness?: () => void; getRoleKey: (permission: { id: number; environment?: string }) => string; + children: ReactNode; } const ProjectRoleForm: React.FC = ({ diff --git a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts index a2e0213f3a..572dbc27f0 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts +++ b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ deleteParagraph: { diff --git a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx index 91632c0be3..d29839ab83 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx +++ b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx @@ -16,6 +16,7 @@ import IRole, { IProjectRole } from '../../../../../interfaces/role'; import useProjectRolesApi from '../../../../../hooks/api/actions/useProjectRolesApi/useProjectRolesApi'; import useToast from '../../../../../hooks/useToast'; import ProjectRoleDeleteConfirm from '../ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm'; +import { formatUnknownError } from '../../../../../utils/format-unknown-error'; const ROOTROLE = 'root'; @@ -44,8 +45,8 @@ const ProjectRoleList = () => { title: 'Successfully deleted role', text: 'Your role is now deleted', }); - } catch (e) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } setDelDialog(false); setConfirmName(''); diff --git a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx index fc32da759d..386363abfd 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx +++ b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx @@ -1,11 +1,12 @@ import { useStyles } from './ProjectRoleListItem.styles'; -import { TableRow, TableCell, Typography } from '@material-ui/core'; -import { Edit, Delete } from '@material-ui/icons'; +import { TableCell, TableRow, Typography } from '@material-ui/core'; +import { Delete, Edit } from '@material-ui/icons'; import { ADMIN } from '../../../../../providers/AccessProvider/permissions'; import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle'; import PermissionIconButton from '../../../../../common/PermissionIconButton/PermissionIconButton'; import { IProjectRole } from '../../../../../../interfaces/role'; import { useHistory } from 'react-router-dom'; +import React from 'react'; interface IRoleListItemProps { id: number; diff --git a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoles.styles.ts b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoles.styles.ts index 0e6eea556c..7c4ce07f86 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoles.styles.ts +++ b/frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoles.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ rolesListBody: { diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts index f8448ba756..9eb137338b 100644 --- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts +++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles({ iconContainer: { diff --git a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx index f480eb7535..8c4e1ffefe 100644 --- a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx +++ b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx @@ -10,6 +10,7 @@ import { useState } from 'react'; import { scrollToTop } from '../../../common/util'; import PermissionButton from '../../../common/PermissionButton/PermissionButton'; import { ADMIN } from '../../../providers/AccessProvider/permissions'; +import { formatUnknownError } from '../../../../utils/format-unknown-error'; const CreateUser = () => { const { setToastApiError } = useToast(); @@ -51,8 +52,8 @@ const CreateUser = () => { setInviteLink(user.inviteLink); setShowConfirm(true); }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; diff --git a/frontend/src/component/admin/users/EditUser/EditUser.tsx b/frontend/src/component/admin/users/EditUser/EditUser.tsx index 07e212bf56..c82b818ccd 100644 --- a/frontend/src/component/admin/users/EditUser/EditUser.tsx +++ b/frontend/src/component/admin/users/EditUser/EditUser.tsx @@ -11,6 +11,7 @@ import { useEffect } from 'react'; import PermissionButton from '../../../common/PermissionButton/PermissionButton'; import { ADMIN } from '../../../providers/AccessProvider/permissions'; import { EDIT } from '../../../../constants/misc'; +import { formatUnknownError } from '../../../../utils/format-unknown-error'; const EditUser = () => { useEffect(() => { @@ -60,8 +61,8 @@ const EditUser = () => { title: 'User information updated', type: 'success', }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; diff --git a/frontend/src/component/admin/users/UserAdmin.styles.ts b/frontend/src/component/admin/users/UserAdmin.styles.ts index 89d94b271d..8d85cf5c4f 100644 --- a/frontend/src/component/admin/users/UserAdmin.styles.ts +++ b/frontend/src/component/admin/users/UserAdmin.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ userListBody: { diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx index bd0cb82fc5..d52b58d973 100644 --- a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx +++ b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import classnames from 'classnames'; -import { TextField, Typography, Avatar } from '@material-ui/core'; +import { Avatar, TextField, Typography } from '@material-ui/core'; import { trim } from '../../../../common/util'; import { modalStyles } from '../../util'; import Dialogue from '../../../../common/Dialogue/Dialogue'; @@ -12,10 +12,10 @@ import { Alert } from '@material-ui/lab'; import { IUser } from '../../../../../interfaces/user'; interface IChangePasswordProps { - showDialog: () => void; + showDialog: boolean; closeDialog: () => void; - changePassword: () => void; - user: IUser; + changePassword: (user: IUser, password: string) => Promise; + user: Partial; } const ChangePassword = ({ @@ -25,7 +25,7 @@ const ChangePassword = ({ user = {}, }: IChangePasswordProps) => { const [data, setData] = useState({}); - const [error, setError] = useState({}); + const [error, setError] = useState>({}); const [validPassword, setValidPassword] = useState(false); const commonStyles = useCommonStyles(); @@ -88,7 +88,7 @@ const ChangePassword = ({ )} > {error.general}} /> diff --git a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx index 03d1e1799f..c20481362c 100644 --- a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx +++ b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx @@ -9,12 +9,12 @@ import { useCommonStyles } from '../../../../../common.styles'; import { IUser } from '../../../../../interfaces/user'; interface IDeleteUserProps { - showDialog: () => void; + showDialog: boolean; closeDialog: () => void; user: IUser; userLoading: boolean; removeUser: () => void; - userApiErrors: Object; + userApiErrors: Record; } const DeleteUser = ({ @@ -33,13 +33,13 @@ const DeleteUser = ({ open={showDialog} title="Really delete user?" onClose={closeDialog} - onClick={() => removeUser(user)} + onClick={removeUser} primaryButtonText="Delete user" secondaryButtonText="Cancel" >
string; - openUpdateDialog: (user: IUser) => (e: SyntheticEvent) => void; openPwDialog: (user: IUser) => (e: SyntheticEvent) => void; openDelDialog: (user: IUser) => (e: SyntheticEvent) => void; locationSettings: ILocationSettings; @@ -30,7 +29,6 @@ const UserListItem = ({ renderRole, openDelDialog, openPwDialog, - openUpdateDialog, locationSettings, }: IUserListItemProps) => { const { hasAccess } = useContext(AccessContext); @@ -51,10 +49,7 @@ const UserListItem = ({ - {formatDateWithLocale( - user.createdAt, - locationSettings.locale - )} + {formatDateYMD(user.createdAt, locationSettings.locale)} diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index ca4defe92d..9d0d6208ba 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -24,6 +24,7 @@ import { IUser } from '../../../../interfaces/user'; import IRole from '../../../../interfaces/role'; import useToast from '../../../../hooks/useToast'; import { useLocationSettings } from '../../../../hooks/useLocationSettings'; +import { formatUnknownError } from '../../../../utils/format-unknown-error'; const UsersList = () => { const { users, roles, refetch, loading } = useUsers(); @@ -79,8 +80,8 @@ const UsersList = () => { }); refetch(); closeDelDialog(); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; @@ -172,7 +173,7 @@ const UsersList = () => { { const history = useHistory(); @@ -42,10 +43,9 @@ export const ApplicationEdit = () => { setShowDialog(!showDialog); }; - const formatDate = (v: string) => - formatDateWithLocale(v, locationSettings.locale); + const formatDate = (v: string) => formatDateYMD(v, locationSettings.locale); - const onDeleteApplication = async (evt: Event) => { + const onDeleteApplication = async (evt: React.SyntheticEvent) => { evt.preventDefault(); try { await deleteApplication(appName); @@ -55,8 +55,8 @@ export const ApplicationEdit = () => { type: 'success', }); history.push('/applications'); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/application/ApplicationList/ApplicationList.tsx b/frontend/src/component/application/ApplicationList/ApplicationList.tsx index db6c5416f3..972743e70c 100644 --- a/frontend/src/component/application/ApplicationList/ApplicationList.tsx +++ b/frontend/src/component/application/ApplicationList/ApplicationList.tsx @@ -1,9 +1,8 @@ import { useMemo, useState } from 'react'; import { CircularProgress } from '@material-ui/core'; import { Warning } from '@material-ui/icons'; - import { AppsLinkList, styles as commonStyles } from '../../common'; -import SearchField from '../../common/SearchField/SearchField'; +import { SearchField } from 'component/common/SearchField/SearchField'; import PageContent from '../../common/PageContent/PageContent'; import HeaderTitle from '../../common/HeaderTitle'; import useApplications from '../../../hooks/api/getters/useApplications/useApplications'; diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx index a3f98978be..5885f0785c 100644 --- a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx +++ b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx @@ -1,5 +1,5 @@ import { ChangeEvent, useState } from 'react'; -import { TextField, Grid } from '@material-ui/core'; +import { Grid, TextField } from '@material-ui/core'; import { useCommonStyles } from '../../../common.styles'; import icons from '../icon-names'; import GeneralSelect from '../../common/GeneralSelect/GeneralSelect'; @@ -7,6 +7,7 @@ import useApplicationsApi from '../../../hooks/api/actions/useApplicationsApi/us import useToast from '../../../hooks/useToast'; import { IApplication } from '../../../interfaces/application'; import useApplication from '../../../hooks/api/getters/useApplication/useApplication'; +import { formatUnknownError } from '../../../utils/format-unknown-error'; interface IApplicationUpdateProps { application: IApplication; @@ -35,8 +36,8 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => { title: 'Updated Successfully', text: `${field} successfully updated`, }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/application/ApplicationView/ApplicationView.tsx b/frontend/src/component/application/ApplicationView/ApplicationView.tsx index ee17b0875e..e720fe2471 100644 --- a/frontend/src/component/application/ApplicationView/ApplicationView.tsx +++ b/frontend/src/component/application/ApplicationView/ApplicationView.tsx @@ -4,16 +4,16 @@ import { Grid, List, ListItem, - ListItemText, ListItemAvatar, + ListItemText, Typography, } from '@material-ui/core'; import { - Report, Extension, - Timeline, FlagRounded, + Report, SvgIconComponent, + Timeline, } from '@material-ui/icons'; import { CREATE_FEATURE, @@ -23,13 +23,16 @@ import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyR import { getTogglePath } from '../../../utils/route-path-helpers'; import useApplication from '../../../hooks/api/getters/useApplication/useApplication'; import AccessContext from '../../../contexts/AccessContext'; -import { formatFullDateTimeWithLocale } from '../../common/util'; +import { formatDateYMDHMS } from '../../../utils/format-date'; +import { useLocationSettings } from '../../../hooks/useLocationSettings'; export const ApplicationView = () => { const { hasAccess } = useContext(AccessContext); const { name } = useParams<{ name: string }>(); const { application } = useApplication(name); + const { locationSettings } = useLocationSettings(); const { instances, strategies, seenToggles } = application; + const notFoundListItem = ({ createUrl, name, @@ -114,10 +117,9 @@ export const ApplicationView = () => { createUrl: `/projects/default/create-toggle?name=${name}`, name, permission: CREATE_FEATURE, - i, })} elseShow={foundListItem({ - viewUrl: getTogglePath(project, name, true), + viewUrl: getTogglePath(project, name), name, description, Icon: FlagRounded, @@ -195,8 +197,9 @@ export const ApplicationView = () => { {clientIp} last seen at{' '} - {formatFullDateTimeWithLocale( - lastSeen + {formatDateYMDHMS( + lastSeen, + locationSettings.locale )} diff --git a/frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx b/frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx index fcd183c050..3b759af889 100644 --- a/frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx +++ b/frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useRef, FC } from 'react'; +import React, { useEffect, useState, useRef, FC } from 'react'; import ConditionallyRender from '../ConditionallyRender'; interface IAnimateOnMountProps { @@ -7,7 +7,7 @@ interface IAnimateOnMountProps { start: string; leave: string; container?: string; - style?: Object; + style?: React.CSSProperties; } const AnimateOnMount: FC = ({ diff --git a/frontend/src/component/common/ApiError/ApiError.tsx b/frontend/src/component/common/ApiError/ApiError.tsx index e68d410cae..3d5ae22d00 100644 --- a/frontend/src/component/common/ApiError/ApiError.tsx +++ b/frontend/src/component/common/ApiError/ApiError.tsx @@ -1,5 +1,6 @@ import { Button } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; +import React from 'react'; interface IApiErrorProps { className?: string; diff --git a/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx b/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx index 88399c9c29..b80db69b3f 100644 --- a/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx +++ b/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx @@ -1,9 +1,10 @@ interface IConditionallyRenderProps { condition: boolean; - show: JSX.Element | RenderFunc; - elseShow?: JSX.Element | RenderFunc; + show: TargetElement; + elseShow?: TargetElement; } +type TargetElement = JSX.Element | JSX.Element[] | RenderFunc | null; type RenderFunc = () => JSX.Element; const ConditionallyRender = ({ @@ -23,8 +24,9 @@ const ConditionallyRender = ({ return result; }; - const isFunc = (param: JSX.Element | RenderFunc) => - typeof param === 'function'; + const isFunc = (param: TargetElement): boolean => { + return typeof param === 'function'; + }; if (condition) { if (isFunc(show)) { diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx index 80fdacc90f..4a9570bf70 100644 --- a/frontend/src/component/common/Dialogue/Dialogue.tsx +++ b/frontend/src/component/common/Dialogue/Dialogue.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { + Button, Dialog, - DialogTitle, DialogActions, DialogContent, - Button, + DialogTitle, } from '@material-ui/core'; import ConditionallyRender from '../ConditionallyRender/ConditionallyRender'; @@ -15,15 +15,15 @@ interface IDialogue { primaryButtonText?: string; secondaryButtonText?: string; open: boolean; - onClick: (e: any) => void; - onClose: () => void; + onClick: (e: React.SyntheticEvent) => void; + onClose?: (e: React.SyntheticEvent) => void; style?: object; title: string; fullWidth?: boolean; maxWidth?: 'lg' | 'sm' | 'xs' | 'md' | 'xl'; disabledPrimaryButton?: boolean; formId?: string; - permissionButton?: React.ReactNode; + permissionButton?: JSX.Element; } const Dialogue: React.FC = ({ @@ -69,7 +69,7 @@ const Dialogue: React.FC = ({ { label: string; diff --git a/frontend/src/component/common/NoItems/NoItems.tsx b/frontend/src/component/common/NoItems/NoItems.tsx index aac3c653a1..3b9bcbf656 100644 --- a/frontend/src/component/common/NoItems/NoItems.tsx +++ b/frontend/src/component/common/NoItems/NoItems.tsx @@ -1,5 +1,6 @@ import { ReactComponent as NoItemsIcon } from '../../../assets/icons/addfiles.svg'; import { useStyles } from './NoItems.styles'; +import React from 'react'; const NoItems: React.FC = ({ children }) => { const styles = useStyles(); diff --git a/frontend/src/component/common/PaginateUI/PaginateUI.tsx b/frontend/src/component/common/PaginateUI/PaginateUI.tsx index c2636c589e..6b834353a7 100644 --- a/frontend/src/component/common/PaginateUI/PaginateUI.tsx +++ b/frontend/src/component/common/PaginateUI/PaginateUI.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import ConditionallyRender from '../ConditionallyRender'; import classnames from 'classnames'; import { useStyles } from './PaginationUI.styles'; diff --git a/frontend/src/component/common/PasswordField/PasswordField.tsx b/frontend/src/component/common/PasswordField/PasswordField.tsx index 61fa587a21..ec7a636a40 100644 --- a/frontend/src/component/common/PasswordField/PasswordField.tsx +++ b/frontend/src/component/common/PasswordField/PasswordField.tsx @@ -1,6 +1,6 @@ import { IconButton, InputAdornment, TextField } from '@material-ui/core'; import { Visibility, VisibilityOff } from '@material-ui/icons'; -import { useState } from 'react'; +import React, { useState } from 'react'; const PasswordField = ({ ...rest }) => { const [showPassword, setShowPassword] = useState(false); diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx index 161a2ee05c..3e6dae15b6 100644 --- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx +++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx @@ -1,6 +1,6 @@ import { Button, Tooltip } from '@material-ui/core'; import { Lock } from '@material-ui/icons'; -import { useContext } from 'react'; +import React, { useContext } from 'react'; import AccessContext from '../../../contexts/AccessContext'; import ConditionallyRender from '../ConditionallyRender'; diff --git a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx index d987e05a94..708f5b5af5 100644 --- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx +++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx @@ -1,5 +1,5 @@ import { IconButton, Tooltip } from '@material-ui/core'; -import { useContext } from 'react'; +import React, { useContext } from 'react'; import AccessContext from '../../../contexts/AccessContext'; interface IPermissionIconButtonProps diff --git a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx b/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx index 0edb2cb94f..8e3f545293 100644 --- a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx +++ b/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx @@ -2,6 +2,7 @@ import { useMediaQuery } from '@material-ui/core'; import ConditionallyRender from '../ConditionallyRender'; import PermissionButton from '../PermissionButton/PermissionButton'; import PermissionIconButton from '../PermissionIconButton/PermissionIconButton'; +import React from 'react'; interface IResponsiveButtonProps { Icon: React.ElementType; diff --git a/frontend/src/component/common/SearchField/SearchField.jsx b/frontend/src/component/common/SearchField/SearchField.jsx deleted file mode 100644 index 87f7980e69..0000000000 --- a/frontend/src/component/common/SearchField/SearchField.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { useState } from 'react'; -import classnames from 'classnames'; -import PropTypes from 'prop-types'; -import { debounce } from 'debounce'; -import { InputBase } from '@material-ui/core'; -import SearchIcon from '@material-ui/icons/Search'; - -import { useStyles } from './styles'; - -function SearchField({ initialValue = '', updateValue, className = '' }) { - const styles = useStyles(); - - const [localValue, setLocalValue] = useState(initialValue); - const debounceUpdateValue = debounce(updateValue, 500); - - const handleChange = e => { - e.preventDefault(); - const v = e.target.value || ''; - setLocalValue(v); - debounceUpdateValue(v); - }; - - const handleKeyPress = e => { - if (e.key === 'Enter') { - updateValue(localValue); - } - }; - - const updateNow = () => { - updateValue(localValue); - }; - - return ( -
-
- - -
-
- ); -} - -SearchField.propTypes = { - value: PropTypes.string, - updateValue: PropTypes.func.isRequired, -}; - -export default SearchField; diff --git a/frontend/src/component/common/SearchField/SearchField.tsx b/frontend/src/component/common/SearchField/SearchField.tsx new file mode 100644 index 0000000000..333cc5a603 --- /dev/null +++ b/frontend/src/component/common/SearchField/SearchField.tsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import classnames from 'classnames'; +import { debounce } from 'debounce'; +import { InputBase, Chip } from '@material-ui/core'; +import SearchIcon from '@material-ui/icons/Search'; +import { useStyles } from './styles'; +import ConditionallyRender from 'component/common/ConditionallyRender'; + +interface ISearchFieldProps { + updateValue: React.Dispatch>; + initialValue?: string; + className?: string; + showValueChip?: boolean; +} + +export const SearchField = ({ + updateValue, + initialValue = '', + className = '', + showValueChip, +}: ISearchFieldProps) => { + const styles = useStyles(); + const [localValue, setLocalValue] = useState(initialValue); + const debounceUpdateValue = debounce(updateValue, 500); + + const handleChange = (event: React.ChangeEvent) => { + event.preventDefault(); + const value = event.target.value || ''; + setLocalValue(value); + debounceUpdateValue(value); + }; + + const handleKeyPress = (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + updateValue(localValue); + } + }; + + const updateNow = () => { + updateValue(localValue); + }; + + const onDelete = () => { + setLocalValue(''); + updateValue(''); + }; + + return ( +
+
+ + +
+ + } + /> +
+ ); +}; diff --git a/frontend/src/component/common/SearchField/styles.js b/frontend/src/component/common/SearchField/styles.js index 09a4e41d1f..ed7c9e480a 100644 --- a/frontend/src/component/common/SearchField/styles.js +++ b/frontend/src/component/common/SearchField/styles.js @@ -1,6 +1,12 @@ import { makeStyles } from '@material-ui/styles'; export const useStyles = makeStyles(theme => ({ + container: { + display: 'flex', + alignItems: 'center', + flexWrap: 'wrap', + gap: '1rem', + }, search: { display: 'flex', alignItems: 'center', @@ -8,9 +14,6 @@ export const useStyles = makeStyles(theme => ({ borderRadius: '25px', padding: '0.25rem 0.5rem', maxWidth: '450px', - [theme.breakpoints.down('sm')]: { - margin: '0 auto', - }, [theme.breakpoints.down('xs')]: { width: '100%', }, diff --git a/frontend/src/component/common/Splash/Splash.tsx b/frontend/src/component/common/Splash/Splash.tsx index 18990afe60..455270845f 100644 --- a/frontend/src/component/common/Splash/Splash.tsx +++ b/frontend/src/component/common/Splash/Splash.tsx @@ -1,12 +1,11 @@ -import { Fragment } from 'react'; +import React, { Fragment, useState } from 'react'; import { Button, IconButton } from '@material-ui/core'; import { useStyles } from './Splash.styles'; import { + CloseOutlined, FiberManualRecord, FiberManualRecordOutlined, - CloseOutlined, } from '@material-ui/icons'; -import { useState } from 'react'; import ConditionallyRender from '../ConditionallyRender'; import { CLOSE_SPLASH } from '../../../testIds'; diff --git a/frontend/src/component/common/TagSelect/TagSelect.tsx b/frontend/src/component/common/TagSelect/TagSelect.tsx index 469e39f15b..59a572f838 100644 --- a/frontend/src/component/common/TagSelect/TagSelect.tsx +++ b/frontend/src/component/common/TagSelect/TagSelect.tsx @@ -7,7 +7,7 @@ interface ITagSelect extends React.SelectHTMLAttributes { onChange: (val: any) => void; } -const TagSelect = ({ value, types, onChange, ...rest }: ITagSelect) => { +const TagSelect = ({ value, onChange, ...rest }: ITagSelect) => { const { tagTypes } = useTagTypes(); const options = tagTypes.map(tagType => ({ diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx index 0a1d83160e..397c7252d0 100644 --- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx +++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx @@ -3,12 +3,12 @@ import classnames from 'classnames'; import { useContext } from 'react'; import { IconButton } from '@material-ui/core'; import CheckMarkBadge from '../../CheckmarkBadge/CheckMarkBadge'; -import UIContext, { IToastData } from '../../../../contexts/UIContext'; +import UIContext from '../../../../contexts/UIContext'; import ConditionallyRender from '../../ConditionallyRender'; import Close from '@material-ui/icons/Close'; +import { IToast } from '../../../../interfaces/toast'; -const Toast = ({ title, text, type, confetti }: IToastData) => { - // @ts-expect-error +const Toast = ({ title, text, type, confetti }: IToast) => { const { setToast } = useContext(UIContext); const styles = useStyles(); @@ -51,7 +51,7 @@ const Toast = ({ title, text, type, confetti }: IToastData) => { }; const hide = () => { - setToast((prev: IToastData) => ({ ...prev, show: false })); + setToast((prev: IToast) => ({ ...prev, show: false })); }; return ( diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx index 924c9dd4a1..5f9d21cbbf 100644 --- a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx +++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx @@ -1,19 +1,19 @@ import { Portal } from '@material-ui/core'; import { useContext, useEffect } from 'react'; import { useCommonStyles } from '../../../common.styles'; -import UIContext, { IToastData } from '../../../contexts/UIContext'; +import UIContext from '../../../contexts/UIContext'; import { useStyles } from './ToastRenderer.styles'; import AnimateOnMount from '../AnimateOnMount/AnimateOnMount'; import Toast from './Toast/Toast'; +import { IToast } from '../../../interfaces/toast'; const ToastRenderer = () => { - // @ts-expect-error const { toastData, setToast } = useContext(UIContext); const commonStyles = useCommonStyles(); const styles = useStyles(); const hide = () => { - setToast((prev: IToastData) => ({ ...prev, show: false })); + setToast((prev: IToast) => ({ ...prev, show: false })); }; useEffect(() => { @@ -31,7 +31,7 @@ const ToastRenderer = () => { return ( { - expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'UTC')).toEqual( - '2017-02-23 14:56:49' - ); - expect( - formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/Paris') - ).toEqual('2017-02-23 15:56:49'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/Oslo') - ).toEqual('2017-02-23 15:56:49'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'nb-NO', 'Europe/London') - ).toEqual('2017-02-23 14:56:49'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/Paris') - ).toEqual('02/23/2017, 3:56:49 PM'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/Oslo') - ).toEqual('02/23/2017, 3:56:49 PM'); - expect( - formatFullDateTimeWithLocale(1487861809466, 'en-GB', 'Europe/London') - ).toEqual('02/23/2017, 2:56:49 PM'); - - expect(formatFullDateTimeWithLocale(1487861809466, 'nb-NO')).toEqual( - expect.stringMatching(/(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/) - ); - expect(formatFullDateTimeWithLocale(1487861809466, 'en-GB')).toEqual( - expect.stringContaining('02/23/2017') - ); - expect(formatFullDateTimeWithLocale(1487861809466, 'en-US')).toEqual( - expect.stringContaining('02/23/2017') - ); -}); diff --git a/frontend/src/component/common/util.js b/frontend/src/component/common/util.js index 28ee9b27ef..a538005dd6 100644 --- a/frontend/src/component/common/util.js +++ b/frontend/src/component/common/util.js @@ -1,26 +1,6 @@ import { weightTypes } from '../feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/enums'; import differenceInDays from 'date-fns/differenceInDays'; -const dateTimeOptions = { - day: '2-digit', - month: '2-digit', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', -}; - -const dateOptions = { - day: '2-digit', - month: '2-digit', - year: 'numeric', -}; - -const timeOptions = { - hour: '2-digit', - minute: '2-digit', -}; - export const filterByFlags = flags => r => { if (r.flag && !flags[r.flag]) { return false; @@ -32,27 +12,6 @@ export const scrollToTop = () => { window.scrollTo(0, 0); }; -export const formatFullDateTimeWithLocale = (v, locale, tz) => { - if (tz) { - dateTimeOptions.timeZone = tz; - } - return new Date(v).toLocaleString(locale, dateTimeOptions); -}; - -export const formatDateWithLocale = (v, locale, tz) => { - if (tz) { - dateTimeOptions.timeZone = tz; - } - return new Date(v).toLocaleString(locale, dateOptions); -}; - -export const formatTimeWithLocale = (v, locale, tz) => { - if (tz) { - dateTimeOptions.timeZone = tz; - } - return new Date(v).toLocaleString(locale, timeOptions); -}; - export const trim = value => { if (value && value.trim) { return value.trim(); diff --git a/frontend/src/component/context/ContextList/ContextList.jsx b/frontend/src/component/context/ContextList/ContextList.jsx index c9379b0110..f751349da3 100644 --- a/frontend/src/component/context/ContextList/ContextList.jsx +++ b/frontend/src/component/context/ContextList/ContextList.jsx @@ -7,6 +7,7 @@ import { UPDATE_CONTEXT_FIELD, } from '../../providers/AccessProvider/permissions'; import { + Button, IconButton, List, ListItem, @@ -14,7 +15,6 @@ import { ListItemText, Tooltip, useMediaQuery, - Button, } from '@material-ui/core'; import { Add, Album, Delete, Edit } from '@material-ui/icons'; import { useContext, useState } from 'react'; @@ -25,6 +25,7 @@ import AccessContext from '../../../contexts/AccessContext'; import useUnleashContext from '../../../hooks/api/getters/useUnleashContext/useUnleashContext'; import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi'; import useToast from '../../../hooks/useToast'; +import { formatUnknownError } from '../../../utils/format-unknown-error'; const ContextList = () => { const { hasAccess } = useContext(AccessContext); @@ -46,8 +47,8 @@ const ContextList = () => { title: 'Successfully deleted context', text: 'Your context is now deleted', }); - } catch (e) { - setToastApiError(e.toString()); + } catch (error) { + setToastApiError(formatUnknownError(error)); } setName(undefined); setShowDelDialogue(false); diff --git a/frontend/src/component/context/CreateContext/CreateContext.tsx b/frontend/src/component/context/CreateContext/CreateContext.tsx index e1faa2e9f5..14c69815f7 100644 --- a/frontend/src/component/context/CreateContext/CreateContext.tsx +++ b/frontend/src/component/context/CreateContext/CreateContext.tsx @@ -8,6 +8,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton'; import { CREATE_CONTEXT_FIELD } from '../../providers/AccessProvider/permissions'; import useContextsApi from '../../../hooks/api/actions/useContextsApi/useContextsApi'; import useUnleashContext from '../../../hooks/api/getters/useUnleashContext/useUnleashContext'; +import { formatUnknownError } from '../../../utils/format-unknown-error'; const CreateContext = () => { const { setToastData, setToastApiError } = useToast(); @@ -46,8 +47,8 @@ const CreateContext = () => { confetti: true, type: 'success', }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; @@ -69,7 +70,7 @@ const CreateContext = () => { { useEffect(() => { @@ -67,8 +68,8 @@ const EditContext = () => { title: 'Context information updated', type: 'success', }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; @@ -81,7 +82,7 @@ const EditContext = () => { { const { setToastApiError, setToastData } = useToast(); @@ -49,8 +50,8 @@ const CreateEnvironment = () => { confetti: true, }); history.push('/environments'); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; diff --git a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx index ecfc11ec5d..88efef7748 100644 --- a/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx +++ b/frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx @@ -9,6 +9,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton'; import { ADMIN } from '../../providers/AccessProvider/permissions'; import EnvironmentForm from '../EnvironmentForm/EnvironmentForm'; import useEnvironmentForm from '../hooks/useEnvironmentForm'; +import { formatUnknownError } from '../../../utils/format-unknown-error'; const EditEnvironment = () => { const { uiConfig } = useUiConfig(); @@ -49,8 +50,8 @@ const EditEnvironment = () => { type: 'success', title: 'Successfully updated environment.', }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; @@ -61,7 +62,7 @@ const EditEnvironment = () => { return ( ) => void; diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx index 61196f50c4..0e1c8bd119 100644 --- a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx +++ b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx @@ -11,7 +11,7 @@ interface IEnviromentDeleteConfirmProps { open: boolean; setSelectedEnv: React.Dispatch>; setDeldialogue: React.Dispatch>; - handleDeleteEnvironment: (name: string) => Promise; + handleDeleteEnvironment: () => Promise; confirmName: string; setConfirmName: React.Dispatch>; } diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx index 691946e0de..44136ed7ee 100644 --- a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx +++ b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx @@ -19,6 +19,9 @@ import EnvironmentListItem from './EnvironmentListItem/EnvironmentListItem'; import { mutate } from 'swr'; import EnvironmentToggleConfirm from './EnvironmentToggleConfirm/EnvironmentToggleConfirm'; import useProjectRolePermissions from '../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions'; +import { ADMIN } from 'component/providers/AccessProvider/permissions'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { formatUnknownError } from '../../../utils/format-unknown-error'; const EnvironmentList = () => { const defaultEnv = { @@ -30,6 +33,7 @@ const EnvironmentList = () => { protected: false, }; const { environments, refetch } = useEnvironments(); + const { uiConfig } = useUiConfig(); const { refetch: refetchProjectRolePermissions } = useProjectRolePermissions(); @@ -72,16 +76,16 @@ const EnvironmentList = () => { try { await sortOrderAPICall(sortOrder); refetch(); - } catch (e) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; const sortOrderAPICall = async (sortOrder: ISortOrderPayload) => { try { await changeSortOrder(sortOrder); - } catch (e) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; @@ -94,8 +98,8 @@ const EnvironmentList = () => { title: 'Project environment deleted', text: 'You have successfully deleted the project environment.', }); - } catch (e) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } finally { setDeldialogue(false); setSelectedEnv(defaultEnv); @@ -121,8 +125,8 @@ const EnvironmentList = () => { title: 'Project environment enabled', text: 'Your environment is enabled', }); - } catch (e) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } finally { refetch(); } @@ -137,8 +141,8 @@ const EnvironmentList = () => { title: 'Project environment disabled', text: 'Your environment is disabled.', }); - } catch (e) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } finally { refetch(); } @@ -161,7 +165,6 @@ const EnvironmentList = () => { const navigateToCreateEnvironment = () => { history.push('/environments/create'); }; - return ( { maxWidth="700px" tooltip="Add environment" Icon={Add} + permission={ADMIN} + disabled={!Boolean(uiConfig.flags.EEA)} > Add Environment diff --git a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx index 2fe8477254..7872f0bc90 100644 --- a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx +++ b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx @@ -10,6 +10,7 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton'; import { CF_CREATE_BTN_ID } from '../../../testIds'; import { useContext } from 'react'; import UIContext from '../../../contexts/UIContext'; +import { formatUnknownError } from '../../../utils/format-unknown-error'; const CreateFeature = () => { const { setToastData, setToastApiError } = useToast(); @@ -53,8 +54,8 @@ const CreateFeature = () => { type: 'success', }); setShowFeedback(true); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } } }; diff --git a/frontend/src/component/feature/EditFeature/EditFeature.tsx b/frontend/src/component/feature/EditFeature/EditFeature.tsx index 239dac8030..d23fb042d2 100644 --- a/frontend/src/component/feature/EditFeature/EditFeature.tsx +++ b/frontend/src/component/feature/EditFeature/EditFeature.tsx @@ -10,6 +10,7 @@ import { IFeatureViewParams } from '../../../interfaces/params'; import * as jsonpatch from 'fast-json-patch'; import PermissionButton from '../../common/PermissionButton/PermissionButton'; import { UPDATE_FEATURE } from '../../providers/AccessProvider/permissions'; +import { formatUnknownError } from '../../../utils/format-unknown-error'; const EditFeature = () => { const { setToastData, setToastApiError } = useToast(); @@ -57,8 +58,8 @@ const EditFeature = () => { title: 'Toggle updated successfully', type: 'success', }); - } catch (e: any) { - setToastApiError(e.toString()); + } catch (error: unknown) { + setToastApiError(formatUnknownError(error)); } }; diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx index 7c5ea29409..fad1e7b31d 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx @@ -5,20 +5,15 @@ import { Link } from 'react-router-dom'; import { Button, IconButton, List, ListItem, Tooltip } from '@material-ui/core'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import { Add } from '@material-ui/icons'; - import FeatureToggleListItem from './FeatureToggleListItem'; -import SearchField from '../../common/SearchField/SearchField'; +import { SearchField } from '../../common/SearchField/SearchField'; import FeatureToggleListActions from './FeatureToggleListActions'; import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender'; import PageContent from '../../common/PageContent/PageContent'; import HeaderTitle from '../../common/HeaderTitle'; - import loadingFeatures from './loadingFeatures'; - import { CREATE_FEATURE } from '../../providers/AccessProvider/permissions'; - import AccessContext from '../../../contexts/AccessContext'; - import { useStyles } from './styles'; import ListPlaceholder from '../../common/ListPlaceholder/ListPlaceholder'; import { getCreateTogglePath } from '../../../utils/route-path-helpers'; @@ -101,7 +96,13 @@ const FeatureToggleList = ({ ); }; - const headerTitle = archive ? 'Archived Features' : 'Features'; + const searchResultsHeader = filter.query + ? `(${features.length} matches)` + : ''; + + const headerTitle = archive + ? `Archived Features ${searchResultsHeader}` + : `Features ${searchResultsHeader}`; return (
@@ -109,6 +110,7 @@ const FeatureToggleList = ({ -
+
@@ -20,7 +22,7 @@ exports[`renders correctly with one feature 1`] = ` />
@@ -31,7 +33,7 @@ exports[`renders correctly with one feature 1`] = ` onBlur={[Function]} onChange={[Function]} onFocus={[Function]} - placeholder="Search…" + placeholder="Search..." type="text" value="" /> @@ -55,29 +57,29 @@ exports[`renders correctly with one feature 1`] = ` } >

- Features + Features