Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-18 01:18:23 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into fix/context-form-validation

Browse Source
This commit is contained in:
Youssef Khedher 2022-02-25 13:52:00 +01:00 committed by GitHub
commit c0455962ec
136 changed files with 746 additions and 706 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/.github/workflows/e2e.auth.yml vendored
View File

@ -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 }}
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

8
frontend/.github/workflows/e2e.feature.yml vendored
View File

@ -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 }}
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

4
frontend/cypress.json
View File

@ -1,4 +1,6 @@
{
"projectId": "tc2qff",
"defaultCommandTimeout": 12000
"defaultCommandTimeout": 12000,
"screenshotOnRunFailure": false,
"video": false
}

11
frontend/cypress/integration/auth/auth.spec.js → frontend/cypress/integration/auth/auth.spec.ts
View File

@ -1,15 +1,4 @@
/* eslint-disable jest/no-conditional-expect */
/// <reference types="cypress" />
// 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';

153
frontend/cypress/integration/feature-toggle/feature.spec.js → frontend/cypress/integration/feature/feature.spec.ts
View File

@ -1,82 +1,48 @@
/* eslint-disable jest/no-conditional-expect */
/// <reference types="cypress" />
// 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');

0
frontend/cypress/plugins/index.js → frontend/cypress/plugins/index.ts
View File

0
frontend/cypress/support/commands.js → frontend/cypress/support/commands.ts
View File

0
frontend/cypress/support/index.js → frontend/cypress/support/index.ts
View File

12
frontend/package.json
View File

@ -42,6 +42,7 @@
"@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",
@ -49,7 +50,7 @@
"@types/deep-diff": "1.0.1",
"@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"
]
}
}

4
frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx
View File

@ -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<HTMLInputElement>) => void;
error: Record<string, string>;
}

4
frontend/src/component/addons/AddonList/AddonList.tsx
View File

@ -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',

5
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
View File

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

4
frontend/src/component/admin/api-token/ApiTokenList/ApiTokenList.tsx
View File

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

5
frontend/src/component/admin/api-token/CreateApiToken/CreateApiToken.tsx
View File

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

4
frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
View File

@ -68,8 +68,8 @@ export const GoogleAuth = () => {
title: 'Settings stored',
type: 'success',
});
} catch (err) {
setToastApiError(formatUnknownError(err));
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};

4
frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
View File

@ -79,8 +79,8 @@ export const OidcAuth = () => {
title: 'Settings stored',
type: 'success',
});
} catch (err) {
setToastApiError(formatUnknownError(err));
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};

4
frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
View File

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

4
frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
View File

@ -75,8 +75,8 @@ export const SamlAuth = () => {
title: 'Settings stored',
type: 'success',
});
} catch (err) {
setToastApiError(formatUnknownError(err));
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};

4
frontend/src/component/admin/invoice/InvoiceList.tsx
View File

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

5
frontend/src/component/admin/project-roles/CreateProjectRole/CreateProjectRole.tsx
View File

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

5
frontend/src/component/admin/project-roles/EditProjectRole/EditProjectRole.tsx
View File

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

5
frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx
View File

