diff --git a/frontend/cypress/integration/auth/auth.spec.ts b/frontend/cypress/integration/auth/auth.spec.ts index 5c7e4cf18b..8c2d25e47a 100644 --- a/frontend/cypress/integration/auth/auth.spec.ts +++ b/frontend/cypress/integration/auth/auth.spec.ts @@ -22,6 +22,7 @@ describe('auth', () => { expect(req.body.password).to.equal('unleash4all'); }).as('passwordLogin'); + cy.wait(1000); cy.get('[data-test="LOGIN_EMAIL_ID"]').type('admin'); cy.get('[data-test="LOGIN_PASSWORD_ID"]').type('unleash4all'); cy.get("[data-test='LOGIN_BUTTON']").click(); diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index 8cafdf8879..4b75a07523 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -1,6 +1,6 @@ import ConditionallyRender from 'component/common/ConditionallyRender'; import { FeedbackNPS } from 'component/feedback/FeedbackNPS/FeedbackNPS'; -import LayoutPicker from 'component/layout/LayoutPicker/LayoutPicker'; +import { LayoutPicker } from 'component/layout/LayoutPicker/LayoutPicker'; import Loader from 'component/common/Loader/Loader'; import NotFound from 'component/common/NotFound/NotFound'; import ProtectedRoute from 'component/common/ProtectedRoute/ProtectedRoute'; diff --git a/frontend/src/component/Reporting/constants.js b/frontend/src/component/Reporting/constants.ts similarity index 100% rename from frontend/src/component/Reporting/constants.js rename to frontend/src/component/Reporting/constants.ts diff --git a/frontend/src/component/Reporting/testData.js b/frontend/src/component/Reporting/testData.js deleted file mode 100644 index 4a428f4559..0000000000 --- a/frontend/src/component/Reporting/testData.js +++ /dev/null @@ -1,67 +0,0 @@ -export const testProjects = [ - { id: 'default', inital: true, name: 'Default' }, - { id: 'myProject', inital: false, name: 'MyProject' }, -]; - -export const testFeatures = [ - { - name: 'one', - description: '1234', - type: 'permission', - project: 'default', - enabled: false, - stale: false, - strategies: [], - variants: [], - createdAt: '2021-02-01T04:12:36.878Z', - lastSeenAt: '2021-02-21T19:34:21.830Z', - }, - { - name: 'two', - description: '', - type: 'release', - project: 'default', - enabled: false, - stale: false, - strategies: [], - variants: [], - createdAt: '2021-02-22T16:05:39.717Z', - lastSeenAt: '2021-02-22T19:37:58.189Z', - }, - { - name: 'three', - description: 'asdasds', - type: 'experiment', - project: 'default', - enabled: true, - stale: false, - strategies: [], - variants: [], - createdAt: '2021-02-06T18:38:18.133Z', - lastSeenAt: '2021-02-21T19:34:21.830Z', - }, - { - name: 'four', - description: '', - type: 'experiment', - project: 'myProject', - enabled: true, - stale: false, - strategies: [], - variants: [], - createdAt: '2021-02-14T02:42:34.515Z', - lastSeenAt: '2021-02-21T19:34:21.830Z', - }, - { - name: 'five', - description: '', - type: 'release', - project: 'myProject', - enabled: true, - stale: false, - strategies: [], - variants: [], - createdAt: '2021-02-16T15:26:11.474Z', - lastSeenAt: '2021-02-21T19:34:21.830Z', - }, -]; diff --git a/frontend/src/component/addons/AddonForm/AddonForm.jsx b/frontend/src/component/addons/AddonForm/AddonForm.jsx index 7b47cb1f94..d4a1e6d3d7 100644 --- a/frontend/src/component/addons/AddonForm/AddonForm.jsx +++ b/frontend/src/component/addons/AddonForm/AddonForm.jsx @@ -10,7 +10,7 @@ import PageContent from 'component/common/PageContent/PageContent'; import { useHistory } from 'react-router-dom'; import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi'; import useToast from 'hooks/useToast'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ nameInput: { diff --git a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx index eb24cdb6b8..df778cbc70 100644 --- a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx +++ b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx @@ -27,7 +27,7 @@ import { useStyles } from './ApiTokenList.styles'; import Secret from './secret'; import { Delete, FileCopy } from '@material-ui/icons'; import Dialogue from 'component/common/Dialogue'; -import { CREATE_API_TOKEN_BUTTON } from 'testIds'; +import { CREATE_API_TOKEN_BUTTON } from 'utils/testIds'; import { Alert } from '@material-ui/lab'; import copy from 'copy-to-clipboard'; import { useLocationSettings } from 'hooks/useLocationSettings'; diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx index 4a15aa5b0a..a11ba3b425 100644 --- a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx +++ b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx @@ -1,5 +1,5 @@ import { Typography } from '@material-ui/core'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import Dialogue from 'component/common/Dialogue'; import { UserToken } from './UserToken/UserToken'; diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx index ebaf970a38..d9ac14cc0a 100644 --- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx +++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx @@ -1,6 +1,6 @@ import { Typography } from '@material-ui/core'; import { Alert } from '@material-ui/lab'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import Dialogue from 'component/common/Dialogue'; import UserInviteLink from './UserInviteLink/UserInviteLink'; diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx index ad6632b1e5..3120a772aa 100644 --- a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx +++ b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx @@ -5,7 +5,7 @@ import { trim } from 'component/common/util'; import { modalStyles } from 'component/admin/users/util'; import Dialogue from 'component/common/Dialogue/Dialogue'; import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher'; import ConditionallyRender from 'component/common/ConditionallyRender'; import { Alert } from '@material-ui/lab'; diff --git a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx index 88ca110b63..87545a08bf 100644 --- a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx +++ b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx @@ -5,7 +5,7 @@ import { REMOVE_USER_ERROR } from 'hooks/api/actions/useAdminUsersApi/useAdminUs import { Alert } from '@material-ui/lab'; import useLoading from 'hooks/useLoading'; import { Avatar, Typography } from '@material-ui/core'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { IUser } from 'interfaces/user'; interface IDeleteUserProps { diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx index 724496f743..4721872432 100644 --- a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx +++ b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx @@ -1,6 +1,6 @@ import { ChangeEvent, useState } from 'react'; import { Grid, TextField } from '@material-ui/core'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import icons from 'component/application/iconNames'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi'; diff --git a/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx b/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx index b80db69b3f..da6ae55a30 100644 --- a/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx +++ b/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx @@ -1,10 +1,18 @@ +import { ReactNode } from 'react'; + interface IConditionallyRenderProps { condition: boolean; show: TargetElement; elseShow?: TargetElement; } -type TargetElement = JSX.Element | JSX.Element[] | RenderFunc | null; +type TargetElement = + | JSX.Element + | JSX.Element[] + | RenderFunc + | ReactNode + | null; + type RenderFunc = () => JSX.Element; const ConditionallyRender = ({ diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx index 12f4c42781..3e67efe2e2 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx @@ -1,5 +1,5 @@ import { Checkbox, FormControlLabel } from '@material-ui/core'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import ConditionallyRender from 'component/common/ConditionallyRender'; import { useEffect, useState } from 'react'; import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch'; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx index ce53076c6a..9b769eefd5 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx @@ -9,7 +9,7 @@ import { } from '@material-ui/core'; import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch'; import ConditionallyRender from 'component/common/ConditionallyRender'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; // Parent component diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx index 12ce84d2a6..772f732425 100644 --- a/frontend/src/component/common/Dialogue/Dialogue.tsx +++ b/frontend/src/component/common/Dialogue/Dialogue.tsx @@ -9,7 +9,7 @@ import { import ConditionallyRender from '../ConditionallyRender/ConditionallyRender'; import { useStyles } from './Dialogue.styles'; -import { DIALOGUE_CONFIRM_ID } from 'testIds'; +import { DIALOGUE_CONFIRM_ID } from 'utils/testIds'; interface IDialogue { primaryButtonText?: string; diff --git a/frontend/src/component/common/DividerText/DividerText.styles.js b/frontend/src/component/common/DividerText/DividerText.styles.ts similarity index 84% rename from frontend/src/component/common/DividerText/DividerText.styles.js rename to frontend/src/component/common/DividerText/DividerText.styles.ts index 2fe709fafa..23787a42fa 100644 --- a/frontend/src/component/common/DividerText/DividerText.styles.js +++ b/frontend/src/component/common/DividerText/DividerText.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ container: { @@ -10,6 +10,7 @@ export const useStyles = makeStyles(theme => ({ wing: { width: '80px', height: '3px', + // @ts-expect-error backgroundColor: theme.palette.division.main, borderRadius: theme.borders.radius.main, }, diff --git a/frontend/src/component/common/DividerText/DividerText.tsx b/frontend/src/component/common/DividerText/DividerText.tsx index fc36607979..5cc33aa885 100644 --- a/frontend/src/component/common/DividerText/DividerText.tsx +++ b/frontend/src/component/common/DividerText/DividerText.tsx @@ -1,5 +1,5 @@ import { Typography } from '@material-ui/core'; -import { useStyles } from './DividerText.styles'; +import { useStyles } from 'component/common/DividerText/DividerText.styles'; interface IDividerTextProps { text: string; diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx index 0096f57aa2..55c0708dd9 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx +++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx @@ -10,7 +10,7 @@ import useToast from 'hooks/useToast'; import React, { useState } from 'react'; import classNames from 'classnames'; import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; interface ICreateProps { title: string; diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx index 061ef8c491..cf758063ee 100644 --- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx +++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; -import { SELECT_ITEM_ID } from 'testIds'; +import { SELECT_ITEM_ID } from 'utils/testIds'; import { KeyboardArrowDownOutlined } from '@material-ui/icons'; export interface ISelectOption { diff --git a/frontend/src/component/common/HeaderTitle/styles.js b/frontend/src/component/common/HeaderTitle/styles.ts similarity index 87% rename from frontend/src/component/common/HeaderTitle/styles.js rename to frontend/src/component/common/HeaderTitle/styles.ts index cbf50c4b66..dfa0a01ae8 100644 --- a/frontend/src/component/common/HeaderTitle/styles.js +++ b/frontend/src/component/common/HeaderTitle/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ headerTitleContainer: { diff --git a/frontend/src/component/common/Input/Input.tsx b/frontend/src/component/common/Input/Input.tsx index 2982a8dfac..cbfda9fa18 100644 --- a/frontend/src/component/common/Input/Input.tsx +++ b/frontend/src/component/common/Input/Input.tsx @@ -1,5 +1,5 @@ import { InputLabelProps, InputProps, TextField } from '@material-ui/core'; -import { INPUT_ERROR_TEXT } from 'testIds'; +import { INPUT_ERROR_TEXT } from 'utils/testIds'; import { useStyles } from './Input.styles'; import React from 'react'; diff --git a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.js b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.ts similarity index 78% rename from frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.js rename to frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.ts index cefe49d9cb..33509e8453 100644 --- a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.js +++ b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.ts @@ -1,7 +1,8 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ emptyStateListItem: { + // @ts-expect-error border: `2px dashed ${theme.palette.borders.main}`, padding: '0.8rem', textAlign: 'center', diff --git a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx index cc9e557528..dde79ce169 100644 --- a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx +++ b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx @@ -1,7 +1,7 @@ import { ListItem } from '@material-ui/core'; import { Link } from 'react-router-dom'; import ConditionallyRender from '../ConditionallyRender'; -import { useStyles } from './ListPlaceholder.styles'; +import { useStyles } from 'component/common/ListPlaceholder/ListPlaceholder.styles'; interface IListPlaceholderProps { text: string; diff --git a/frontend/src/component/common/PageContent/styles.js b/frontend/src/component/common/PageContent/styles.ts similarity index 90% rename from frontend/src/component/common/PageContent/styles.js rename to frontend/src/component/common/PageContent/styles.ts index 266ef3efd4..402b62fd84 100644 --- a/frontend/src/component/common/PageContent/styles.js +++ b/frontend/src/component/common/PageContent/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ headerContainer: { diff --git a/frontend/src/component/common/ScrollTop/ScrollTop.tsx b/frontend/src/component/common/ScrollTop/ScrollTop.tsx new file mode 100644 index 0000000000..3e70b83e3b --- /dev/null +++ b/frontend/src/component/common/ScrollTop/ScrollTop.tsx @@ -0,0 +1,21 @@ +import { useEffect } from 'react'; +import { useLocation } from 'react-router-dom'; + +export const ScrollTop = (): null => { + const { pathname } = useLocation(); + + useEffect(() => { + if (!noScrollPaths.some(noScroll => pathname.includes(noScroll))) { + window.scrollTo(0, 0); + } + }, [pathname]); + + return null; +}; + +const noScrollPaths = [ + '/admin/api', + '/admin/users', + '/admin/auth', + '/admin/roles', +]; diff --git a/frontend/src/component/common/SearchField/SearchField.tsx b/frontend/src/component/common/SearchField/SearchField.tsx index 333cc5a603..de6b9e52c3 100644 --- a/frontend/src/component/common/SearchField/SearchField.tsx +++ b/frontend/src/component/common/SearchField/SearchField.tsx @@ -3,7 +3,7 @@ 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 { useStyles } from 'component/common/SearchField/styles'; import ConditionallyRender from 'component/common/ConditionallyRender'; interface ISearchFieldProps { diff --git a/frontend/src/component/common/SearchField/styles.js b/frontend/src/component/common/SearchField/styles.ts similarity index 88% rename from frontend/src/component/common/SearchField/styles.js rename to frontend/src/component/common/SearchField/styles.ts index 25262fd324..db5b95de03 100644 --- a/frontend/src/component/common/SearchField/styles.js +++ b/frontend/src/component/common/SearchField/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ container: { @@ -10,6 +10,7 @@ export const useStyles = makeStyles(theme => ({ search: { display: 'flex', alignItems: 'center', + // @ts-expect-error backgroundColor: theme.palette.searchField.main, borderRadius: '25px', padding: '0.25rem 0.5rem', diff --git a/frontend/src/component/common/SidebarModal/SidebarModal.tsx b/frontend/src/component/common/SidebarModal/SidebarModal.tsx index beddb157c8..9759848c80 100644 --- a/frontend/src/component/common/SidebarModal/SidebarModal.tsx +++ b/frontend/src/component/common/SidebarModal/SidebarModal.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import { Modal, Backdrop } from '@material-ui/core'; import Fade from '@material-ui/core/Fade'; import { useStyles } from 'component/common/SidebarModal/SidebarModal.styles'; -import { SIDEBAR_MODAL_ID } from 'testIds'; +import { SIDEBAR_MODAL_ID } from 'utils/testIds'; interface ISidebarModalProps { open: boolean; diff --git a/frontend/src/component/common/TabNav/styles.js b/frontend/src/component/common/TabNav/styles.ts similarity index 60% rename from frontend/src/component/common/TabNav/styles.js rename to frontend/src/component/common/TabNav/styles.ts index eb50bcc0fc..e828f60aca 100644 --- a/frontend/src/component/common/TabNav/styles.js +++ b/frontend/src/component/common/TabNav/styles.ts @@ -1,7 +1,8 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ tabNav: { + // @ts-expect-error backgroundColor: theme.palette.tabs.main, }, })); diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx index 4b8aaa3b6f..9ea73a9e1e 100644 --- a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx +++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx @@ -1,6 +1,6 @@ import { Portal } from '@material-ui/core'; import { useContext, useEffect } from 'react'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import UIContext from 'contexts/UIContext'; import { useStyles } from './ToastRenderer.styles'; import AnimateOnMount from '../AnimateOnMount/AnimateOnMount'; diff --git a/frontend/src/component/common/flags.js b/frontend/src/component/common/flags.ts similarity index 100% rename from frontend/src/component/common/flags.js rename to frontend/src/component/common/flags.ts diff --git a/frontend/src/component/common/select.tsx b/frontend/src/component/common/select.tsx index d1775853ed..be95b01e28 100644 --- a/frontend/src/component/common/select.tsx +++ b/frontend/src/component/common/select.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core'; -import { SELECT_ITEM_ID } from 'testIds'; +import { SELECT_ITEM_ID } from 'utils/testIds'; export interface ISelectOption { key: string; diff --git a/frontend/src/component/context/ContextList/styles.js b/frontend/src/component/context/ContextList/styles.ts similarity index 69% rename from frontend/src/component/context/ContextList/styles.js rename to frontend/src/component/context/ContextList/styles.ts index fb054b3439..b05619ccd2 100644 --- a/frontend/src/component/context/ContextList/styles.js +++ b/frontend/src/component/context/ContextList/styles.ts @@ -1,9 +1,9 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles({ listItem: { padding: 0, - ['& a']: { + '& a': { textDecoration: 'none', color: 'inherit', }, diff --git a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx index d34e45ae52..a60c35c7fd 100644 --- a/frontend/src/component/feature/CreateFeature/CreateFeature.tsx +++ b/frontend/src/component/feature/CreateFeature/CreateFeature.tsx @@ -9,7 +9,7 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions'; import { useContext } from 'react'; import { CreateButton } from 'component/common/CreateButton/CreateButton'; import UIContext from 'contexts/UIContext'; -import { CF_CREATE_BTN_ID } from 'testIds'; +import { CF_CREATE_BTN_ID } from 'utils/testIds'; import { formatUnknownError } from 'utils/formatUnknownError'; const CreateFeature = () => { diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx index e51f3426b5..e98af8e38e 100644 --- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx +++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx @@ -7,7 +7,7 @@ import { } from '@material-ui/core'; import { useStyles } from './FeatureForm.styles'; import FeatureTypeSelect from '../FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect'; -import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from 'testIds'; +import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from 'utils/testIds'; import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes'; import { KeyboardArrowDownOutlined } from '@material-ui/icons'; import { projectFilterGenerator } from 'utils/projectFilterGenerator'; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx index 946d100244..58ca22d97f 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx @@ -14,7 +14,7 @@ import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit'; import { useHistory } from 'react-router-dom'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import ConditionallyRender from 'component/common/ConditionallyRender'; -import { STRATEGY_FORM_SUBMIT_ID } from 'testIds'; +import { STRATEGY_FORM_SUBMIT_ID } from 'utils/testIds'; import { useConstraintsValidation } from 'hooks/api/getters/useConstraintsValidation/useConstraintsValidation'; import AccessContext from 'contexts/AccessContext'; import PermissionButton from 'component/common/PermissionButton/PermissionButton'; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx index d4829e2085..8068895fef 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx @@ -9,7 +9,7 @@ import { Alert } from '@material-ui/lab'; import PermissionButton from 'component/common/PermissionButton/PermissionButton'; import { DELETE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; -import { STRATEGY_FORM_REMOVE_ID } from 'testIds'; +import { STRATEGY_FORM_REMOVE_ID } from 'utils/testIds'; import ConditionallyRender from 'component/common/ConditionallyRender'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import { Delete } from '@material-ui/icons'; diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx index ad2770f95f..f4c0707e28 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx @@ -17,7 +17,7 @@ import AccessContext from 'contexts/AccessContext'; import { useStyles } from './styles'; import ListPlaceholder from 'component/common/ListPlaceholder/ListPlaceholder'; import { getCreateTogglePath } from 'utils/routePathHelpers'; -import { NAVIGATE_TO_CREATE_FEATURE } from 'testIds'; +import { NAVIGATE_TO_CREATE_FEATURE } from 'utils/testIds'; import { resolveFilteredProjectId } from 'hooks/useFeaturesFilter'; const FeatureToggleList = ({ diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.js b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.ts similarity index 79% rename from frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.js rename to frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.ts index 8800e17d1c..4e033e99d5 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.js +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles({ actions: { diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.ts similarity index 84% rename from frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js rename to frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.ts index c725251f45..e186101ba2 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ listItem: { @@ -11,15 +11,16 @@ export const useStyles = makeStyles(theme => ({ listItemMetric: { width: '40px', marginRight: '0.25rem', - flexShrink: '0', + flexShrink: 0, }, listItemType: { width: '40px', textAlign: 'center', marginRight: '0', - flexShrink: '0', + flexShrink: 0, }, listItemSvg: { + // @ts-expect-error fill: theme.palette.icons.lightGrey, }, listItemLink: { diff --git a/frontend/src/component/feature/FeatureToggleList/styles.js b/frontend/src/component/feature/FeatureToggleList/styles.ts similarity index 90% rename from frontend/src/component/feature/FeatureToggleList/styles.js rename to frontend/src/component/feature/FeatureToggleList/styles.ts index 0f83d3bcb0..560f82aee1 100644 --- a/frontend/src/component/feature/FeatureToggleList/styles.js +++ b/frontend/src/component/feature/FeatureToggleList/styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ actionsContainer: { @@ -25,6 +25,7 @@ export const useStyles = makeStyles(theme => ({ }, }, emptyStateListItem: { + // @ts-expect-error border: `2px dashed ${theme.palette.borders.main}`, padding: '0.8rem', textAlign: 'center', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx index 407ab04fd3..a34878e943 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx @@ -25,7 +25,7 @@ import FeatureOverviewEnvironmentBody from './FeatureOverviewEnvironmentBody/Fea import FeatureOverviewEnvironmentFooter from './FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter'; import FeatureOverviewEnvironmentMetrics from './FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics'; import { FeatureStrategyMenu } from 'component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu'; -import { FEATURE_ENVIRONMENT_ACCORDION } from 'testIds'; +import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds'; interface IStrategyIconObject { count: number; diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx index 79e30e70b8..4ed3cf5f15 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx @@ -11,7 +11,7 @@ import { Info } from '@material-ui/icons'; import { weightTypes } from './enums'; import { OverrideConfig } from './OverrideConfig/OverrideConfig'; import ConditionallyRender from 'component/common/ConditionallyRender'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import Dialogue from 'component/common/Dialogue'; import { modalStyles, trim } from 'component/common/util'; import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch'; diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx index d4c66031d9..212af14710 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.jsx @@ -2,10 +2,10 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import { Grid, IconButton, TextField } from '@material-ui/core'; import { Delete } from '@material-ui/icons'; -import { useStyles } from './OverrideConfig.styles.js'; +import { useStyles } from './OverrideConfig.styles'; import { Autocomplete } from '@material-ui/lab'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import ConditionallyRender from 'component/common/ConditionallyRender'; import InputListField from 'component/common/InputListField.jsx'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.js b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts similarity index 67% rename from frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.js rename to frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts index 8025622536..089faf0116 100644 --- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.js +++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ contextFieldSelect: { diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx index b521c4bb4d..53b3dbbaeb 100644 --- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx +++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.jsx @@ -6,9 +6,9 @@ import { Delete } from '@material-ui/icons'; import InputListField from 'component/common/InputListField'; import ConditionallyRender from 'component/common/ConditionallyRender/ConditionallyRender'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { useStyles } from './StrategyConstraintInputField.styles'; -import { CONSTRAINT_AUTOCOMPLETE_ID } from 'testIds'; +import { CONSTRAINT_AUTOCOMPLETE_ID } from 'utils/testIds'; import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect'; const constraintOperators = [ diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.styles.js b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.styles.ts similarity index 89% rename from frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.styles.js rename to frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.styles.ts index 8a604270ff..4b4c7628a6 100644 --- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.styles.js +++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraintInputField/StrategyConstraintInputField.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles({ contextField: { diff --git a/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx b/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx index 27aba08bf0..90eb49f12a 100644 --- a/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx +++ b/frontend/src/component/feature/StrategyConstraints/StrategyConstraints.tsx @@ -1,7 +1,7 @@ import { Button, Tooltip, Typography } from '@material-ui/core'; import { Info } from '@material-ui/icons'; import { IConstraint } from 'interfaces/strategy'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { C } from 'component/common/flags'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx index 0481f9bbeb..160477d4da 100644 --- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx +++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx @@ -9,7 +9,7 @@ import Input from 'component/common/Input/Input'; import { FLEXIBLE_STRATEGY_GROUP_ID, FLEXIBLE_STRATEGY_STICKINESS_ID, -} from 'testIds'; +} from 'utils/testIds'; const builtInStickinessOptions = [ { key: 'default', label: 'default' }, diff --git a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx index fe66c1999f..61d959621c 100644 --- a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx +++ b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx @@ -1,6 +1,6 @@ import { makeStyles, withStyles } from '@material-ui/core/styles'; import { Slider, Typography } from '@material-ui/core'; -import { ROLLOUT_SLIDER_ID } from 'testIds'; +import { ROLLOUT_SLIDER_ID } from 'utils/testIds'; import React from 'react'; const StyledSlider = withStyles({ diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx index c1d07ef2fd..54ef0b6ca9 100644 --- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx +++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx @@ -2,7 +2,7 @@ import React, { ChangeEvent, useState } from 'react'; import { Button, Chip, TextField, Typography } from '@material-ui/core'; import { Add } from '@material-ui/icons'; import ConditionallyRender from 'component/common/ConditionallyRender'; -import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'testIds'; +import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds'; interface IStrategyInputList { name: string; diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx index a9ac5d3563..49402cf602 100644 --- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx +++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx @@ -3,10 +3,10 @@ import { Button, IconButton } from '@material-ui/core'; import classnames from 'classnames'; import CloseIcon from '@material-ui/icons/Close'; import { ReactComponent as Logo } from 'assets/icons/logoPlain.svg'; -import { useCommonStyles } from 'common.styles'; import { useStyles } from 'component/feedback/FeedbackNPS/FeedbackNPS.styles'; import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount'; import ConditionallyRender from 'component/common/ConditionallyRender'; +import { useCommonStyles } from 'themes/commonStyles'; import UIContext from 'contexts/UIContext'; import { PNPS_FEEDBACK_ID, diff --git a/frontend/src/component/history/EventLog/EventCard/EventCard.styles.js b/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts similarity index 64% rename from frontend/src/component/history/EventLog/EventCard/EventCard.styles.js rename to frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts index e0c850404d..21f0dbfafc 100644 --- a/frontend/src/component/history/EventLog/EventCard/EventCard.styles.js +++ b/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles({ eventLogHeader: { diff --git a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.js b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts similarity index 63% rename from frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.js rename to frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts index 1bddfdb6f1..4c3faddf83 100644 --- a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.js +++ b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts @@ -1,13 +1,16 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ blue: { + // @ts-expect-error color: theme.palette.code.edited, }, negative: { + // @ts-expect-error color: theme.palette.code.diffSub, }, positive: { + // @ts-expect-error color: theme.palette.code.diffAdd, }, })); diff --git a/frontend/src/component/history/EventLog/EventJson/EventJson.styles.js b/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts similarity index 70% rename from frontend/src/component/history/EventLog/EventJson/EventJson.styles.js rename to frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts index b74cd5d46f..34c01ea791 100644 --- a/frontend/src/component/history/EventLog/EventJson/EventJson.styles.js +++ b/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts @@ -1,9 +1,10 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ historyItem: { padding: '5px', '&:nth-child(odd)': { + // @ts-expect-error backgroundColor: theme.palette.code.background, }, }, diff --git a/frontend/src/component/history/EventLog/EventLog.jsx b/frontend/src/component/history/EventLog/EventLog.jsx index b6cecc5f54..89d7e15ce2 100644 --- a/frontend/src/component/history/EventLog/EventLog.jsx +++ b/frontend/src/component/history/EventLog/EventLog.jsx @@ -4,7 +4,7 @@ import EventJson from './EventJson/EventJson'; import PageContent from 'component/common/PageContent/PageContent'; import HeaderTitle from 'component/common/HeaderTitle'; import EventCard from './EventCard/EventCard'; -import { useStyles } from './EventLog.styles.js'; +import { useStyles } from './EventLog.styles'; import { formatDateYMDHMS } from 'utils/formatDate'; const EventLog = ({ diff --git a/frontend/src/component/history/EventLog/EventLog.styles.js b/frontend/src/component/history/EventLog/EventLog.styles.ts similarity index 84% rename from frontend/src/component/history/EventLog/EventLog.styles.js rename to frontend/src/component/history/EventLog/EventLog.styles.ts index cb134d44a8..76f2fc82ec 100644 --- a/frontend/src/component/history/EventLog/EventLog.styles.js +++ b/frontend/src/component/history/EventLog/EventLog.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ eventEntry: { @@ -13,15 +13,19 @@ export const useStyles = makeStyles(theme => ({ whiteSpace: 'pre', fontFamily: 'monospace', lineHeight: '100%', + // @ts-expect-error color: theme.palette.code.main, }, '& code > .diff-N': { + // @ts-expect-error color: theme.palette.code.diffAdd, }, '& code > .diff-D': { + // @ts-expect-error color: theme.palette.code.diffSub, }, '& code > .diff-A, .diff-E': { + // @ts-expect-error color: theme.palette.code.diffNeutral, }, '& dl': { diff --git a/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx b/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx deleted file mode 100644 index 17a5b34551..0000000000 --- a/frontend/src/component/layout/LayoutPicker/LayoutPicker.jsx +++ /dev/null @@ -1,49 +0,0 @@ -import ConditionallyRender from 'component/common/ConditionallyRender'; -import { matchPath } from 'react-router'; -import { useLocation } from 'react-router-dom'; -import { MainLayout } from '../MainLayout/MainLayout'; - -const LayoutPicker = ({ children }) => { - const location = useLocation(); - const standalonePages = () => { - const { pathname } = location; - const isLoginPage = matchPath(pathname, { path: '/login' }); - const isNewUserPage = matchPath(pathname, { - path: '/new-user', - }); - const isChangePasswordPage = matchPath(pathname, { - path: '/reset-password', - }); - const isResetPasswordSuccessPage = matchPath(pathname, { - path: '/reset-password-success', - }); - const isForgottenPasswordPage = matchPath(pathname, { - path: '/forgotten-password', - }); - const isSplashPage = matchPath(pathname, { - path: '/splash/:id', - }); - - const is404 = matchPath(pathname, { path: '/404' }); - - return ( - isLoginPage || - isNewUserPage || - isChangePasswordPage || - isResetPasswordSuccessPage || - isForgottenPasswordPage || - isSplashPage || - is404 - ); - }; - - return ( - {children}} - /> - ); -}; - -export default LayoutPicker; diff --git a/frontend/src/component/layout/LayoutPicker/LayoutPicker.tsx b/frontend/src/component/layout/LayoutPicker/LayoutPicker.tsx new file mode 100644 index 0000000000..4d7e9eb92b --- /dev/null +++ b/frontend/src/component/layout/LayoutPicker/LayoutPicker.tsx @@ -0,0 +1,61 @@ +import ConditionallyRender from 'component/common/ConditionallyRender'; +import { matchPath } from 'react-router'; +import { useLocation } from 'react-router-dom'; +import { MainLayout } from '../MainLayout/MainLayout'; +import { ReactNode } from 'react'; + +interface ILayoutPickerProps { + children: ReactNode; +} + +export const LayoutPicker = ({ children }: ILayoutPickerProps) => { + const { pathname } = useLocation(); + + return ( + {children}} + /> + ); +}; + +const isStandalonePage = (pathname: string): boolean => { + const isLoginPage = matchPath(pathname, { + path: '/login', + }); + + const isNewUserPage = matchPath(pathname, { + path: '/new-user', + }); + + const isChangePasswordPage = matchPath(pathname, { + path: '/reset-password', + }); + + const isResetPasswordSuccessPage = matchPath(pathname, { + path: '/reset-password-success', + }); + + const isForgottenPasswordPage = matchPath(pathname, { + path: '/forgotten-password', + }); + + const isSplashPage = matchPath(pathname, { + path: '/splash/:id', + }); + + const is404 = matchPath(pathname, { + path: '/404', + }); + + return Boolean( + isLoginPage || + isNewUserPage || + isChangePasswordPage || + isResetPasswordSuccessPage || + isForgottenPasswordPage || + isSplashPage || + is404 + ); +}; diff --git a/frontend/src/component/menu/Footer/Footer.styles.js b/frontend/src/component/menu/Footer/Footer.styles.ts similarity index 79% rename from frontend/src/component/menu/Footer/Footer.styles.js rename to frontend/src/component/menu/Footer/Footer.styles.ts index 898d896c46..c67ee3ac8a 100644 --- a/frontend/src/component/menu/Footer/Footer.styles.js +++ b/frontend/src/component/menu/Footer/Footer.styles.ts @@ -1,7 +1,8 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ footer: { + // @ts-expect-error background: theme.palette.footer.background, padding: '2rem 4rem', width: '100%', @@ -17,6 +18,7 @@ export const useStyles = makeStyles(theme => ({ margin: 0, '& a': { textDecoration: 'none', + // @ts-expect-error color: theme.palette.footer.main, }, }, diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index 790ca05bb9..e594abe01e 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/frontend/src/component/menu/Header/Header.tsx @@ -13,11 +13,11 @@ import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; import { useStyles } from './Header.styles'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; import { IPermission } from 'interfaces/user'; import NavigationMenu from './NavigationMenu/NavigationMenu'; -import { getRoutes } from '../routes'; +import { getRoutes } from 'component/menu/routes'; import { KeyboardArrowDown } from '@material-ui/icons'; import { filterByFlags } from 'component/common/util'; import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions'; diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routesTest.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routesTest.jsx.snap index f2d51fff7c..cb918418a3 100644 --- a/frontend/src/component/menu/__tests__/__snapshots__/routesTest.jsx.snap +++ b/frontend/src/component/menu/__tests__/__snapshots__/routesTest.jsx.snap @@ -51,7 +51,6 @@ Array [ }, Object { "component": [Function], - "flags": "E", "menu": Object {}, "parent": "/projects", "path": "/projects/:projectId/features/:featureId", diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.ts similarity index 96% rename from frontend/src/component/menu/routes.js rename to frontend/src/component/menu/routes.ts index da4cd16690..e7eeb78878 100644 --- a/frontend/src/component/menu/routes.js +++ b/frontend/src/component/menu/routes.ts @@ -10,7 +10,7 @@ import AdminInvoice from 'component/admin/invoice/InvoiceAdminPage'; import AdminUsers from 'component/admin/users/UsersAdmin'; import { AuthSettings } from 'component/admin/auth/AuthSettings'; import Login from 'component/user/Login/Login'; -import { C, E, EEA, P, RE, SE } from 'component/common/flags'; +import { C, EEA, P, RE, SE } from 'component/common/flags'; import { NewUser } from 'component/user/NewUser/NewUser'; import ResetPassword from 'component/user/ResetPassword/ResetPassword'; import ForgottenPassword from 'component/user/ForgottenPassword/ForgottenPassword'; @@ -50,8 +50,26 @@ import { CreateUnleashContextPage } from 'component/context/CreateUnleashContext import { CreateSegment } from 'component/segments/CreateSegment/CreateSegment'; import { EditSegment } from 'component/segments/EditSegment/EditSegment'; import { SegmentsList } from 'component/segments/SegmentList/SegmentList'; +import { FunctionComponent } from 'react'; -export const routes = [ +interface Route { + path: string; + title: string; + type: string; + layout?: string; + parent?: string; + flag?: string; + hidden?: Boolean; + component: FunctionComponent; + + menu: { + mobile?: boolean; + advanced?: boolean; + adminSettings?: boolean; + }; +} + +export const routes: Route[] = [ // Splash { path: '/splash/:splashId', @@ -108,7 +126,6 @@ export const routes = [ title: 'FeatureView', component: FeatureView, type: 'protected', - flags: E, menu: {}, }, { @@ -516,7 +533,8 @@ export const routes = [ }, ]; -export const getRoute = path => routes.find(route => route.path === path); +export const getRoute = (path: string) => + routes.find(route => route.path === path); export const baseRoutes = routes.filter(route => !route.hidden); diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx index 4f582b6c7b..cafdcda186 100644 --- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx +++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx @@ -4,7 +4,7 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import classnames from 'classnames'; import { Edit, ExpandMore } from '@material-ui/icons'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx index 266897fde9..6f378fe825 100644 --- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx +++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx @@ -21,7 +21,7 @@ import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch import { IProjectEnvironment } from 'interfaces/environments'; import { getEnabledEnvs } from './helpers'; import StringTruncator from 'component/common/StringTruncator/StringTruncator'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; interface ProjectEnvironmentListProps { projectId: string; diff --git a/frontend/src/component/scrollToTop.jsx b/frontend/src/component/scrollToTop.jsx deleted file mode 100644 index 7c339417ba..0000000000 --- a/frontend/src/component/scrollToTop.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from 'react'; -import { withRouter } from 'react-router-dom'; -import PropTypes from 'prop-types'; - -class ScrollToTop extends Component { - static propTypes = { - location: PropTypes.object.isRequired, - }; - - componentDidUpdate(prevProps) { - if (this.props.location.pathname !== prevProps.location.pathname) { - if ( - this.props.location.pathname.includes('/features/metrics') || - this.props.location.pathname.includes('/features/variants') || - this.props.location.pathname.includes('/features/strategies') || - this.props.location.pathname.includes('/logs') || - this.props.location.pathname.includes('/admin/api') || - this.props.location.pathname.includes('/admin/users') || - this.props.location.pathname.includes('/admin/auth') - ) { - return; - } - - window.scrollTo(0, 0); - } - } - - render() { - return this.props.children; - } -} - -export default withRouter(ScrollToTop); diff --git a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx index f9f48f2484..abd5afcdec 100644 --- a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx +++ b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx @@ -7,7 +7,7 @@ import { FiberManualRecordOutlined, } from '@material-ui/icons'; import ConditionallyRender from 'component/common/ConditionallyRender'; -import { CLOSE_SPLASH } from 'testIds'; +import { CLOSE_SPLASH } from 'utils/testIds'; interface ISplashPageEnvironmentsContentProps { components: React.ReactNode[]; diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx index fe1017abe3..1b7c8f0e58 100644 --- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx +++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx @@ -28,7 +28,7 @@ import HeaderTitle from 'component/common/HeaderTitle'; import { useStyles } from './StrategiesList.styles'; import AccessContext from 'contexts/AccessContext'; import Dialogue from 'component/common/Dialogue'; -import { ADD_NEW_STRATEGY_ID } from 'testIds'; +import { ADD_NEW_STRATEGY_ID } from 'utils/testIds'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import PermissionButton from 'component/common/PermissionButton/PermissionButton'; import { formatStrategyName } from 'utils/strategyNames'; diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.jsx b/frontend/src/component/user/DemoAuth/DemoAuth.jsx index 57d6372fd9..0427971076 100644 --- a/frontend/src/component/user/DemoAuth/DemoAuth.jsx +++ b/frontend/src/component/user/DemoAuth/DemoAuth.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { Button, TextField } from '@material-ui/core'; import styles from './DemoAuth.module.scss'; import { ReactComponent as Logo } from 'assets/img/logo.svg'; -import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'testIds'; +import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'utils/testIds'; import { useHistory } from 'react-router-dom'; import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi'; import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx index 0b55a63942..3bd668738f 100644 --- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx +++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx @@ -3,9 +3,9 @@ import { AlertTitle, Alert } from '@material-ui/lab'; import classnames from 'classnames'; import { SyntheticEvent, useState } from 'react'; import { Link } from 'react-router-dom'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import useLoading from 'hooks/useLoading'; -import { FORGOTTEN_PASSWORD_FIELD } from 'testIds'; +import { FORGOTTEN_PASSWORD_FIELD } from 'utils/testIds'; import { formatApiPath } from 'utils/formatPath'; import ConditionallyRender from 'component/common/ConditionallyRender'; import DividerText from 'component/common/DividerText/DividerText'; diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx index dd2cfdb667..22778f39d2 100644 --- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx +++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx @@ -3,7 +3,7 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import { Button, Grid, TextField, Typography } from '@material-ui/core'; import { useHistory } from 'react-router'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { useStyles } from './HostedAuth.styles'; import useQueryParams from 'hooks/useQueryParams'; import AuthOptions from '../common/AuthOptions/AuthOptions'; @@ -12,7 +12,7 @@ import ConditionallyRender from 'component/common/ConditionallyRender'; import PasswordField from 'component/common/PasswordField/PasswordField'; import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi'; import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; -import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'testIds'; +import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'utils/testIds'; const HostedAuth = ({ authDetails, redirect }) => { const commonStyles = useCommonStyles(); diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.styles.js b/frontend/src/component/user/HostedAuth/HostedAuth.styles.ts similarity index 90% rename from frontend/src/component/user/HostedAuth/HostedAuth.styles.js rename to frontend/src/component/user/HostedAuth/HostedAuth.styles.ts index d54a934609..d92b51b676 100644 --- a/frontend/src/component/user/HostedAuth/HostedAuth.styles.js +++ b/frontend/src/component/user/HostedAuth/HostedAuth.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ loginContainer: { diff --git a/frontend/src/component/user/Login/Login.styles.js b/frontend/src/component/user/Login/Login.styles.ts similarity index 91% rename from frontend/src/component/user/Login/Login.styles.js rename to frontend/src/component/user/Login/Login.styles.ts index 24ab08df8d..907203b2cf 100644 --- a/frontend/src/component/user/Login/Login.styles.js +++ b/frontend/src/component/user/Login/Login.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ login: { @@ -27,7 +27,9 @@ export const useStyles = makeStyles(theme => ({ }, }, gradient: { + // @ts-expect-error background: `linear-gradient(${theme.palette.login.gradient.top}, ${theme.palette.login.gradient.bottom})`, + // @ts-expect-error color: theme.palette.login.main, }, title: { diff --git a/frontend/src/component/user/Login/Login.tsx b/frontend/src/component/user/Login/Login.tsx index 97e72fd77c..e1e7ce3664 100644 --- a/frontend/src/component/user/Login/Login.tsx +++ b/frontend/src/component/user/Login/Login.tsx @@ -1,5 +1,5 @@ import ConditionallyRender from 'component/common/ConditionallyRender'; -import { useStyles } from './Login.styles'; +import { useStyles } from 'component/user/Login/Login.styles'; import useQueryParams from 'hooks/useQueryParams'; import ResetPasswordSuccess from '../common/ResetPasswordSuccess/ResetPasswordSuccess'; import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout'; diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx index 103bcdc159..99bf95c802 100644 --- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx +++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx @@ -4,13 +4,13 @@ import PropTypes from 'prop-types'; import { Button, TextField } from '@material-ui/core'; import ConditionallyRender from 'component/common/ConditionallyRender'; import { useHistory } from 'react-router'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { useStyles } from './PasswordAuth.styles'; import useQueryParams from 'hooks/useQueryParams'; import AuthOptions from '../common/AuthOptions/AuthOptions'; import DividerText from 'component/common/DividerText/DividerText'; import { Alert } from '@material-ui/lab'; -import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'testIds'; +import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'utils/testIds'; import PasswordField from 'component/common/PasswordField/PasswordField'; import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi'; import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.js b/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.ts similarity index 88% rename from frontend/src/component/user/PasswordAuth/PasswordAuth.styles.js rename to frontend/src/component/user/PasswordAuth/PasswordAuth.styles.ts index 2b7c9379af..6b99f0cecd 100644 --- a/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.js +++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ loginContainer: { diff --git a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx index 00d87d9d16..3f4571b648 100644 --- a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx +++ b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx @@ -5,7 +5,7 @@ import styles from './SimpleAuth.module.scss'; import { useHistory } from 'react-router-dom'; import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi'; import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; -import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'testIds'; +import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'utils/testIds'; import useToast from 'hooks/useToast'; import { formatUnknownError } from 'utils/formatUnknownError'; diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx index 954a93849e..751ab06de0 100644 --- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx +++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx @@ -2,7 +2,7 @@ import React, { SyntheticEvent, useState } from 'react'; import { Button, Typography } from '@material-ui/core'; import classnames from 'classnames'; import { useStyles } from './EditProfile.styles'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker'; import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher'; import { Alert } from '@material-ui/lab'; diff --git a/frontend/src/component/user/UserProfile/UserProfile.styles.js b/frontend/src/component/user/UserProfile/UserProfile.styles.ts similarity index 81% rename from frontend/src/component/user/UserProfile/UserProfile.styles.js rename to frontend/src/component/user/UserProfile/UserProfile.styles.ts index 304de4bee3..cb31099887 100644 --- a/frontend/src/component/user/UserProfile/UserProfile.styles.js +++ b/frontend/src/component/user/UserProfile/UserProfile.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles({ userProfileMenu: { diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx index 1c0e578eb0..8526530fce 100644 --- a/frontend/src/component/user/UserProfile/UserProfile.tsx +++ b/frontend/src/component/user/UserProfile/UserProfile.tsx @@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react'; import classnames from 'classnames'; import { Avatar, Button, ClickAwayListener } from '@material-ui/core'; import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; -import { useStyles } from './UserProfile.styles'; -import { useCommonStyles } from 'common.styles'; +import { useStyles } from 'component/user/UserProfile/UserProfile.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import UserProfileContent from './UserProfileContent/UserProfileContent'; import { IUser } from 'interfaces/user'; import { ILocationSettings } from 'hooks/useLocationSettings'; -import { HEADER_USER_AVATAR } from 'testIds'; +import { HEADER_USER_AVATAR } from 'utils/testIds'; interface IUserProfileProps { profile: IUser; diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.js b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.ts similarity index 93% rename from frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.js rename to frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.ts index 07446f1bff..791e2ee568 100644 --- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.js +++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ profile: { diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx index 30528cd6d6..fe11d22dcb 100644 --- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx +++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx @@ -10,8 +10,8 @@ import { Typography, } from '@material-ui/core'; import classnames from 'classnames'; -import { useStyles } from './UserProfileContent.styles'; -import { useCommonStyles } from 'common.styles'; +import { useStyles } from 'component/user/UserProfile/UserProfileContent/UserProfileContent.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { Alert } from '@material-ui/lab'; import EditProfile from '../EditProfile/EditProfile'; import legacyStyles from '../../user.module.scss'; diff --git a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx index c1c3b6eb39..56a48d9c00 100644 --- a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx +++ b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx @@ -1,11 +1,11 @@ import { Button } from '@material-ui/core'; import classnames from 'classnames'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { ReactComponent as GoogleSvg } from 'assets/icons/google.svg'; import LockRounded from '@material-ui/icons/LockRounded'; import ConditionallyRender from 'component/common/ConditionallyRender'; import { IAuthOptions } from 'hooks/api/getters/useAuth/useAuthEndpoint'; -import { SSO_LOGIN_BUTTON } from 'testIds'; +import { SSO_LOGIN_BUTTON } from 'utils/testIds'; interface IAuthOptionProps { options?: IAuthOptions[]; diff --git a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx index 9a416d8223..77c634e1d4 100644 --- a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx +++ b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx @@ -1,7 +1,7 @@ import { Button, Typography } from '@material-ui/core'; import { Link } from 'react-router-dom'; -import { INVALID_TOKEN_BUTTON } from 'testIds'; -import { useCommonStyles } from 'common.styles'; +import { INVALID_TOKEN_BUTTON } from 'utils/testIds'; +import { useCommonStyles } from 'themes/commonStyles'; import classnames from 'classnames'; const InvalidToken = () => { diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx index ecd62fd5ba..5c5846aff4 100644 --- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx +++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx @@ -9,7 +9,7 @@ import React, { useState, } from 'react'; import { useHistory } from 'react-router'; -import { useCommonStyles } from 'common.styles'; +import { useCommonStyles } from 'themes/commonStyles'; import { OK } from 'constants/statusCodes'; import ConditionallyRender from 'component/common/ConditionallyRender'; import ResetPasswordError from '../ResetPasswordError/ResetPasswordError'; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 3162a15978..651340d586 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,5 +1,5 @@ import 'whatwg-fetch'; -import './app.css'; +import 'themes/app.css'; import ReactDOM from 'react-dom'; import { Route, BrowserRouter as Router } from 'react-router-dom'; @@ -8,12 +8,12 @@ import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; import { StylesProvider } from '@material-ui/core/styles'; import mainTheme from 'themes/mainTheme'; -import { App } from './component/App'; -import ScrollToTop from 'component/scrollToTop'; -import AccessProvider from './component/providers/AccessProvider/AccessProvider'; +import { App } from 'component/App'; +import { ScrollTop } from 'component/common/ScrollTop/ScrollTop'; +import AccessProvider from 'component/providers/AccessProvider/AccessProvider'; import { getBasePath } from 'utils/formatPath'; -import UIProvider from './component/providers/UIProvider/UIProvider'; import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider'; +import UIProvider from 'component/providers/UIProvider/UIProvider'; ReactDOM.render( @@ -24,9 +24,8 @@ ReactDOM.render( - - - + + diff --git a/frontend/src/securityLogger.js b/frontend/src/securityLogger.js deleted file mode 100644 index 7f0197b956..0000000000 --- a/frontend/src/securityLogger.js +++ /dev/null @@ -1,9 +0,0 @@ -export const writeWarning = () => { - // eslint-disable-next-line no-console - console.log( - `%cThis is a warning! -Please do not use any JavaScript using copy/paste -from elsewhere on the web or any person.`, - 'color:white;font-size: 1.8em;background:red' - ); -}; diff --git a/frontend/src/app.css b/frontend/src/themes/app.css similarity index 100% rename from frontend/src/app.css rename to frontend/src/themes/app.css diff --git a/frontend/src/common.styles.ts b/frontend/src/themes/commonStyles.ts similarity index 100% rename from frontend/src/common.styles.ts rename to frontend/src/themes/commonStyles.ts diff --git a/frontend/src/testIds.js b/frontend/src/utils/testIds.ts similarity index 100% rename from frontend/src/testIds.js rename to frontend/src/utils/testIds.ts