@ -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<IProjectRoleForm> = ({

2
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts
View File

@ -1,4 +1,4 @@
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
deleteParagraph: {

5
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
View File

@ -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('');

5
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
View File

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

2
frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoles.styles.ts
View File

@ -1,4 +1,4 @@
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
rolesListBody: {

2
frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts
View File

@ -1,4 +1,4 @@
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles({
iconContainer: {

5
frontend/src/component/admin/users/CreateUser/CreateUser.tsx
View File

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

5
frontend/src/component/admin/users/EditUser/EditUser.tsx
View File

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

2
frontend/src/component/admin/users/UserAdmin.styles.ts
View File

@ -1,4 +1,4 @@
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
userListBody: {

12
frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
View File

@ -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<Response>;
user: Partial<IUser>;
}
const ChangePassword = ({
@ -25,7 +25,7 @@ const ChangePassword = ({
user = {},
}: IChangePasswordProps) => {
const [data, setData] = useState({});
const [error, setError] = useState({});
const [error, setError] = useState<Record<string, string>>({});
const [validPassword, setValidPassword] = useState(false);
const commonStyles = useCommonStyles();
@ -88,7 +88,7 @@ const ChangePassword = ({
)}
>
<ConditionallyRender
condition={error.general}
condition={Boolean(error.general)}
show={<Alert severity="error">{error.general}</Alert>}
/>
<Typography variant="subtitle1">

8
frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
View File

@ -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<string, string>;
}
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"
>
<div ref={ref}>
<ConditionallyRender
condition={userApiErrors[REMOVE_USER_ERROR]}
condition={Boolean(userApiErrors[REMOVE_USER_ERROR])}
show={
<Alert
data-loading

15
frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
View File

@ -1,25 +1,24 @@
import {
TableRow,
TableCell,
Avatar,
IconButton,
TableCell,
TableRow,
Typography,
} from '@material-ui/core';
import { Edit, Lock, Delete } from '@material-ui/icons';
import { Delete, Edit, Lock } from '@material-ui/icons';
import { SyntheticEvent, useContext } from 'react';
import { ADMIN } from '../../../../providers/AccessProvider/permissions';
import ConditionallyRender from '../../../../common/ConditionallyRender';
import { formatDateWithLocale } from '../../../../common/util';
import AccessContext from '../../../../../contexts/AccessContext';
import { IUser } from '../../../../../interfaces/user';
import { useStyles } from './UserListItem.styles';
import { useHistory } from 'react-router-dom';
import { ILocationSettings } from '../../../../../hooks/useLocationSettings';
import { formatDateYMD } from '../../../../../utils/format-date';
interface IUserListItemProps {
user: IUser;
renderRole: (roleId: number) => 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 = ({
</TableCell>
<TableCell>
<span data-loading>
{formatDateWithLocale(
user.createdAt,
locationSettings.locale
)}
{formatDateYMD(user.createdAt, locationSettings.locale)}
</span>
</TableCell>
<TableCell className={styles.leftTableCell}>

7
frontend/src/component/admin/users/UsersList/UsersList.tsx
View File

@ -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 = () => {
<DeleteUser
showDialog={delDialog}
closeDialog={closeDelDialog}
user={delUser}
user={delUser!}
removeUser={onDeleteUser}
userLoading={userLoading}
userApiErrors={userApiErrors}

16
frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
View File

@ -1,16 +1,15 @@
/* eslint react/no-multi-comp:off */
import { useContext, useState } from 'react';
import React, { useContext, useState } from 'react';
import {
Avatar,
Link,
Icon,
IconButton,
LinearProgress,
Link,
Typography,
} from '@material-ui/core';
import { Link as LinkIcon } from '@material-ui/icons';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
import { formatDateWithLocale } from '../../common/util';
import { UPDATE_APPLICATION } from '../../providers/AccessProvider/permissions';
import { ApplicationView } from '../ApplicationView/ApplicationView';
import { ApplicationUpdate } from '../ApplicationUpdate/ApplicationUpdate';
@ -25,6 +24,8 @@ import { useHistory, useParams } from 'react-router-dom';
import { useLocationSettings } from '../../../hooks/useLocationSettings';
import useToast from '../../../hooks/useToast';
import PermissionButton from '../../common/PermissionButton/PermissionButton';
import { formatDateYMD } from '../../../utils/format-date';
import { formatUnknownError } from '../../../utils/format-unknown-error';
export const ApplicationEdit = () => {
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));
}
};

7
frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
View File

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

19
frontend/src/component/application/ApplicationView/ApplicationView.tsx
View File

@ -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 = () => {
<span>
{clientIp} last seen at{' '}
<small>
{formatFullDateTimeWithLocale(
lastSeen
{formatDateYMDHMS(
lastSeen,
locationSettings.locale
)}
</small>
</span>

4
frontend/src/component/common/AnimateOnMount/AnimateOnMount.tsx
View File

@ -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<IAnimateOnMountProps> = ({

1
frontend/src/component/common/ApiError/ApiError.tsx
View File

@ -1,5 +1,6 @@
import { Button } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import React from 'react';
interface IApiErrorProps {
className?: string;

10
frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx
View File

@ -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)) {

12
frontend/src/component/common/Dialogue/Dialogue.tsx
View File

@ -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<IDialogue> = ({
@ -69,7 +69,7 @@ const Dialogue: React.FC<IDialogue> = ({
<DialogActions>
<ConditionallyRender
condition={Boolean(permissionButton)}
show={permissionButton}
show={permissionButton!}
elseShow={
<ConditionallyRender
condition={Boolean(onClick)}

2
frontend/src/component/common/EnvironmentSplash/EnvironmentSplashPage/EnvironmentSplashPage.tsx
View File

@ -1,3 +1,5 @@
import React from 'react';
interface EnvironmentSplashPageProps {
title: React.ReactNode;
topDescription: React.ReactNode;

1
frontend/src/component/common/FormTemplate/FormTemplate.tsx
View File

@ -7,6 +7,7 @@ import ConditionallyRender from '../ConditionallyRender';
import Loader from '../Loader/Loader';
import copy from 'copy-to-clipboard';
import useToast from '../../../hooks/useToast';
import React from 'react';
interface ICreateProps {
title: string;

2
frontend/src/component/common/Gradient/Gradient.tsx
View File

@ -1,3 +1,5 @@
import React from 'react';
interface IGradientProps {
from: string;
to: string;

3
frontend/src/component/common/Input/Input.tsx
View File

@ -1,6 +1,7 @@
import { TextField } from '@material-ui/core';
import { INPUT_ERROR_TEXT } from '../../../testIds';
import { useStyles } from './Input.styles.ts';
import { useStyles } from './Input.styles';
import React from 'react';
interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label: string;

1
frontend/src/component/common/NoItems/NoItems.tsx
View File

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

2
frontend/src/component/common/PaginateUI/PaginateUI.tsx
View File

@ -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';

2
frontend/src/component/common/PasswordField/PasswordField.tsx
View File

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

2
frontend/src/component/common/PermissionButton/PermissionButton.tsx
View File

@ -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';

2
frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
View File

@ -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

1
frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
View File

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

5
frontend/src/component/common/Splash/Splash.tsx
View File

@ -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';

2
frontend/src/component/common/TagSelect/TagSelect.tsx
View File

@ -7,7 +7,7 @@ interface ITagSelect extends React.SelectHTMLAttributes<HTMLSelectElement> {
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 => ({

8
frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
View File

@ -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 (

8
frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
View File

@ -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 (
<Portal>
<AnimateOnMount
mounted={toastData?.show}
mounted={Boolean(toastData?.show)}
start={commonStyles.fadeInBottomStartWithoutFixed}
enter={commonStyles.fadeInBottomEnter}
leave={commonStyles.fadeInBottomLeave}

35
frontend/src/component/common/__tests__/util-test.jsx
View File

@ -1,35 +0,0 @@
import { formatFullDateTimeWithLocale } from '../util';
test.skip('formats dates correctly', () => {
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')
);
});

41
frontend/src/component/common/util.js
View File

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

7
frontend/src/component/context/ContextList/ContextList.jsx
View File

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

2
frontend/src/component/context/EditContext/EditContext.tsx
View File

@ -55,7 +55,7 @@ export const EditContext = () => {
const handleSubmit = async (e: Event) => {
e.preventDefault();
const payload = getContextPayload();
try {
await updateContext(payload);
refetch();

5
frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
View File

@ -14,6 +14,7 @@ import HeaderTitle from '../../common/HeaderTitle';
import PermissionButton from '../../common/PermissionButton/PermissionButton';
import { ADMIN } from '../../providers/AccessProvider/permissions';
import useProjectRolePermissions from '../../../hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
import { formatUnknownError } from '../../../utils/format-unknown-error';
const CreateEnvironment = () => {
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));
}
}
};

7
frontend/src/component/environments/EditEnvironment/EditEnvironment.tsx
View File

@ -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 (
<FormTemplate
title="Edit environment"
description="Environments allow you to manage your
description="Environments allow you to manage your
product lifecycle from local development
through production. Your projects and
feature toggles are accessible in all your

3
frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.tsx
View File

@ -1,10 +1,11 @@
import {
FormControl,
FormControlLabel,
RadioGroup,
Radio,
RadioGroup,
} from '@material-ui/core';
import { useStyles } from './EnvironmentTypeSelector.styles';
import React from 'react';
interface IEnvironmentTypeSelectorProps {
onChange: (event: React.FormEvent<HTMLInputElement>) => void;

2
frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
View File

@ -11,7 +11,7 @@ interface IEnviromentDeleteConfirmProps {
open: boolean;
setSelectedEnv: React.Dispatch<React.SetStateAction<IEnvironment>>;
setDeldialogue: React.Dispatch<React.SetStateAction<boolean>>;
handleDeleteEnvironment: (name: string) => Promise<void>;
handleDeleteEnvironment: () => Promise<void>;
confirmName: string;
setConfirmName: React.Dispatch<React.SetStateAction<string>>;
}

21
frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
View File

@ -21,6 +21,7 @@ import EnvironmentToggleConfirm from './EnvironmentToggleConfirm/EnvironmentTogg
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 = {
@ -75,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));
}
};
@ -97,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);
@ -124,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();
}
@ -140,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();
}

5
frontend/src/component/feature/CreateFeature/CreateFeature.tsx
View File

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

5
frontend/src/component/feature/EditFeature/EditFeature.tsx
View File

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

9
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
View File

@ -1,9 +1,6 @@
import { Tooltip } from '@material-ui/core';
import {
formatDateWithLocale,
formatFullDateTimeWithLocale,
} from '../../../common/util';
import { useLocationSettings } from '../../../../hooks/useLocationSettings';
import { formatDateYMD, formatDateYMDHMS } from '../../../../utils/format-date';
interface CreatedAtProps {
time: Date;
@ -14,12 +11,12 @@ const CreatedAt = ({ time }: CreatedAtProps) => {
return (
<Tooltip
title={`Created at ${formatFullDateTimeWithLocale(
title={`Created at ${formatDateYMDHMS(
time,
locationSettings.locale
)}`}
>
<span>{formatDateWithLocale(time, locationSettings.locale)}</span>
<span>{formatDateYMD(time, locationSettings.locale)}</span>
</Tooltip>
);
};

10
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
View File

@ -1,10 +1,12 @@
import { useRef, useState } from 'react';
import { TableCell, TableRow } from '@material-ui/core';
import { useHistory } from 'react-router';
import { useStyles } from '../FeatureToggleListNew.styles';
import useToggleFeatureByEnv from '../../../../hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
import { IEnvironments } from '../../../../interfaces/featureToggle';
import {
IEnvironments,
IFeatureEnvironment,
} from '../../../../interfaces/featureToggle';
import useToast from '../../../../hooks/useToast';
import { getTogglePath } from '../../../../utils/route-path-helpers';
import { SyntheticEvent } from 'react-router/node_modules/@types/react';
@ -25,8 +27,8 @@ interface IFeatureToggleListNewItemProps {
type: string;
environments: IFeatureEnvironment[];
projectId: string;
lastSeenAt?: Date;
createdAt: Date;
lastSeenAt?: string;
createdAt: string;
}
const FeatureToggleListNewItem = ({

9
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
View File

@ -1,9 +1,9 @@
import { ILocationSettings } from '../../../../../hooks/useLocationSettings';
import 'chartjs-adapter-date-fns';
import { ChartOptions, defaults } from 'chart.js';
import { formatTimeWithLocale } from '../../../../common/util';
import { IFeatureMetricsRaw } from '../../../../../interfaces/featureToggle';
import theme from '../../../../../themes/main-theme';
import { formatDateHM } from '../../../../../utils/format-date';
export const createChartOptions = (
metrics: IFeatureMetricsRaw[],
@ -30,7 +30,7 @@ export const createChartOptions = (
usePointStyle: true,
callbacks: {
title: items =>
formatTimeWithLocale(
formatDateHM(
items[0].parsed.x,
locationSettings.locale
),
@ -73,10 +73,7 @@ export const createChartOptions = (
grid: { display: false },
ticks: {
callback: (_, i, data) =>
formatTimeWithLocale(
data[i].value,
locationSettings.locale
),
formatDateHM(data[i].value, locationSettings.locale),
},
},
},

4
frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
View File

@ -9,8 +9,8 @@ import {
useTheme,
} from '@material-ui/core';
import { useLocationSettings } from '../../../../../hooks/useLocationSettings';
import { formatFullDateTimeWithLocale } from '../../../../common/util';
import { useMemo } from 'react';
import { formatDateYMDHMS } from 'utils/format-date';
export const FEATURE_METRICS_TABLE_ID = 'feature-metrics-table-id';
@ -48,7 +48,7 @@ export const FeatureMetricsTable = ({ metrics }: IFeatureMetricsTableProps) => {
{sortedMetrics.map(metric => (
<TableRow key={metric.timestamp}>
<TableCell>
{formatFullDateTimeWithLocale(
{formatDateYMDHMS(
metric.timestamp,
locationSettings.locale
)}

11
frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
View File

@ -1,6 +1,6 @@
import { DialogContentText } from '@material-ui/core';
import { useParams } from 'react-router';
import { useState } from 'react';
import React, { useState } from 'react';
import { IFeatureViewParams } from '../../../../../interfaces/params';
import Dialogue from '../../../../common/Dialogue';
import Input from '../../../../common/Input/Input';
@ -11,6 +11,7 @@ import TagSelect from '../../../../common/TagSelect/TagSelect';
import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
import useTags from '../../../../../hooks/api/getters/useTags/useTags';
import useToast from '../../../../../hooks/useToast';
import { formatUnknownError } from '../../../../../utils/format-unknown-error';
interface IAddTagDialogProps {
open: boolean;
@ -20,6 +21,7 @@ interface IAddTagDialogProps {
interface IDefaultTag {
type: string;
value: string;
[index: string]: string;
}
@ -62,9 +64,10 @@ const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
text: 'We successfully added a tag to your toggle',
confetti: true,
});
} catch (e) {
setToastApiError(e.message);
setErrors({ tagError: e.message });
} catch (error: unknown) {
const message = formatUnknownError(error);
setToastApiError(message);
setErrors({ tagError: message });
}
};

8
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
View File

@ -8,6 +8,8 @@ import { IFeatureViewParams } from '../../../../../../interfaces/params';
import PermissionSwitch from '../../../../../common/PermissionSwitch/PermissionSwitch';
import StringTruncator from '../../../../../common/StringTruncator/StringTruncator';
import { UPDATE_FEATURE_ENVIRONMENT } from '../../../../../providers/AccessProvider/permissions';
import React from 'react';
import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
interface IFeatureOverviewEnvSwitchProps {
env: IFeatureEnvironment;
@ -40,7 +42,7 @@ const FeatureOverviewEnvSwitch = ({
if (callback) {
callback();
}
} catch (e: any) {
} catch (e) {
if (e.message === ENVIRONMENT_STRATEGY_ERROR) {
showInfoBox(true);
} else {
@ -61,8 +63,8 @@ const FeatureOverviewEnvSwitch = ({
if (callback) {
callback();
}
} catch (e: any) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
View File

@ -1,5 +1,5 @@
import { Settings } from '@material-ui/icons';
import { useTheme } from '@material-ui/styles';
import { useTheme } from '@material-ui/core/styles';
import { Link, useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../../../../../../interfaces/params';
import { IFeatureStrategy } from '../../../../../../../../interfaces/strategy';

9
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
View File

@ -1,6 +1,6 @@
import { useState, useContext } from 'react';
import React, { useContext, useState } from 'react';
import { Chip } from '@material-ui/core';
import { Label, Close } from '@material-ui/icons';
import { Close, Label } from '@material-ui/icons';
import { useParams } from 'react-router-dom';
import useTags from '../../../../../../hooks/api/getters/useTags/useTags';
import { IFeatureViewParams } from '../../../../../../interfaces/params';
@ -17,6 +17,7 @@ import useToast from '../../../../../../hooks/useToast';
import { UPDATE_FEATURE } from '../../../../../providers/AccessProvider/permissions';
import ConditionallyRender from '../../../../../common/ConditionallyRender';
import AccessContext from '../../../../../../contexts/AccessContext';
import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
interface IFeatureOverviewTagsProps extends React.HTMLProps<HTMLButtonElement> {
projectId: string;
@ -53,8 +54,8 @@ const FeatureOverviewTags: React.FC<IFeatureOverviewTagsProps> = ({
title: 'Tag deleted',
text: 'Successfully deleted tag',
});
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};

7
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useContext } from 'react';
import { useContext, useEffect, useState } from 'react';
import * as jsonpatch from 'fast-json-patch';
import { TextField } from '@material-ui/core';
import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
@ -11,6 +11,7 @@ import { IFeatureViewParams } from '../../../../../interfaces/params';
import useToast from '../../../../../hooks/useToast';
import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
import ConditionallyRender from '../../../../common/ConditionallyRender';
import { formatUnknownError } from '../../../../../utils/format-unknown-error';
const FeatureSettingsMetadata = () => {
const { hasAccess } = useContext(AccessContext);
@ -54,8 +55,8 @@ const FeatureSettingsMetadata = () => {
});
setDirty(false);
refetch();
} catch (e) {
setToastApiError(e.toString());
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};

13
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProject.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useContext } from 'react';
import { useContext, useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router';
import AccessContext from '../../../../../contexts/AccessContext';
import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
@ -12,6 +12,7 @@ import FeatureProjectSelect from './FeatureProjectSelect/FeatureProjectSelect';
import FeatureSettingsProjectConfirm from './FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm';
import { IPermission } from '../../../../../interfaces/user';
import { useAuthPermissions } from '../../../../../hooks/api/getters/useAuth/useAuthPermissions';
import { formatUnknownError } from '../../../../../utils/format-unknown-error';
const FeatureSettingsProject = () => {
const { hasAccess } = useContext(AccessContext);
@ -61,16 +62,16 @@ const FeatureSettingsProject = () => {
history.replace(
`/projects/${newProject}/features/${featureId}/settings`
);
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
const createMoveTargets = () => {
return permissions.reduce(
(acc: { [key: string]: boolean }, permission: IPermission) => {
if (permission.permission === MOVE_FEATURE_TOGGLE) {
acc[permission.project] = true;
(acc: { [key: string]: boolean }, p: IPermission) => {
if (p.project && p.permission === MOVE_FEATURE_TOGGLE) {
acc[p.project] = true;
}
return acc;
},

9
frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
View File

@ -1,7 +1,8 @@
import { useStyles } from './FeatureStatus.styles';
import TimeAgo from 'react-timeago';
import ConditionallyRender from '../../../common/ConditionallyRender';
import { Tooltip } from '@material-ui/core';
import { Tooltip, TooltipProps } from '@material-ui/core';
import React from 'react';
function generateUnit(unit?: string): string {
switch (unit) {
@ -46,8 +47,8 @@ function getColor(unit?: string): string {
}
interface FeatureStatusProps {
lastSeenAt?: Date;
tooltipPlacement?: string;
lastSeenAt?: string;
tooltipPlacement?: TooltipProps['placement'];
}
const FeatureStatus = ({
@ -76,7 +77,7 @@ const FeatureStatus = ({
condition={!!lastSeenAt}
show={
<TimeAgo
date={lastSeenAt}
date={lastSeenAt!}
title=""
live={false}
formatter={(

5
frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesConfigure/FeatureStrategiesConfigure.tsx
View File

@ -19,6 +19,7 @@ import { ADD_NEW_STRATEGY_SAVE_ID } from '../../../../../../testIds';
import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature';
import { scrollToTop } from '../../../../../common/util';
import useToast from '../../../../../../hooks/useToast';
import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
const FeatureStrategiesConfigure = () => {
const history = useHistory();
@ -99,8 +100,8 @@ const FeatureStrategiesConfigure = () => {
history.replace(history.location.pathname);
refetch();
scrollToTop();
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};

2
frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList.tsx
View File

@ -39,7 +39,6 @@ const FeatureStrategiesEnvironmentList = ({
const {
activeEnvironmentsRef,
setToastData,
deleteStrategy,
updateStrategy,
delDialog,
@ -162,7 +161,6 @@ const FeatureStrategiesEnvironmentList = ({
: 'Toggle is disabled and no strategies are executing'
}
env={activeEnvironment}
setToastData={setToastData}
callback={updateFeatureEnvironmentCache}
/>
</div>

15
frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/useFeatureStrategiesEnvironmentList.ts
View File

@ -4,9 +4,13 @@ import FeatureStrategiesUIContext from '../../../../../../contexts/FeatureStrate
import useFeatureStrategyApi from '../../../../../../hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
import useToast from '../../../../../../hooks/useToast';
import { IFeatureViewParams } from '../../../../../../interfaces/params';
import { IFeatureStrategy } from '../../../../../../interfaces/strategy';
import {
IFeatureStrategy,
IStrategyPayload,
} from '../../../../../../interfaces/strategy';
import cloneDeep from 'lodash.clonedeep';
import { IFeatureEnvironment } from '../../../../../../interfaces/featureToggle';
import { formatUnknownError } from '../../../../../../utils/format-unknown-error';
const useFeatureStrategiesEnvironmentList = () => {
const { projectId, featureId } = useParams<IFeatureViewParams>();
@ -85,8 +89,8 @@ const useFeatureStrategiesEnvironmentList = () => {
strategy.constraints = updateStrategyPayload.constraints;
history.replace(history.location.pathname);
setFeatureCache(feature);
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
@ -118,14 +122,13 @@ const useFeatureStrategiesEnvironmentList = () => {
text: `Successfully deleted strategy from ${featureId}`,
});
history.replace(history.location.pathname);
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
return {
activeEnvironmentsRef,
setToastData,
deleteStrategy,
updateStrategy,
delDialog,

9
frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard.tsx
View File

@ -11,7 +11,7 @@ interface IFeatureStrategiesProductionGuard {
onClick: () => void;
onClose: () => void;
primaryButtonText: string;
loading: boolean;
loading?: boolean;
}
const FeatureStrategiesProductionGuard = ({
@ -61,4 +61,11 @@ const FeatureStrategiesProductionGuard = ({
);
};
export const disableFeatureStrategiesProductionGuard = () => {
localStorage.setItem(
FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING,
String(true)
);
};
export default FeatureStrategiesProductionGuard;

4
frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategyEditable/FeatureStrategyEditable.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { mutate } from 'swr';
import FeatureStrategiesUIContext from '../../../../../../contexts/FeatureStrategiesUIContext';
@ -6,8 +6,8 @@ import useFeatureStrategy from '../../../../../../hooks/api/getters/useFeatureSt
import { IFeatureViewParams } from '../../../../../../interfaces/params';
import {
IConstraint,
IParameter,
IFeatureStrategy,
IParameter,
} from '../../../../../../interfaces/strategy';
import FeatureStrategyAccordion from '../../FeatureStrategyAccordion/FeatureStrategyAccordion';
import cloneDeep from 'lodash.clonedeep';

2
frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategiesList/FeatureStrategyCard/FeatureStrategyCard.tsx
View File

@ -23,7 +23,7 @@ interface IFeatureStrategyCardProps {
name: string;
description: string;
configureNewStrategy: boolean;
index?: number;
index: number;
}
export const FEATURE_STRATEGIES_DRAG_TYPE = 'FEATURE_STRATEGIES_DRAG_TYPE';

2
frontend/src/component/feature/FeatureView/FeatureStrategies/FeatureStrategyAccordion/FeatureStrategyAccordionBody/FeatureStrategyAccordionBody.tsx
View File

@ -8,7 +8,7 @@ import useStrategies from '../../../../../../hooks/api/getters/useStrategies/use
import GeneralStrategy from '../../common/GeneralStrategy/GeneralStrategy';
import UserWithIdStrategy from '../../common/UserWithIdStrategy/UserWithId';
import StrategyConstraints from '../../common/StrategyConstraints/StrategyConstraints';
import { useContext, useState } from 'react';
import React, { useContext, useState } from 'react';
import ConditionallyRender from '../../../../../common/ConditionallyRender';
import useUiConfig from '../../../../../../hooks/api/getters/useUiConfig/useUiConfig';
import { C } from '../../../../../common/flags';

8
frontend/src/component/feature/FeatureView/FeatureStrategies/common/GeneralStrategy/GeneralStrategy.tsx
View File

@ -1,16 +1,16 @@
import React from 'react';
import {
Switch,
FormControlLabel,
Tooltip,
Switch,
TextField,
Tooltip,
} from '@material-ui/core';
import StrategyInputList from '../StrategyInputList/StrategyInputList';
import RolloutSlider from '../RolloutSlider/RolloutSlider';
import {
IParameter,
IFeatureStrategy,
IParameter,
} from '../../../../../../interfaces/strategy';
import { useStyles } from './GeneralStrategy.styles';
@ -77,7 +77,7 @@ const GeneralStrategy = ({
</div>
);
} else if (type === 'list') {
let list = [];
let list: string[] = [];
if (typeof value === 'string') {
list = value.trim().split(',').filter(Boolean);
}

1
frontend/src/component/feature/FeatureView/FeatureStrategies/common/RolloutSlider/RolloutSlider.tsx
View File

@ -1,6 +1,7 @@
import { makeStyles, withStyles } from '@material-ui/core/styles';
import { Slider, Typography } from '@material-ui/core';
import { ROLLOUT_SLIDER_ID } from '../../../../../../testIds';
import React from 'react';
const StyledSlider = withStyles({
root: {

10
frontend/src/component/feature/FeatureView/FeatureStrategies/common/StrategyConstraints/StrategyConstraints.tsx
View File

@ -7,7 +7,7 @@ import useUiConfig from '../../../../../../hooks/api/getters/useUiConfig/useUiCo
import { C } from '../../../../../common/flags';
import useUnleashContext from '../../../../../../hooks/api/getters/useUnleashContext/useUnleashContext';
import StrategyConstraintInputField from './StrategyConstraintInputField';
import { useEffect } from 'react';
import React, { useEffect } from 'react';
interface IStrategyConstraintProps {
constraints: IConstraint[];
@ -38,7 +38,7 @@ const StrategyConstraints: React.FC<IStrategyConstraintProps> = ({
const enabled = uiConfig.flags[C];
const contextNames = contextFields.map(context => context.name);
const onClick = evt => {
const onClick = (evt: React.SyntheticEvent) => {
evt.preventDefault();
addConstraint();
};
@ -57,15 +57,15 @@ const StrategyConstraints: React.FC<IStrategyConstraintProps> = ({
};
};
const removeConstraint = index => evt => {
evt.preventDefault();
const removeConstraint = (index: number) => (event: Event) => {
event.preventDefault();
const updatedConstraints = [...constraints];
updatedConstraints.splice(index, 1);
updateConstraints(updatedConstraints);
};
const updateConstraint = index => (value, field) => {
const updateConstraint = (index: number) => (value, field) => {
const updatedConstraints = [...constraints];
const constraint = updatedConstraints[index];
constraint[field] = value;

2
frontend/src/component/feature/FeatureView/FeatureStrategies/common/StrategyInputList/StrategyInputList.tsx
View File

@ -10,7 +10,7 @@ import {
interface IStrategyInputList {
name: string;
list: string[];
setConfig: () => void;
setConfig: (field: string, value: string) => void;
disabled: boolean;
}

2
frontend/src/component/feature/FeatureView/FeatureStrategies/common/UserWithIdStrategy/UserWithId.tsx
View File

@ -3,7 +3,7 @@ import StrategyInputList from '../StrategyInputList/StrategyInputList';
interface IUserWithIdStrategyProps {
parameters: IParameter;
updateParameter: (field: string, value: any) => void;
updateParameter: (field: string, value: string) => void;
editable: boolean;
}

57
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
View File

@ -1,12 +1,11 @@
import { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import React, { useEffect, useState } from 'react';
import {
Button,
FormControl,
FormControlLabel,
Grid,
TextField,
InputAdornment,
Button,
TextField,
Tooltip,
} from '@material-ui/core';
import { Info } from '@material-ui/icons';
@ -18,13 +17,16 @@ import ConditionallyRender from '../../../../../common/ConditionallyRender';
import GeneralSelect from '../../../../../common/GeneralSelect/GeneralSelect';
import { useCommonStyles } from '../../../../../../common.styles';
import Dialogue from '../../../../../common/Dialogue';
import { trim, modalStyles } from '../../../../../common/util';
import { modalStyles, trim } from '../../../../../common/util';
import PermissionSwitch from '../../../../../common/PermissionSwitch/PermissionSwitch';
import { UPDATE_FEATURE_VARIANTS } from '../../../../../providers/AccessProvider/permissions';
import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature';
import { useParams } from 'react-router-dom';
import { IFeatureViewParams } from '../../../../../../interfaces/params';
import { IFeatureVariant } from '../../../../../../interfaces/featureToggle';
import {
IFeatureVariant,
IOverride,
} from '../../../../../../interfaces/featureToggle';
import cloneDeep from 'lodash.clonedeep';
const payloadOptions = [
@ -35,6 +37,17 @@ const payloadOptions = [
const EMPTY_PAYLOAD = { type: 'string', value: '' };
interface IAddVariantProps {
showDialog: boolean;
closeDialog: () => void;
save: (variantToSave: IFeatureVariant) => Promise<void>;
editVariant: IFeatureVariant;
validateName: (value: string) => Record<string, string> | undefined;
validateWeight: (value: string) => Record<string, string> | undefined;
title: string;
editing: boolean;
}
const AddVariant = ({
showDialog,
closeDialog,
@ -44,11 +57,11 @@ const AddVariant = ({
validateWeight,
title,
editing,
}) => {
}: IAddVariantProps) => {
const [data, setData] = useState({});
const [payload, setPayload] = useState(EMPTY_PAYLOAD);
const [overrides, setOverrides] = useState([]);
const [error, setError] = useState({});
const [overrides, setOverrides] = useState<IOverride[]>([]);
const [error, setError] = useState<Record<string, string>>({});
const commonStyles = useCommonStyles();
const { projectId, featureId } = useParams<IFeatureViewParams>();
const { feature } = useFeature(projectId, featureId);
@ -80,7 +93,7 @@ const AddVariant = ({
setError({});
};
const setClonedVariants = clonedVariants =>
const setClonedVariants = (clonedVariants: IFeatureVariant[]) =>
setVariants(cloneDeep(clonedVariants));
useEffect(() => {
@ -159,7 +172,7 @@ const AddVariant = ({
}
};
const onPayload = e => {
const onPayload = (e: React.SyntheticEvent) => {
e.preventDefault();
setPayload({
...payload,
@ -167,13 +180,13 @@ const AddVariant = ({
});
};
const onCancel = e => {
const onCancel = (e: React.SyntheticEvent) => {
e.preventDefault();
clear();
closeDialog();
};
const updateOverrideType = index => e => {
const updateOverrideType = (index: number) => (e: React.SyntheticEvent) => {
e.preventDefault();
setOverrides(
overrides.map((o, i) => {
@ -186,7 +199,7 @@ const AddVariant = ({
);
};
const updateOverrideValues = (index, values) => {
const updateOverrideValues = (index: number, values: string[]) => {
setOverrides(
overrides.map((o, i) => {
if (i === index) {
@ -197,12 +210,12 @@ const AddVariant = ({
);
};
const removeOverride = index => e => {
const removeOverride = (index: number) => (e: React.SyntheticEvent) => {
e.preventDefault();
setOverrides(overrides.filter((o, i) => i !== index));
};
const onAddOverride = e => {
const onAddOverride = (e: React.SyntheticEvent) => {
e.preventDefault();
setOverrides([
...overrides,
@ -388,7 +401,6 @@ const AddVariant = ({
removeOverride={removeOverride}
updateOverrideType={updateOverrideType}
updateOverrideValues={updateOverrideValues}
updateValues={updateOverrideValues}
/>
<Button
onClick={onAddOverride}
@ -402,15 +414,4 @@ const AddVariant = ({
);
};
AddVariant.propTypes = {
showDialog: PropTypes.bool.isRequired,
closeDialog: PropTypes.func.isRequired,
save: PropTypes.func.isRequired,
validateName: PropTypes.func.isRequired,
validateWeight: PropTypes.func.isRequired,
editVariant: PropTypes.object,
title: PropTypes.string,
uiConfig: PropTypes.object,
};
export default AddVariant;

17
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
View File

@ -30,6 +30,7 @@ import cloneDeep from 'lodash.clonedeep';
import useDeleteVariantMarkup from './FeatureVariantsListItem/useDeleteVariantMarkup';
import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
import { mutate } from 'swr';
import { formatUnknownError } from '../../../../../utils/format-unknown-error';
const FeatureOverviewVariants = () => {
const { hasAccess } = useContext(AccessContext);
@ -155,8 +156,8 @@ const FeatureOverviewVariants = () => {
type: 'success',
text: 'Successfully updated variant stickiness',
});
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
@ -167,8 +168,8 @@ const FeatureOverviewVariants = () => {
updatedVariants,
'Successfully removed variant'
);
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
const updateVariant = async (variant: IFeatureVariant) => {
@ -210,8 +211,8 @@ const FeatureOverviewVariants = () => {
type: 'success',
text: successText,
});
} catch (e) {
setToastApiError(e.message);
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
};
@ -221,7 +222,7 @@ const FeatureOverviewVariants = () => {
}
};
const validateWeight = (weight: number) => {
const validateWeight = (weight: string) => {
const weightValue = parseInt(weight);
if (weightValue > 100 || weightValue < 0) {
return { weight: 'weight must be between 0 and 100' };
@ -230,7 +231,7 @@ const FeatureOverviewVariants = () => {
const delDialogueMarkup = useDeleteVariantMarkup({
show: delDialog.show,
onClick: e => {
onClick: () => {
removeVariant(delDialog.name);
setDelDialog({ name: '', show: false });
setToastData({

6
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
View File

@ -1,5 +1,5 @@
import { IconButton, Chip, TableCell, TableRow } from '@material-ui/core';
import { Edit, Delete } from '@material-ui/icons';
import { Chip, IconButton, TableCell, TableRow } from '@material-ui/core';
import { Delete, Edit } from '@material-ui/icons';
import styles from '../variants.module.scss';
import { IFeatureVariant } from '../../../../../../interfaces/featureToggle';
@ -26,7 +26,7 @@ const FeatureVariantListItem = ({
<TableCell data-test={'VARIANT_NAME'}>{variant.name}</TableCell>
<TableCell className={styles.chipContainer}>
<ConditionallyRender
condition={variant.payload}
condition={Boolean(variant.payload)}
show={<Chip label="Payload" />}
/>
<ConditionallyRender

2
frontend/src/component/feature/FeatureView/FeatureView.tsx
View File

@ -61,7 +61,7 @@ const FeatureView = () => {
setShowDelDialog(false);
projectRefetch();
history.push(`/projects/${projectId}`);
} catch (error) {
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
setShowDelDialog(false);
}

8
frontend/src/component/feature/RedirectFeatureView/RedirectFeatureView.tsx
View File

@ -11,9 +11,7 @@ interface IRedirectParams {
const RedirectFeatureView = () => {
const { name } = useParams<IRedirectParams>();
const { features } = useFeatures();
const [featureToggle, setFeatureToggle] = useState<IFeatureToggle | null>(
null
);
const [featureToggle, setFeatureToggle] = useState<IFeatureToggle>();
useEffect(() => {
const toggle = features.find(
@ -23,7 +21,9 @@ const RedirectFeatureView = () => {
setFeatureToggle(toggle);
}, [features, name]);
if (!featureToggle) return null;
if (!featureToggle) {
return null;
}
return (
<Redirect

7
frontend/src/component/history/EventLog/EventLog.jsx
View File

@ -1,14 +1,11 @@
import { List, Switch, FormControlLabel } from '@material-ui/core';
import PropTypes from 'prop-types';
import { formatFullDateTimeWithLocale } from '../../common/util';
import EventJson from './EventJson/EventJson';
import PageContent from '../../common/PageContent/PageContent';
import HeaderTitle from '../../common/HeaderTitle';
import EventCard from './EventCard/EventCard';
import { useStyles } from './EventLog.styles.js';
import { formatDateYMDHMS } from '../../../utils/format-date';
const EventLog = ({
title,
@ -23,7 +20,7 @@ const EventLog = ({
setEventSettings({ showData: !eventSettings.showData });
};
const formatFulldateTime = v => {
return formatFullDateTimeWithLocale(v, locationSettings.locale);
return formatDateYMDHMS(v, locationSettings.locale);
};
if (!history || history.length < 0) {

5
frontend/src/component/project/Project/CreateProject/CreateProject.tsx
View File

@ -8,6 +8,7 @@ import useToast from '../../../../hooks/useToast';
import PermissionButton from '../../../common/PermissionButton/PermissionButton';
import { CREATE_PROJECT } from '../../../providers/AccessProvider/permissions';
import { useAuthUser } from '../../../../hooks/api/getters/useAuth/useAuthUser';
import { formatUnknownError } from '../../../../utils/format-unknown-error';
const CreateProject = () => {
const { setToastData, setToastApiError } = useToast();
@ -48,8 +49,8 @@ const CreateProject = () => {
confetti: true,
type: 'success',
});
} catch (e: any) {
setToastApiError(e.toString());
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
}
};

5
frontend/src/component/project/Project/EditProject/EditProject.tsx
View File

@ -8,6 +8,7 @@ import useUiConfig from '../../../../hooks/api/getters/useUiConfig/useUiConfig';
import useToast from '../../../../hooks/useToast';
import PermissionButton from '../../../common/PermissionButton/PermissionButton';
import { UPDATE_PROJECT } from '../../../providers/AccessProvider/permissions';
import { formatUnknownError } from '../../../../utils/format-unknown-error';
const EditProject = () => {
const { uiConfig } = useUiConfig();
@ -58,8 +59,8 @@ const EditProject = () => {
title: 'Project information updated',
type: 'success',
});
} catch (e: any) {
setToastApiError(e.toString());
} catch (error: unknown) {
setToastApiError(formatUnknownError(error));
}
}
};

2
frontend/src/component/project/Project/Project.tsx
View File

@ -45,7 +45,7 @@ const Project = () => {
},
{
title: 'Access',
component: <ProjectAccess projectId={id} />,
component: <ProjectAccess />,
path: `${basePath}/access`,
name: 'access',
},

2
frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -27,7 +27,7 @@ const ProjectFeatureToggles = ({
loading,
}: IProjectFeatureToggles) => {
const styles = useStyles();
const { id } = useParams();
const { id } = useParams<{ id: string }>();
const history = useHistory();
const { hasAccess } = useContext(AccessContext);
const { uiConfig } = useUiConfig();

1
frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts
View File

@ -38,7 +38,6 @@ export const useStyles = makeStyles(theme => ({
position: 'relative',
},
errorMessage: {
// @ts-expect-error
fontSize: theme.fontSizes.smallBody,
color: theme.palette.error.main,
position: 'absolute',

Some files were not shown because too many files have changed in this diff Show More