+
+
+ {availableRoutes.map(route => (
+
+
+
+ }
+ />
+
+ + Sensitive parameters will be masked with value "***** + ". If you don't change the value they will not be updated + when saving. +
+ ) : null} + {provider.parameters.map(parameter => ( +Are you sure you want to delete this Addon?
+
+
+ );
+};
+
+export default ApiPage;
diff --git a/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx b/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx
new file mode 100644
index 0000000000..f33c9a7282
--- /dev/null
+++ b/frontend/src/component/admin/apiToken/ApiTokenDocs/ApiTokenDocs.tsx
@@ -0,0 +1,27 @@
+import { Alert } from '@mui/material';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+
+export const ApiTokenDocs = () => {
+ const { uiConfig } = useUiConfig();
+
+ return (
+ + Read the{' '} + + SDK overview + {' '} + to connect Unleash to your application. Please note it can take + up to 1 minute before a new API key is + activated. +
++ API URL: {' '} +
{uiConfig.unleashUrl}/api/
+
+
+ Your new token has been created successfully.
+
+
+
+ {token}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/admin/apiToken/CopyApiTokenButton/CopyApiTokenButton.tsx b/frontend/src/component/admin/apiToken/CopyApiTokenButton/CopyApiTokenButton.tsx
new file mode 100644
index 0000000000..e34e3501fb
--- /dev/null
+++ b/frontend/src/component/admin/apiToken/CopyApiTokenButton/CopyApiTokenButton.tsx
@@ -0,0 +1,30 @@
+import { IconButton, Tooltip } from '@mui/material';
+import { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
+import useToast from 'hooks/useToast';
+import copy from 'copy-to-clipboard';
+import { FileCopy } from '@mui/icons-material';
+
+interface ICopyApiTokenButtonProps {
+ token: IApiToken;
+}
+
+export const CopyApiTokenButton = ({ token }: ICopyApiTokenButtonProps) => {
+ const { setToastData } = useToast();
+
+ const copyToken = (value: string) => {
+ if (copy(value)) {
+ setToastData({
+ type: 'success',
+ title: `Token copied to clipboard`,
+ });
+ }
+ };
+
+ return (
+
+ Are you sure you want to delete the following API token?
+
+
+ +
-
+
-
+ username:{' '}
+
{token.username}+
+ -
+ type:
{token.type}+
+
+
+
+ You are running the open-source version of Unleash.
+ You have to use the Enterprise edition in order
+ configure Single Sign-on.
+
+ }
+ />
+
+ You are running Unleash in demo mode. You have to
+ use the Enterprise edition in order configure Single
+ Sign-on.
+
+ }
+ />
+
+ You have decided to use custom authentication type.
+ You have to use the Enterprise edition in order
+ configure Single Sign-on from the user interface.
+
+ }
+ />
+
+ Your Unleash instance is managed by the Unleash
+ team.
+
+ }
+ />
+
+
+ );
+};
diff --git a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
new file mode 100644
index 0000000000..bc89340ad6
--- /dev/null
+++ b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
@@ -0,0 +1,119 @@
+import React, { ChangeEvent, Fragment } from 'react';
+import {
+ FormControl,
+ FormControlLabel,
+ Grid,
+ InputLabel,
+ MenuItem,
+ Select,
+ Switch,
+ TextField,
+ SelectChangeEvent,
+} from '@mui/material';
+
+interface IAutoCreateFormProps {
+ data?: {
+ enabled: boolean;
+ autoCreate: boolean;
+ defaultRootRole?: string;
+ emailDomains?: string;
+ };
+ setValue: (name: string, value: string | boolean) => void;
+}
+
+export const AutoCreateForm = ({
+ data = { enabled: false, autoCreate: false },
+ setValue,
+}: IAutoCreateFormProps) => {
+ const updateAutoCreate = () => {
+ setValue('autoCreate', !data.autoCreate);
+ };
+
+ const updateDefaultRootRole = (evt: SelectChangeEvent) => {
+ setValue('defaultRootRole', evt.target.value);
+ };
+
+ const updateField = (e: ChangeEvent+ Enable automatic creation of new users when signing in. +
++ Choose which root role the user should get when no + explicit role mapping exists. +
++ Comma separated list of email domains that should be + allowed to sign in. +
++ Callback URL:{' '} +
{uiConfig.unleashUrl}/auth/google/callback
+ + Callback URL:{' '} +
{uiConfig.unleashUrl}/auth/oidc/callback
+ + Callback URL:{' '} +
{uiConfig.unleashUrl}/auth/saml/callback
+
+
+ (
+ <>
+
+ Billing is not enabled for this instance.
+
+ }
+ />
+
+
+ );
+};
diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingDashboard.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingDashboard.tsx
new file mode 100644
index 0000000000..179f1d2bb3
--- /dev/null
+++ b/frontend/src/component/admin/billing/BillingDashboard/BillingDashboard.tsx
@@ -0,0 +1,20 @@
+import { Grid } from '@mui/material';
+import { IInstanceStatus } from 'interfaces/instance';
+import { VFC } from 'react';
+import { BillingInformation } from './BillingInformation/BillingInformation';
+import { BillingPlan } from './BillingPlan/BillingPlan';
+
+interface IBillingDashboardProps {
+ instanceStatus: IInstanceStatus;
+}
+
+export const BillingDashboard: VFC
+ Use this page to configure allowed CORS origins for the Frontend
+ API (/api/frontend).
+
+ This configuration will not affect the Admin API (
+ /api/admin) nor the Client API (
+ /api/client).
+
+ An asterisk (*) may be used to allow API calls from
+ any origin.
+
+
+ );
+};
+
+const CorsPage = () => {
+ const { uiConfig, loading } = useUiConfig();
+
+ if (loading) {
+ return null;
+ }
+
+ return (
+
+
+ Edit users in this group
+
+
+
+
+
+ What would you like to call your group?
+
+ setName(e.target.value)}
+ data-testid={UG_NAME_ID}
+ required
+ />
+
+ How would you describe your group?
+
+ setDescription(e.target.value)}
+ data-testid={UG_DESC_ID}
+ />
+
+
+ Add users to this group
+
+
+
+
+ }
+ />
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
new file mode 100644
index 0000000000..b9f0cc5d13
--- /dev/null
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -0,0 +1,165 @@
+import { styled, Tooltip } from '@mui/material';
+import { IGroup } from 'interfaces/group';
+import { Link, useNavigate } from 'react-router-dom';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { GroupCardAvatars } from './GroupCardAvatars/GroupCardAvatars';
+import { Badge } from 'component/common/Badge/Badge';
+import { GroupCardActions } from './GroupCardActions/GroupCardActions';
+import { RemoveGroup } from 'component/admin/groups/RemoveGroup/RemoveGroup';
+import { useState } from 'react';
+import TopicOutlinedIcon from '@mui/icons-material/TopicOutlined';
+import { EditGroupUsers } from 'component/admin/groups/Group/EditGroupUsers/EditGroupUsers';
+
+const StyledLink = styled(Link)(({ theme }) => ({
+ textDecoration: 'none',
+ color: theme.palette.text.primary,
+}));
+
+const StyledGroupCard = styled('aside')(({ theme }) => ({
+ padding: theme.spacing(2.5),
+ height: '100%',
+ border: `1px solid ${theme.palette.dividerAlternative}`,
+ borderRadius: theme.shape.borderRadiusLarge,
+ boxShadow: theme.boxShadows.card,
+ display: 'flex',
+ flexDirection: 'column',
+ [theme.breakpoints.up('md')]: {
+ padding: theme.spacing(4),
+ },
+ '&:hover': {
+ transition: 'background-color 0.2s ease-in-out',
+ backgroundColor: theme.palette.neutral.light,
+ },
+}));
+
+const StyledRow = styled('div')(() => ({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+}));
+
+const StyledTitleRow = styled(StyledRow)(() => ({
+ alignItems: 'flex-start',
+}));
+
+const StyledBottomRow = styled(StyledRow)(() => ({
+ marginTop: 'auto',
+}));
+
+const StyledHeaderTitle = styled('h2')(({ theme }) => ({
+ fontSize: theme.fontSizes.mainHeader,
+ fontWeight: theme.fontWeight.medium,
+}));
+
+const StyledHeaderActions = styled('div')(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ color: theme.palette.text.secondary,
+ fontSize: theme.fontSizes.smallBody,
+}));
+
+const StyledDescription = styled('p')(({ theme }) => ({
+ color: theme.palette.text.secondary,
+ fontSize: theme.fontSizes.smallBody,
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(4),
+}));
+
+const StyledCounterDescription = styled('span')(({ theme }) => ({
+ color: theme.palette.text.secondary,
+ marginLeft: theme.spacing(1),
+}));
+
+const ProjectBadgeContainer = styled('div')(() => ({
+ maxWidth: '50%',
+}));
+
+const StyledBadge = styled(Badge)(() => ({
+ marginRight: 0.5,
+}));
+
+interface IGroupCardProps {
+ group: IGroup;
+}
+
+export const GroupCard = ({ group }: IGroupCardProps) => {
+ const [editUsersOpen, setEditUsersOpen] = useState(false);
+ const [removeOpen, setRemoveOpen] = useState(false);
+ const navigate = useNavigate();
+ return (
+ <>
+ {user?.email}
+
+
+ You need to be instance admin to access this section.
+
+ }
+ />
+
+ );
+};
+
+export default InvoiceAdminPage;
diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx
new file mode 100644
index 0000000000..136706ca32
--- /dev/null
+++ b/frontend/src/component/admin/invoice/InvoiceList.tsx
@@ -0,0 +1,122 @@
+import { useEffect, useState } from 'react';
+import {
+ Table,
+ TableHead,
+ TableBody,
+ TableRow,
+ TableCell,
+ Button,
+} from '@mui/material';
+import OpenInNew from '@mui/icons-material/OpenInNew';
+import { PageContent } from 'component/common/PageContent/PageContent';
+import { PageHeader } from 'component/common/PageHeader/PageHeader';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { formatApiPath } from 'utils/formatPath';
+import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
+import { IInvoice } from 'interfaces/invoice';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import { formatDateYMD } from 'utils/formatDate';
+
+const PORTAL_URL = formatApiPath('api/admin/invoices/portal');
+
+const InvoiceList = () => {
+ const { refetchInvoices, invoices } = useInvoices();
+ const [isLoaded, setLoaded] = useState(false);
+ const { locationSettings } = useLocationSettings();
+
+ useEffect(() => {
+ refetchInvoices();
+ setLoaded(true);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+
+
+
+ }
+ elseShow={{isLoaded && 'No invoices to show.'}
}
+ />
+ );
+};
+export default InvoiceList;
diff --git a/frontend/src/component/admin/menu/AdminMenu.tsx b/frontend/src/component/admin/menu/AdminMenu.tsx
new file mode 100644
index 0000000000..f85102eb9c
--- /dev/null
+++ b/frontend/src/component/admin/menu/AdminMenu.tsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { Paper, Tab, Tabs } from '@mui/material';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
+
+const navLinkStyle = {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: '100%',
+ textDecoration: 'none',
+ color: 'inherit',
+ padding: '0.8rem 1.5rem',
+};
+
+const activeNavLinkStyle: React.CSSProperties = {
+ fontWeight: 'bold',
+ borderRadius: '3px',
+ padding: '0.8rem 1.5rem',
+};
+
+const createNavLinkStyle = (props: {
+ isActive: boolean;
+}): React.CSSProperties => {
+ return props.isActive
+ ? { ...navLinkStyle, ...activeNavLinkStyle }
+ : navLinkStyle;
+};
+
+function AdminMenu() {
+ const { uiConfig } = useUiConfig();
+ const { pathname } = useLocation();
+ const { isBilling } = useInstanceStatus();
+ const { flags } = uiConfig;
+
+ return (
+
+
+
+ {renderPermissions()}
+
+
+
+ );
+};
+
+export default EnvironmentPermissionAccordion;
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts
new file mode 100644
index 0000000000..55eca794a7
--- /dev/null
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts
@@ -0,0 +1,41 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ container: {
+ maxWidth: '400px',
+ },
+ input: { width: '100%', marginBottom: '1rem' },
+ label: {
+ minWidth: '300px',
+ [theme.breakpoints.down(600)]: {
+ minWidth: 'auto',
+ },
+ },
+ buttonContainer: {
+ marginTop: 'auto',
+ display: 'flex',
+ justifyContent: 'flex-end',
+ },
+ cancelButton: {
+ marginLeft: '1.5rem',
+ },
+ inputDescription: {
+ marginBottom: '0.5rem',
+ },
+ formHeader: {
+ fontWeight: 'normal',
+ marginTop: '0',
+ },
+ header: {
+ fontWeight: 'normal',
+ },
+ permissionErrorContainer: {
+ position: 'relative',
+ },
+ errorMessage: {
+ fontSize: theme.fontSizes.smallBody,
+ color: theme.palette.error.main,
+ position: 'absolute',
+ top: '-8px',
+ },
+}));
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
new file mode 100644
index 0000000000..c1244c38fa
--- /dev/null
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
@@ -0,0 +1,179 @@
+import Input from 'component/common/Input/Input';
+import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion';
+import { Button, Checkbox, FormControlLabel, TextField } from '@mui/material';
+import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
+
+import { useStyles } from './ProjectRoleForm.styles';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import React, { ReactNode } from 'react';
+import { IPermission } from 'interfaces/project';
+import {
+ ICheckedPermission,
+ PROJECT_CHECK_ALL_KEY,
+} from '../hooks/useProjectRoleForm';
+
+interface IProjectRoleForm {
+ roleName: string;
+ roleDesc: string;
+ setRoleName: React.Dispatch
+
+
+ + ({permissionCount} /{' '} + {environment?.permissions?.length} permissions) +
++ In order to delete this role, please enter the name of the role + in the textfield below: {role?.name} +
+ + +
+
+ );
+};
+
+export default ProjectRoles;
diff --git a/frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts b/frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts
new file mode 100644
index 0000000000..3b364813dc
--- /dev/null
+++ b/frontend/src/component/admin/projectRoles/hooks/useProjectRoleForm.ts
@@ -0,0 +1,271 @@
+import { useEffect, useState } from 'react';
+import { IPermission } from 'interfaces/project';
+import cloneDeep from 'lodash.clonedeep';
+import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
+import useProjectRolesApi from 'hooks/api/actions/useProjectRolesApi/useProjectRolesApi';
+import { formatUnknownError } from 'utils/formatUnknownError';
+
+export interface ICheckedPermission {
+ [key: string]: IPermission;
+}
+
+export const PROJECT_CHECK_ALL_KEY = 'check-all-project';
+export const ENVIRONMENT_CHECK_ALL_KEY = 'check-all-environment';
+
+const useProjectRoleForm = (
+ initialRoleName = '',
+ initialRoleDesc = '',
+ initialCheckedPermissions = {}
+) => {
+ const { permissions } = useProjectRolePermissions({
+ revalidateIfStale: false,
+ revalidateOnReconnect: false,
+ revalidateOnFocus: false,
+ });
+
+ const [roleName, setRoleName] = useState(initialRoleName);
+ const [roleDesc, setRoleDesc] = useState(initialRoleDesc);
+ const [checkedPermissions, setCheckedPermissions] =
+ useState
+
+
+
+ A new team member has been added. Please provide them with
+ the following link to get started:
+
+
+ Copy the link and send it to the user. This will allow them
+ to set up their password and get started with their Unleash
+ account.
+
+
+
+ Want to avoid this step in the future?{' '}
+ {/* TODO - ADD LINK HERE ONCE IT EXISTS*/}
+
+ If you configure an email server for Unleash
+ {' '}
+ we'll automatically send informational getting started
+ emails to new users once you add them.
+
+
+
+
+ {inviteLink}
+
+
+
+
+
+ );
+};
+
+export default UserInviteLink;
diff --git a/frontend/src/component/admin/users/CreateUser/CreateUser.tsx b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx
new file mode 100644
index 0000000000..41ce786603
--- /dev/null
+++ b/frontend/src/component/admin/users/CreateUser/CreateUser.tsx
@@ -0,0 +1,115 @@
+import FormTemplate from 'component/common/FormTemplate/FormTemplate';
+import { useNavigate } from 'react-router-dom';
+import UserForm from '../UserForm/UserForm';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
+import useToast from 'hooks/useToast';
+import useAddUserForm from '../hooks/useAddUserForm';
+import ConfirmUserAdded from '../ConfirmUserAdded/ConfirmUserAdded';
+import { useState } from 'react';
+import { scrollToTop } from 'component/common/util';
+import { CreateButton } from 'component/common/CreateButton/CreateButton';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import { formatUnknownError } from 'utils/formatUnknownError';
+import { GO_BACK } from 'constants/navigate';
+
+const CreateUser = () => {
+ const { setToastApiError } = useToast();
+ const { uiConfig } = useUiConfig();
+ const navigate = useNavigate();
+ const {
+ name,
+ setName,
+ email,
+ setEmail,
+ sendEmail,
+ setSendEmail,
+ rootRole,
+ setRootRole,
+ getAddUserPayload,
+ validateName,
+ validateEmail,
+ errors,
+ clearErrors,
+ } = useAddUserForm();
+ const [showConfirm, setShowConfirm] = useState(false);
+ const [inviteLink, setInviteLink] = useState('');
+
+ const { addUser, userLoading: loading } = useAdminUsersApi();
+
+ const handleSubmit = async (e: Event) => {
+ e.preventDefault();
+ clearErrors();
+ const validName = validateName();
+ const validEmail = validateEmail();
+
+ if (validName && validEmail) {
+ const payload = getAddUserPayload();
+ try {
+ await addUser(payload)
+ .then(res => res.json())
+ .then(user => {
+ scrollToTop();
+ setInviteLink(user.inviteLink);
+ setShowConfirm(true);
+ });
+ } catch (error: unknown) {
+ setToastApiError(formatUnknownError(error));
+ }
+ }
+ };
+ const closeConfirm = () => {
+ setShowConfirm(false);
+ navigate('/admin/users');
+ };
+
+ const formatApiCode = () => {
+ return `curl --location --request POST '${
+ uiConfig.unleashUrl
+ }/api/admin/user-admin' \\
+--header 'Authorization: INSERT_API_KEY' \\
+--header 'Content-Type: application/json' \\
+--data-raw '${JSON.stringify(getAddUserPayload(), undefined, 2)}'`;
+ };
+
+ const handleCancel = () => {
+ navigate(GO_BACK);
+ };
+
+ return (
+
+
+ );
+};
+
+export default UsersAdmin;
diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
new file mode 100644
index 0000000000..251e9f7d43
--- /dev/null
+++ b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { styled, TextField, Typography } from '@mui/material';
+import { trim } from 'component/common/util';
+import { modalStyles } from 'component/admin/users/util';
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import PasswordChecker, {
+ PASSWORD_FORMAT_MESSAGE,
+} from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
+import { useThemeStyles } from 'themes/themeStyles';
+import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
+import { IUser } from 'interfaces/user';
+import useAdminUsersApi from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
+import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+
+const StyledUserAvatar = styled(UserAvatar)(({ theme }) => ({
+ width: theme.spacing(5),
+ height: theme.spacing(5),
+ margin: 0,
+}));
+
+interface IChangePasswordProps {
+ showDialog: boolean;
+ closeDialog: () => void;
+ user: IUser;
+}
+
+const ChangePassword = ({
+ showDialog,
+ closeDialog,
+ user,
+}: IChangePasswordProps) => {
+ const [data, setData] = useState
+
+ {userApiErrors[REMOVE_USER_ERROR]}
+
+ }
+ />
+
+ Are you sure you want to delete{' '}
+ {user
+ ? `${user.name || 'user'} (${
+ user.email || user.username
+ })`
+ : ''}
+ ?
+
+
+
+
+ {user.username || user.email}
+
+
+
+
+ );
+ } else if (!application) {
+ return Loading...
+Application ({appName}) not found
; + } + return ( +
+ {description || ''}
+
+ Created: {formatDate(createdAt)}
+
+
+ +
+ Oh snap, it does not seem like you have connected any + applications. To connect your application to Unleash you will + require a Client SDK. +
+
+ You can read more about how to use Unleash in your application + in the{' '} + + documentation. + +
+ 0}
+ show={...loading
}
+ elseShow={renderNoApplications()}
+ />
+ }
+ />
+
+
+
+ );
+};
diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
new file mode 100644
index 0000000000..da4793dbc9
--- /dev/null
+++ b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
@@ -0,0 +1,85 @@
+import { ChangeEvent, useState } from 'react';
+import { Grid, TextField } from '@mui/material';
+import { useThemeStyles } from 'themes/themeStyles';
+import icons from 'component/application/iconNames';
+import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
+import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
+import useToast from 'hooks/useToast';
+import { IApplication } from 'interfaces/application';
+import useApplication from 'hooks/api/getters/useApplication/useApplication';
+import { formatUnknownError } from 'utils/formatUnknownError';
+
+interface IApplicationUpdateProps {
+ application: IApplication;
+}
+
+export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
+ const { storeApplicationMetaData } = useApplicationsApi();
+ const { appName, icon, url, description } = application;
+ const { refetchApplication } = useApplication(appName);
+ const [localUrl, setLocalUrl] = useState(url || '');
+ const [localDescription, setLocalDescription] = useState(description || '');
+ const { setToastData, setToastApiError } = useToast();
+ const { classes: themeStyles } = useThemeStyles();
+
+ const onChange = async (
+ field: string,
+ value: string,
+ event?: ChangeEvent
+ ) => {
+ event?.preventDefault();
+ try {
+ await storeApplicationMetaData(appName, field, value);
+ refetchApplication();
+ setToastData({
+ type: 'success',
+ title: 'Updated Successfully',
+ text: `${field} successfully updated`,
+ });
+ } catch (error: unknown) {
+ setToastApiError(formatUnknownError(error));
+ }
+ };
+
+ return (
+ -
+ {seenToggles.map(
+ ({ name, description, notFound, project }, i) => (
+
-
+ {strategies.map(
+ ({ name, description, notFound }, i: number) => (
+
-
+ {instances.map(
+ ({
+ instanceId,
+ clientIp,
+ lastSeen,
+ sdkVersion,
+ }: {
+ instanceId: string;
+ clientIp: string;
+ lastSeen: string;
+ sdkVersion: string;
+ }) => (
+
+ {deletedFeature?.name} +
+ {announcement}
+
+ );
+};
diff --git a/frontend/src/component/common/Announcer/AnnouncerProvider/AnnouncerProvider.tsx b/frontend/src/component/common/Announcer/AnnouncerProvider/AnnouncerProvider.tsx
new file mode 100644
index 0000000000..a2fdc63e4f
--- /dev/null
+++ b/frontend/src/component/common/Announcer/AnnouncerProvider/AnnouncerProvider.tsx
@@ -0,0 +1,27 @@
+import React, { ReactElement, useMemo, useState, ReactNode } from 'react';
+import { AnnouncerContext } from '../AnnouncerContext/AnnouncerContext';
+import { AnnouncerElement } from 'component/common/Announcer/AnnouncerElement/AnnouncerElement';
+
+interface IAnnouncerProviderProps {
+ children: ReactNode;
+}
+
+export const AnnouncerProvider = ({
+ children,
+}: IAnnouncerProviderProps): ReactElement => {
+ const [announcement, setAnnouncement] = useState
+
+ );
+};
diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx
new file mode 100644
index 0000000000..b944542e25
--- /dev/null
+++ b/frontend/src/component/common/Badge/Badge.tsx
@@ -0,0 +1,90 @@
+import { styled, SxProps, Theme } from '@mui/material';
+import React, {
+ cloneElement,
+ FC,
+ ForwardedRef,
+ forwardRef,
+ ReactElement,
+ ReactNode,
+} from 'react';
+import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
+
+type Color = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'neutral';
+
+interface IBadgeProps {
+ color?: Color;
+ icon?: ReactElement;
+ className?: string;
+ sx?: SxProps
+
+
+
+ {type === 'error' ? (
+
+ );
+};
+
+export default CheckMarkBadge;
diff --git a/frontend/src/component/common/Codebox/Codebox.styles.ts b/frontend/src/component/common/Codebox/Codebox.styles.ts
new file mode 100644
index 0000000000..f1bbb2e8a2
--- /dev/null
+++ b/frontend/src/component/common/Codebox/Codebox.styles.ts
@@ -0,0 +1,27 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ container: {
+ backgroundColor: theme.palette.codebox,
+ padding: '1rem',
+ borderRadius: theme.shape.borderRadiusMedium,
+ position: 'relative',
+ maxHeight: '500px',
+ overflow: 'auto',
+ },
+ code: {
+ margin: 0,
+ wordBreak: 'break-all',
+ whiteSpace: 'pre-wrap',
+ color: theme.palette.formSidebarTextColor,
+ fontSize: 14,
+ },
+ icon: {
+ fill: '#fff',
+ },
+ iconButton: {
+ position: 'absolute',
+ bottom: '10px',
+ right: '20px',
+ },
+}));
diff --git a/frontend/src/component/common/Codebox/Codebox.tsx b/frontend/src/component/common/Codebox/Codebox.tsx
new file mode 100644
index 0000000000..76257cfb0e
--- /dev/null
+++ b/frontend/src/component/common/Codebox/Codebox.tsx
@@ -0,0 +1,17 @@
+import { useStyles } from './Codebox.styles';
+
+interface ICodeboxProps {
+ text: string;
+}
+
+const Codebox = ({ text }: ICodeboxProps) => {
+ const { classes: styles } = useStyles();
+
+ return (
+
+
+ );
+};
+
+export default Codebox;
diff --git a/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx b/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx
new file mode 100644
index 0000000000..b87028d087
--- /dev/null
+++ b/frontend/src/component/common/ConditionallyRender/ConditionallyRender.tsx
@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+
+interface IConditionallyRenderProps {
+ condition: boolean;
+ show: TargetElement;
+ elseShow?: TargetElement;
+}
+
+type TargetElement =
+ | JSX.Element
+ | JSX.Element[]
+ | RenderFunc
+ | ReactNode
+ | null;
+
+type RenderFunc = () => JSX.Element;
+
+export const ConditionallyRender = ({
+ condition,
+ show,
+ elseShow,
+}: IConditionallyRenderProps): JSX.Element | null => {
+ const handleFunction = (renderFunc: RenderFunc): JSX.Element | null => {
+ const result = renderFunc();
+ if (!result) {
+ /* eslint-disable-next-line */
+ console.warn(
+ 'Nothing was returned from your render function. Verify that you are returning a valid react component'
+ );
+ return null;
+ }
+ return result;
+ };
+
+ const isFunc = (param: TargetElement): boolean => {
+ return typeof param === 'function';
+ };
+
+ if (condition) {
+ if (isFunc(show)) {
+ return handleFunction(show as RenderFunc);
+ }
+
+ return show as JSX.Element;
+ }
+ if (!condition && elseShow) {
+ if (isFunc(elseShow)) {
+ return handleFunction(elseShow as RenderFunc);
+ }
+ return elseShow as JSX.Element;
+ }
+ return null;
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
new file mode 100644
index 0000000000..af577bd40e
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
@@ -0,0 +1,166 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ constraintIconContainer: {
+ backgroundColor: theme.palette.background.paper,
+ borderRadius: '50%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginRight: theme.spacing(1),
+ [theme.breakpoints.down(650)]: {
+ marginBottom: '1rem',
+ marginRight: 0,
+ },
+ },
+ constraintIcon: {
+ fill: '#fff',
+ },
+ accordion: {
+ border: `1px solid ${theme.palette.dividerAlternative}`,
+ borderRadius: theme.shape.borderRadiusMedium,
+ backgroundColor: theme.palette.constraintAccordion.background,
+ boxShadow: 'none',
+ margin: 0,
+ },
+ accordionRoot: {
+ '&:before': {
+ opacity: '0 !important',
+ },
+ },
+ accordionEdit: {
+ backgroundColor: theme.palette.constraintAccordion.editBackground,
+ },
+ headerMetaInfo: {
+ display: 'flex',
+ alignItems: 'stretch',
+ marginLeft: theme.spacing(1),
+ [theme.breakpoints.down(710)]: {
+ marginLeft: 0,
+ flexDirection: 'column',
+ alignItems: 'center',
+ width: '100%',
+ },
+ },
+ headerContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ width: '100%',
+ [theme.breakpoints.down(710)]: {
+ flexDirection: 'column',
+ alignItems: 'center',
+ position: 'relative',
+ },
+ },
+ headerValuesContainerWrapper: {
+ display: 'flex',
+ alignItems: 'stretch',
+ margin: 'auto 0',
+ },
+ headerValuesContainer: {
+ display: 'flex',
+ justifyContent: 'stretch',
+ margin: 'auto 0',
+ flexDirection: 'column',
+ marginLeft: theme.spacing(1),
+ [theme.breakpoints.down(710)]: {
+ marginLeft: 0,
+ },
+ },
+ headerValues: {
+ fontSize: theme.fontSizes.smallBody,
+ },
+ headerValuesExpand: {
+ fontSize: theme.fontSizes.smallBody,
+ marginTop: '4px',
+ color: theme.palette.primary.dark,
+ [theme.breakpoints.down(710)]: {
+ textAlign: 'center',
+ },
+ },
+ headerConstraintContainer: {
+ minWidth: '152px',
+ position: 'relative',
+ [theme.breakpoints.down(710)]: {
+ paddingRight: 0,
+ },
+ },
+ editingBadge: {
+ borderRadius: theme.shape.borderRadiusExtraLarge,
+ padding: '0.25rem 0.5rem',
+ backgroundColor: '#635DC5',
+ color: '#fff',
+ marginLeft: 'auto',
+ fontSize: '0.9rem',
+ [theme.breakpoints.down(650)]: {
+ position: 'absolute',
+ right: 0,
+ top: '-10px',
+ },
+ },
+ headerText: {
+ maxWidth: '400px',
+ fontSize: theme.fontSizes.smallBody,
+ [theme.breakpoints.down('xl')]: {
+ display: 'none',
+ },
+ },
+ selectContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ [theme.breakpoints.down(770)]: {
+ flexDirection: 'column',
+ },
+ },
+ bottomSelect: {
+ [theme.breakpoints.down(770)]: {
+ marginTop: '1rem',
+ },
+ display: 'inline-flex',
+ },
+ headerSelect: {
+ marginRight: '1rem',
+ width: '200px',
+ [theme.breakpoints.between(1101, 1365)]: {
+ width: '170px',
+ marginRight: '8px',
+ },
+ },
+ chip: {
+ margin: '0 0.5rem 0.5rem 0',
+ },
+ chipValue: {
+ whiteSpace: 'pre',
+ },
+ headerActions: {
+ marginLeft: 'auto',
+ whiteSpace: 'nowrap',
+ [theme.breakpoints.down(710)]: {
+ display: 'none',
+ },
+ },
+ accordionDetails: {
+ borderTop: `1px dashed ${theme.palette.grey[300]}`,
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ valuesContainer: {
+ padding: '1rem 0rem',
+ maxHeight: '400px',
+ overflowY: 'auto',
+ },
+ summary: {
+ border: 'none',
+ padding: theme.spacing(0.5, 3),
+ '&:hover .valuesExpandLabel': {
+ textDecoration: 'underline',
+ },
+ },
+ settingsIcon: {
+ height: '32.5px',
+ width: '32.5px',
+ marginRight: '0.5rem',
+ fill: theme.palette.inactiveIcon,
+ },
+ form: { padding: 0, margin: 0, width: '100%' },
+}));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx
new file mode 100644
index 0000000000..ffb54cc4a1
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.tsx
@@ -0,0 +1,49 @@
+import { IConstraint } from 'interfaces/strategy';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+import { ConstraintAccordionEdit } from './ConstraintAccordionEdit/ConstraintAccordionEdit';
+import { ConstraintAccordionView } from './ConstraintAccordionView/ConstraintAccordionView';
+
+interface IConstraintAccordionProps {
+ compact: boolean;
+ editing: boolean;
+ constraint: IConstraint;
+ onCancel: () => void;
+ onEdit?: () => void;
+ onDelete?: () => void;
+ onSave?: (constraint: IConstraint) => void;
+}
+
+export const ConstraintAccordion = ({
+ constraint,
+ compact = false,
+ editing,
+ onEdit,
+ onCancel,
+ onDelete,
+ onSave,
+}: IConstraintAccordionProps) => {
+ if (!constraint) return null;
+
+ return (
+ {text}
+
+ {
+ if (action === CANCEL) {
+ setAction('');
+ onCancel();
+ } else if (action === SAVE) {
+ setAction('');
+ onSave(localConstraint);
+ }
+ },
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
new file mode 100644
index 0000000000..82c2efa82a
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
@@ -0,0 +1,27 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ inputContainer: {
+ padding: '1rem',
+ backgroundColor: theme.palette.neutral.light,
+ },
+ buttonContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ marginTop: '1rem',
+ borderTop: `1px solid ${theme.palette.grey[300]}`,
+ width: '100%',
+ padding: '1rem',
+ },
+ innerButtonContainer: {
+ marginLeft: 'auto',
+ },
+ leftButton: {
+ marginRight: '0.5rem',
+ minWidth: '125px',
+ },
+ rightButton: {
+ marginLeft: '0.5rem',
+ minWidth: '125px',
+ },
+}));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
new file mode 100644
index 0000000000..ebfcb4d3a9
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
@@ -0,0 +1,59 @@
+import { Button } from '@mui/material';
+import { IConstraint } from 'interfaces/strategy';
+import { CANCEL } from '../ConstraintAccordionEdit';
+
+import { useStyles } from './ConstraintAccordionEditBody.styles';
+import React from 'react';
+import { newOperators } from 'constants/operators';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { oneOf } from 'utils/oneOf';
+import { OperatorUpgradeAlert } from 'component/common/OperatorUpgradeAlert/OperatorUpgradeAlert';
+
+interface IConstraintAccordionBody {
+ localConstraint: IConstraint;
+ setValues: (values: string[]) => void;
+ triggerTransition: () => void;
+ setValue: (value: string) => void;
+ setAction: React.Dispatch
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
new file mode 100644
index 0000000000..be2ab9b64c
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
@@ -0,0 +1,22 @@
+import { makeStyles } from 'tss-react/mui';
+import React from 'react';
+
+const useStyles = makeStyles()(theme => ({
+ header: {
+ fontSize: theme.fontSizes.bodySize,
+ fontWeight: 'normal',
+ marginTop: '1rem',
+ marginBottom: '0.25rem',
+ },
+}));
+
+export const ConstraintFormHeader: React.FC<
+ React.HTMLAttributes
+
+
+
+ + {children} +
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.test.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.test.tsx new file mode 100644 index 0000000000..ed6f46a166 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.test.tsx @@ -0,0 +1,18 @@ +import { parseDateValue } from 'component/common/util'; + +test(`Date component is able to parse midnight when it's 00`, () => { + let f = parseDateValue('2022-03-15T12:27'); + let midnight = parseDateValue('2022-03-15T00:27'); + expect(f).toEqual('2022-03-15T12:27'); + expect(midnight).toEqual('2022-03-15T00:27'); +}); + +test(`Date component - snapshot matching`, () => { + let midnight = '2022-03-15T00:00'; + let midday = '2022-03-15T12:00'; + let obj = { + midnight: parseDateValue(midnight), + midday: parseDateValue(midday), + }; + expect(obj).toMatchSnapshot(); +}); diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx new file mode 100644 index 0000000000..39d1f900c0 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/DateSingleValue/DateSingleValue.tsx @@ -0,0 +1,42 @@ +import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader'; +import Input from 'component/common/Input/Input'; +import { parseDateValue, parseValidDate } from 'component/common/util'; +interface IDateSingleValueProps { + setValue: (value: string) => void; + value?: string; + error: string; + setError: React.Dispatch
+
+ Set values (maximum 100 char length per value)
+
+
+ );
+};
+
+interface IConstraintValueChipsProps {
+ values: string[];
+ removeValue: (index: number) => void;
+}
+
+const ConstraintValueChips = ({
+ values,
+ removeValue,
+}: IConstraintValueChipsProps) => {
+ const { classes: styles } = useStyles();
+ return (
+ <>
+ {values.map((value, index) => {
+ // Key is not ideal, but we don't have anything guaranteed to
+ // be unique here.
+ return (
+
+
+
+ {
+ setError('');
+ }}
+ onChange={e => setInputValues(e.target.value)}
+ placeholder="value1, value2, value3..."
+ className={styles.input}
+ error={Boolean(error)}
+ errorText={error}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export const filterLegalValues = (
+ legalValues: ILegalValue[],
+ filter: string
+): ILegalValue[] => {
+ return legalValues.filter(legalValue => {
+ return legalValue.value.includes(filter);
+ });
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx
new file mode 100644
index 0000000000..a957d1df4e
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ResolveInput/ResolveInput.tsx
@@ -0,0 +1,152 @@
+import { IUnleashContextDefinition } from 'interfaces/context';
+import { IConstraint } from 'interfaces/strategy';
+import { DateSingleValue } from '../DateSingleValue/DateSingleValue';
+import { FreeTextInput } from '../FreeTextInput/FreeTextInput';
+import { RestrictiveLegalValues } from '../RestrictiveLegalValues/RestrictiveLegalValues';
+import { SingleLegalValue } from '../SingleLegalValue/SingleLegalValue';
+import { SingleValue } from '../SingleValue/SingleValue';
+import {
+ IN_OPERATORS_LEGAL_VALUES,
+ STRING_OPERATORS_FREETEXT,
+ STRING_OPERATORS_LEGAL_VALUES,
+ SEMVER_OPERATORS_SINGLE_VALUE,
+ NUM_OPERATORS_LEGAL_VALUES,
+ NUM_OPERATORS_SINGLE_VALUE,
+ SEMVER_OPERATORS_LEGAL_VALUES,
+ DATE_OPERATORS_SINGLE_VALUE,
+ IN_OPERATORS_FREETEXT,
+ Input,
+} from '../useConstraintInput/useConstraintInput';
+import React from 'react';
+
+interface IResolveInputProps {
+ contextDefinition: IUnleashContextDefinition;
+ localConstraint: IConstraint;
+ setValue: (value: string) => void;
+ setValues: (values: string[]) => void;
+ setError: React.Dispatch{legal.value}
+
+ {legal.description}
+
+
+ }
+ />
+ No valid legal values available for this operator.
+ } + /> +
+ {
+ setError('');
+ setValue(e.target.value.trim());
+ }}
+ onFocus={() => setError('')}
+ placeholder={`Enter a single ${type} value`}
+ className={styles.singleValueInput}
+ error={Boolean(error)}
+ errorText={error}
+ />
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.test.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.test.ts
new file mode 100644
index 0000000000..0dcd5870f0
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.test.ts
@@ -0,0 +1,110 @@
+import {
+ numberValidatorGenerator,
+ semVerValidatorGenerator,
+ dateValidatorGenerator,
+ stringValidatorGenerator,
+} from './constraintValidators';
+
+test('numbervalidator should accept 0', () => {
+ const numValidator = numberValidatorGenerator(0);
+ const [result, err] = numValidator();
+
+ expect(result).toBe(true);
+ expect(err).toBe('');
+});
+
+test('number validator should reject value that cannot be parsed to number', () => {
+ const numValidator = numberValidatorGenerator('testa31');
+ const [result, err] = numValidator();
+
+ expect(result).toBe(false);
+ expect(err).toBe('Value must be a number');
+});
+
+test('number validator should reject NaN', () => {
+ const numValidator = numberValidatorGenerator(NaN);
+ const [result, err] = numValidator();
+
+ expect(result).toBe(false);
+ expect(err).toBe('Value must be a number');
+});
+
+test('number validator should accept value that can be parsed to number', () => {
+ const numValidator = numberValidatorGenerator('31');
+ const [result, err] = numValidator();
+
+ expect(result).toBe(true);
+ expect(err).toBe('');
+});
+
+test('number validator should accept float values', () => {
+ const numValidator = numberValidatorGenerator('31.12');
+ const [result, err] = numValidator();
+
+ expect(result).toBe(true);
+ expect(err).toBe('');
+});
+
+test('semver validator should reject prefixed values', () => {
+ const semVerValidator = semVerValidatorGenerator('v1.4.2');
+ const [result, err] = semVerValidator();
+
+ expect(result).toBe(false);
+ expect(err).toBe('Value is not a valid semver. For example 1.2.4');
+});
+
+test('semver validator should reject partial semver values', () => {
+ const semVerValidator = semVerValidatorGenerator('4.2');
+ const [result, err] = semVerValidator();
+
+ expect(result).toBe(false);
+ expect(err).toBe('Value is not a valid semver. For example 1.2.4');
+});
+
+test('semver validator should accept semver complient values', () => {
+ const semVerValidator = semVerValidatorGenerator('1.4.2');
+ const [result, err] = semVerValidator();
+
+ expect(result).toBe(true);
+ expect(err).toBe('');
+});
+
+test('date validator should reject invalid date', () => {
+ const dateValidator = dateValidatorGenerator('114mydate2005');
+ const [result, err] = dateValidator();
+
+ expect(result).toBe(false);
+ expect(err).toBe('Value must be a valid date matching RFC3339');
+});
+
+test('date validator should accept valid date', () => {
+ const dateValidator = dateValidatorGenerator('2022-03-03T10:15:23.262Z');
+ const [result, err] = dateValidator();
+
+ expect(result).toBe(true);
+ expect(err).toBe('');
+});
+
+test('string validator should accept a list of strings', () => {
+ const stringValidator = stringValidatorGenerator(['1234', '4121']);
+ const [result, err] = stringValidator();
+
+ expect(result).toBe(true);
+ expect(err).toBe('');
+});
+
+test('string validator should reject values that are not arrays', () => {
+ const stringValidator = stringValidatorGenerator(4);
+ const [result, err] = stringValidator();
+
+ expect(result).toBe(false);
+ expect(err).toBe('Values must be a list of strings');
+});
+
+test('string validator should reject arrays that are not arrays of strings', () => {
+ const stringValidator = stringValidatorGenerator(['test', NaN, 5]);
+ const [result, err] = stringValidator();
+
+ expect(result).toBe(false);
+ expect(err).toBe('Values must be a list of strings');
+});
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.ts
new file mode 100644
index 0000000000..cf23d3e420
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/constraintValidators.ts
@@ -0,0 +1,55 @@
+import { isValid, parseISO } from 'date-fns';
+import semver from 'semver';
+
+export type ConstraintValidatorOutput = [boolean, string];
+
+export const numberValidatorGenerator = (value: unknown) => {
+ return (): ConstraintValidatorOutput => {
+ const converted = Number(value);
+
+ if (typeof converted !== 'number' || Number.isNaN(converted)) {
+ return [false, 'Value must be a number'];
+ }
+
+ return [true, ''];
+ };
+};
+
+export const stringValidatorGenerator = (values: unknown) => {
+ return (): ConstraintValidatorOutput => {
+ const error: ConstraintValidatorOutput = [
+ false,
+ 'Values must be a list of strings',
+ ];
+ if (!Array.isArray(values)) {
+ return error;
+ }
+
+ if (!values.every(value => typeof value === 'string')) {
+ return error;
+ }
+
+ return [true, ''];
+ };
+};
+
+export const semVerValidatorGenerator = (value: string) => {
+ return (): ConstraintValidatorOutput => {
+ const isCleanValue = semver.clean(value) === value;
+
+ if (!semver.valid(value) || !isCleanValue) {
+ return [false, 'Value is not a valid semver. For example 1.2.4'];
+ }
+
+ return [true, ''];
+ };
+};
+
+export const dateValidatorGenerator = (value: string) => {
+ return (): ConstraintValidatorOutput => {
+ if (!isValid(parseISO(value))) {
+ return [false, 'Value must be a valid date matching RFC3339'];
+ }
+ return [true, ''];
+ };
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx
new file mode 100644
index 0000000000..3503c69ce5
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/useConstraintInput/useConstraintInput.tsx
@@ -0,0 +1,158 @@
+import {
+ inOperators,
+ stringOperators,
+ numOperators,
+ semVerOperators,
+ dateOperators,
+} from 'constants/operators';
+import { IUnleashContextDefinition } from 'interfaces/context';
+import { IConstraint } from 'interfaces/strategy';
+import React, { useCallback, useEffect, useState } from 'react';
+import { oneOf } from 'utils/oneOf';
+
+import {
+ numberValidatorGenerator,
+ stringValidatorGenerator,
+ semVerValidatorGenerator,
+ dateValidatorGenerator,
+ ConstraintValidatorOutput,
+} from './constraintValidators';
+import { nonEmptyArray } from 'utils/nonEmptyArray';
+
+interface IUseConstraintInputProps {
+ contextDefinition: IUnleashContextDefinition;
+ localConstraint: IConstraint;
+}
+
+interface IUseConstraintOutput {
+ input: Input;
+ error: string;
+ validator: () => ConstraintValidatorOutput;
+ setError: React.Dispatch
+
+ {resolveText(operator, contextName)}
+
+ }
+ />
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts
new file mode 100644
index 0000000000..f0d2b13384
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/helpers.ts
@@ -0,0 +1,82 @@
+import {
+ DATE_BEFORE,
+ DATE_AFTER,
+ IN,
+ NOT_IN,
+ NUM_EQ,
+ NUM_GT,
+ NUM_GTE,
+ NUM_LT,
+ NUM_LTE,
+ STR_CONTAINS,
+ STR_ENDS_WITH,
+ STR_STARTS_WITH,
+ SEMVER_EQ,
+ SEMVER_GT,
+ SEMVER_LT,
+ Operator,
+} from 'constants/operators';
+
+export const resolveText = (operator: Operator, contextName: string) => {
+ const base = `To satisfy this constraint, values passed into the SDK as ${contextName} must`;
+
+ if (operator === IN) {
+ return `${base} include:`;
+ }
+
+ if (operator === NOT_IN) {
+ return `${base} not include:`;
+ }
+
+ if (operator === STR_ENDS_WITH) {
+ return `${base} end with:`;
+ }
+
+ if (operator === STR_STARTS_WITH) {
+ return `${base} start with:`;
+ }
+
+ if (operator === STR_CONTAINS) {
+ return `${base} contain:`;
+ }
+
+ if (operator === NUM_EQ) {
+ return `${base} match:`;
+ }
+
+ if (operator === NUM_GT) {
+ return `${base} be greater than:`;
+ }
+
+ if (operator === NUM_GTE) {
+ return `${base} be greater than or equal to:`;
+ }
+
+ if (operator === NUM_LT) {
+ return `${base} be less than:`;
+ }
+
+ if (operator === NUM_LTE) {
+ return `${base} be less than or equal to:`;
+ }
+
+ if (operator === DATE_AFTER) {
+ return `${base} be after the following date`;
+ }
+
+ if (operator === DATE_BEFORE) {
+ return `${base} be before the following date:`;
+ }
+
+ if (operator === SEMVER_EQ) {
+ return `${base} match the following version:`;
+ }
+
+ if (operator === SEMVER_GT) {
+ return `${base} be greater than the following version:`;
+ }
+
+ if (operator === SEMVER_LT) {
+ return `${base} be less than the following version:`;
+ }
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx
new file mode 100644
index 0000000000..8a82b7ef5c
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/CaseSensitiveButton/CaseSensitiveButton.tsx
@@ -0,0 +1,51 @@
+import { Tooltip, Box } from '@mui/material';
+import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg';
+import { ReactComponent as CaseSensitiveOff } from 'assets/icons/24_Text format off.svg';
+import React from 'react';
+import {
+ StyledToggleButtonOff,
+ StyledToggleButtonOn,
+} from '../StyledToggleButton';
+import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender';
+import { IConstraint } from 'interfaces/strategy';
+
+interface CaseSensitiveButtonProps {
+ localConstraint: IConstraint;
+ setCaseInsensitive: () => void;
+}
+
+export const CaseSensitiveButton = ({
+ localConstraint,
+ setCaseInsensitive,
+}: CaseSensitiveButtonProps) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
new file mode 100644
index 0000000000..571a8c663b
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
@@ -0,0 +1,29 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ container: {
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ help: {
+ fill: theme.palette.grey[600],
+ [theme.breakpoints.down(860)]: {
+ display: 'none',
+ },
+ },
+ helpWrapper: {
+ marginLeft: '12px',
+ height: '24px',
+ },
+ addCustomLabel: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'start',
+ margin: '0.75rem 0 ',
+ },
+ customConstraintLabel: {
+ marginBottom: theme.spacing(1),
+ color: theme.palette.text.secondary,
+ },
+}));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
new file mode 100644
index 0000000000..85b3c33772
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
@@ -0,0 +1,175 @@
+import React, { forwardRef, Fragment, useImperativeHandle } from 'react';
+import { Button, Tooltip } from '@mui/material';
+import { HelpOutline } from '@mui/icons-material';
+import { IConstraint } from 'interfaces/strategy';
+import { ConstraintAccordion } from 'component/common/ConstraintAccordion/ConstraintAccordion';
+import produce from 'immer';
+import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
+import { useWeakMap } from 'hooks/useWeakMap';
+import { objectId } from 'utils/objectId';
+import { useStyles } from './ConstraintAccordionList.styles';
+import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
+
+interface IConstraintAccordionListProps {
+ constraints: IConstraint[];
+ setConstraints?: React.Dispatch
+ 0 && showLabel
+ }
+ show={
+
+ 0}
+ show={
+ ))}
+
+
+ }
+ />
+
+ );
+ }
+);
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint.ts
new file mode 100644
index 0000000000..5ad8f8edfa
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint.ts
@@ -0,0 +1,21 @@
+import { dateOperators } from 'constants/operators';
+import { IConstraint } from 'interfaces/strategy';
+import { oneOf } from 'utils/oneOf';
+import { operatorsForContext } from 'utils/operatorsForContext';
+
+export const createEmptyConstraint = (contextName: string): IConstraint => {
+ const operator = operatorsForContext(contextName)[0];
+
+ const value = oneOf(dateOperators, operator)
+ ? new Date().toISOString()
+ : '';
+
+ return {
+ contextName,
+ operator,
+ value,
+ values: [],
+ caseInsensitive: false,
+ inverted: false,
+ };
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
new file mode 100644
index 0000000000..382aea7266
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import {
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+ SxProps,
+ Theme,
+} from '@mui/material';
+import { IConstraint } from 'interfaces/strategy';
+import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
+import { ConstraintAccordionViewHeader } from './ConstraintAccordionViewHeader/ConstraintAccordionViewHeader';
+import { oneOf } from 'utils/oneOf';
+import {
+ dateOperators,
+ numOperators,
+ semVerOperators,
+} from 'constants/operators';
+import { useStyles } from '../ConstraintAccordion.styles';
+
+interface IConstraintAccordionViewProps {
+ constraint: IConstraint;
+ onDelete?: () => void;
+ onEdit?: () => void;
+ sx?: SxProps+ Custom constraints +
+ } + /> + {constraints.map((constraint, index) => ( +
+
+
+
+
+
+ Add any number of custom constraints
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx
new file mode 100644
index 0000000000..cdcb925720
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/MultipleValues/MultipleValues.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Chip } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { ConstraintValueSearch } from '../../../ConstraintValueSearch/ConstraintValueSearch';
+import { useStyles } from '../ConstraintAccordionViewBody.style';
+
+interface IMultipleValuesProps {
+ values: string[] | undefined;
+}
+
+export const MultipleValues = ({ values }: IMultipleValuesProps) => {
+ const [filter, setFilter] = useState('');
+ const { classes: styles } = useStyles();
+
+ if (!values || values.length === 0) return null;
+
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
new file mode 100644
index 0000000000..bf09761625
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -0,0 +1,43 @@
+import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
+import { IConstraint } from 'interfaces/strategy';
+import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo';
+import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions';
+import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
+
+interface IConstraintAccordionViewHeaderProps {
+ constraint: IConstraint;
+ onDelete?: () => void;
+ onEdit?: () => void;
+ singleValue: boolean;
+ expanded: boolean;
+ allowExpand: (shouldExpand: boolean) => void;
+ compact?: boolean;
+}
+
+export const ConstraintAccordionViewHeader = ({
+ constraint,
+ onEdit,
+ onDelete,
+ singleValue,
+ allowExpand,
+ expanded,
+ compact,
+}: IConstraintAccordionViewHeaderProps) => {
+ const { classes: styles } = useStyles();
+
+ return (
+ Value must be {operator}
{' '} +
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx
new file mode 100644
index 0000000000..f8298b0fa5
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx
@@ -0,0 +1,83 @@
+import { styled, Tooltip } from '@mui/material';
+import { ConstraintViewHeaderOperator } from '../ConstraintViewHeaderOperator/ConstraintViewHeaderOperator';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { ConstraintAccordionViewHeaderSingleValue } from '../ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue';
+import { ConstraintAccordionViewHeaderMultipleValues } from '../ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues';
+import React from 'react';
+import { IConstraint } from 'interfaces/strategy';
+import { useStyles } from '../../../ConstraintAccordion.styles';
+
+const StyledHeaderText = styled('span')(({ theme }) => ({
+ display: '-webkit-box',
+ WebkitLineClamp: 3,
+ WebkitBoxOrient: 'vertical',
+ overflow: 'hidden',
+ maxWidth: '100px',
+ minWidth: '100px',
+ marginRight: '10px',
+ marginTop: 'auto',
+ marginBottom: 'auto',
+ wordBreak: 'break-word',
+ fontSize: theme.fontSizes.smallBody,
+ [theme.breakpoints.down(710)]: {
+ textAlign: 'center',
+ padding: theme.spacing(1, 0),
+ marginRight: 'inherit',
+ maxWidth: 'inherit',
+ },
+}));
+
+const StyledHeaderWrapper = styled('div')(({ theme }) => ({
+ display: 'flex',
+ width: '100%',
+ justifyContent: 'space-between',
+ borderRadius: theme.spacing(1),
+}));
+
+interface ConstraintAccordionViewHeaderMetaInfoProps {
+ constraint: IConstraint;
+ singleValue: boolean;
+ expanded: boolean;
+ allowExpand: (shouldExpand: boolean) => void;
+ maxLength?: number;
+}
+
+export const ConstraintAccordionViewHeaderInfo = ({
+ constraint,
+ singleValue,
+ allowExpand,
+ expanded,
+ maxLength = 112, //The max number of characters in the values text for NOT allowing expansion
+}: ConstraintAccordionViewHeaderMetaInfoProps) => {
+ const { classes: styles } = useStyles();
+
+ return (
+
+
+
+ {constraint.contextName}
+
+
+
+
+
+
+
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
new file mode 100644
index 0000000000..d3aff894fb
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx
@@ -0,0 +1,72 @@
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { styled } from '@mui/material';
+import React, { useEffect, useMemo, useState } from 'react';
+import classnames from 'classnames';
+import { IConstraint } from 'interfaces/strategy';
+import { useStyles } from '../../../ConstraintAccordion.styles';
+
+const StyledValuesSpan = styled('span')(({ theme }) => ({
+ display: '-webkit-box',
+ WebkitLineClamp: 2,
+ WebkitBoxOrient: 'vertical',
+ overflow: 'hidden',
+ wordBreak: 'break-word',
+ fontSize: theme.fontSizes.smallBody,
+ margin: 'auto 0',
+ [theme.breakpoints.down(710)]: {
+ margin: theme.spacing(1, 0),
+ textAlign: 'center',
+ },
+}));
+
+interface ConstraintSingleValueProps {
+ constraint: IConstraint;
+ expanded: boolean;
+ maxLength: number;
+ allowExpand: (shouldExpand: boolean) => void;
+}
+
+export const ConstraintAccordionViewHeaderMultipleValues = ({
+ constraint,
+ expanded,
+ allowExpand,
+ maxLength,
+}: ConstraintSingleValueProps) => {
+ const { classes: styles } = useStyles();
+
+ const [expandable, setExpandable] = useState(false);
+
+ const text = useMemo(() => {
+ return constraint?.values?.map(value => value).join(', ');
+ }, [constraint]);
+
+ useEffect(() => {
+ if (text) {
+ allowExpand((text?.length ?? 0) > maxLength);
+ setExpandable((text?.length ?? 0) > maxLength);
+ }
+ }, [text, maxLength, allowExpand, setExpandable]);
+
+ return (
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx
new file mode 100644
index 0000000000..64a3cab927
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ConstraintAccordionViewHeaderSingleValue.tsx
@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import { Chip, styled } from '@mui/material';
+import { formatConstraintValue } from 'utils/formatConstraintValue';
+import { useStyles } from '../../../ConstraintAccordion.styles';
+import { IConstraint } from 'interfaces/strategy';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+
+const StyledSingleValueChip = styled(Chip)(({ theme }) => ({
+ margin: 'auto 0',
+ marginLeft: theme.spacing(1),
+ [theme.breakpoints.down(710)]: {
+ margin: theme.spacing(1, 0),
+ },
+}));
+
+interface ConstraintSingleValueProps {
+ constraint: IConstraint;
+ allowExpand: (shouldExpand: boolean) => void;
+}
+
+export const ConstraintAccordionViewHeaderSingleValue = ({
+ constraint,
+ allowExpand,
+}: ConstraintSingleValueProps) => {
+ const { locationSettings } = useLocationSettings();
+ const { classes: styles } = useStyles();
+
+ useEffect(() => {
+ allowExpand(false);
+ }, [allowExpand]);
+
+ return (
+
+ {text}
+
+ {!expanded
+ ? `View all (${constraint?.values?.length})`
+ : 'View less'}
+
+ }
+ />
+
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
new file mode 100644
index 0000000000..f12acf3f2f
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx
@@ -0,0 +1,34 @@
+import { forwardRef, ReactNode } from 'react';
+import { styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+
+export const StyledIconWrapperBase = styled('div')<{
+ prefix?: boolean;
+}>(({ theme }) => ({
+ backgroundColor: theme.palette.grey[200],
+ width: 24,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ alignSelf: 'stretch',
+ color: theme.palette.primary.main,
+ marginLeft: theme.spacing(1),
+ borderRadius: theme.shape.borderRadius,
+}));
+
+const StyledPrefixIconWrapper = styled(StyledIconWrapperBase)(() => ({
+ marginLeft: 0,
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+}));
+
+export const StyledIconWrapper = forwardRef<
+ HTMLDivElement,
+ { isPrefix?: boolean; children?: ReactNode }
+>(({ isPrefix, ...props }, ref) => (
+
+
+ );
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription.ts
new file mode 100644
index 0000000000..ef4a76118e
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription.ts
@@ -0,0 +1,23 @@
+import { Operator } from 'constants/operators';
+
+export const formatOperatorDescription = (operator: Operator): string => {
+ return constraintOperatorDescriptions[operator];
+};
+
+const constraintOperatorDescriptions = {
+ IN: 'is one of',
+ NOT_IN: 'is not one of',
+ STR_CONTAINS: 'is a string that contains',
+ STR_STARTS_WITH: 'is a string that starts with',
+ STR_ENDS_WITH: 'is a string that ends with',
+ NUM_EQ: 'is a number equal to',
+ NUM_GT: 'is a number greater than',
+ NUM_GTE: 'is a number greater than or equal to',
+ NUM_LT: 'is a number less than',
+ NUM_LTE: 'is a number less than or equal to',
+ DATE_BEFORE: 'is a date before',
+ DATE_AFTER: 'is a date after',
+ SEMVER_EQ: 'is a SemVer equal to',
+ SEMVER_GT: 'is a SemVer greater than',
+ SEMVER_LT: 'is a SemVer less than',
+};
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts
new file mode 100644
index 0000000000..3c2d139bc9
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts
@@ -0,0 +1,43 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ valueContainer: {
+ lineHeight: 1.1,
+ marginTop: -2,
+ marginBottom: -10,
+ },
+ optionContainer: {
+ lineHeight: 1.2,
+ },
+ label: {
+ fontSize: theme.fontSizes.smallBody,
+ },
+ description: {
+ fontSize: theme.fontSizes.smallerBody,
+ color: theme.palette.grey[700],
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ },
+ separator: {
+ position: 'relative',
+ overflow: 'visible',
+ marginTop: '1rem',
+ '&:before': {
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ top: '-0.5rem',
+ left: 0,
+ right: 0,
+ borderTop: '1px solid',
+ borderTopColor: theme.palette.grey[300],
+ },
+ },
+ formInput: {
+ [theme.breakpoints.between(1101, 1365)]: {
+ width: '170px',
+ marginRight: '8px',
+ },
+ },
+}));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx
new file mode 100644
index 0000000000..82e3c23d29
--- /dev/null
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx
@@ -0,0 +1,107 @@
+import {
+ Select,
+ MenuItem,
+ FormControl,
+ InputLabel,
+ SelectChangeEvent,
+} from '@mui/material';
+import {
+ Operator,
+ stringOperators,
+ semVerOperators,
+ dateOperators,
+ numOperators,
+ inOperators,
+} from 'constants/operators';
+import React, { useState } from 'react';
+import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
+import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles';
+import classNames from 'classnames';
+
+interface IConstraintOperatorSelectProps {
+ options: Operator[];
+ value: Operator;
+ onChange: (value: Operator) => void;
+}
+
+export const ConstraintOperatorSelect = ({
+ options,
+ value,
+ onChange,
+}: IConstraintOperatorSelectProps) => {
+ const { classes: styles } = useStyles();
+ const [open, setOpen] = useState(false);
+
+ const onSelectChange = (event: SelectChangeEvent) => {
+ onChange(event.target.value as Operator);
+ };
+
+ const renderValue = () => {
+ return (
+ {operatorName}
+ {operatorText}
+
+
+ );
+ };
+
+ return (
+ {value}
+
+ {formatOperatorDescription(value)}
+
+
+ setFilter('')}
+ />
+ }
+ />
+
+ );
+};
diff --git a/frontend/src/component/common/CreateButton/CreateButton.tsx b/frontend/src/component/common/CreateButton/CreateButton.tsx
new file mode 100644
index 0000000000..05d9306af2
--- /dev/null
+++ b/frontend/src/component/common/CreateButton/CreateButton.tsx
@@ -0,0 +1,15 @@
+import PermissionButton, {
+ IPermissionButtonProps,
+} from '../PermissionButton/PermissionButton';
+
+interface ICreateButtonProps extends IPermissionButtonProps {
+ name: string;
+}
+
+export const CreateButton = ({ name, ...rest }: ICreateButtonProps) => {
+ return (
+
+ setFilter(e.target.value)}
+ placeholder="Filter values"
+ style={{
+ width: '100%',
+ margin: '1rem 0',
+ }}
+ variant="outlined"
+ size="small"
+ InputProps={{
+ startAdornment: (
+
+
+ ),
+ }}
+ />
+
+
+
+
+ {text}
+
+
+
+ );
+};
+
+export default DividerText;
diff --git a/frontend/src/component/common/DropdownMenu/DropdownButton/DropdownButton.tsx b/frontend/src/component/common/DropdownMenu/DropdownButton/DropdownButton.tsx
new file mode 100644
index 0000000000..a492668899
--- /dev/null
+++ b/frontend/src/component/common/DropdownMenu/DropdownButton/DropdownButton.tsx
@@ -0,0 +1,23 @@
+import { ReactNode, VFC } from 'react';
+import { Button, ButtonProps, Icon } from '@mui/material';
+
+interface IDropdownButtonProps {
+ label: string;
+ id?: string;
+ title?: ButtonProps['title'];
+ className?: string;
+ icon?: ReactNode;
+ startIcon?: ButtonProps['startIcon'];
+ style?: ButtonProps['style'];
+ onClick: ButtonProps['onClick'];
+}
+
+export const DropdownButton: VFC
+
+ );
+};
+
+export default EnvironmentIcon;
diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts
new file mode 100644
index 0000000000..7de67a83af
--- /dev/null
+++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts
@@ -0,0 +1,8 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ infoText: {
+ marginBottom: '10px',
+ fontSize: theme.fontSizes.bodySize,
+ },
+}));
diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
new file mode 100644
index 0000000000..19d1ee44a2
--- /dev/null
+++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
@@ -0,0 +1,69 @@
+import { useNavigate } from 'react-router-dom';
+import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import PermissionButton from '../PermissionButton/PermissionButton';
+import { useStyles } from './EnvironmentStrategyDialog.styles';
+import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
+
+interface IEnvironmentStrategyDialogProps {
+ open: boolean;
+ featureId: string;
+ projectId: string;
+ onClose: () => void;
+ environmentName: string;
+}
+const EnvironmentStrategyDialog = ({
+ open,
+ environmentName,
+ featureId,
+ projectId,
+ onClose,
+}: IEnvironmentStrategyDialogProps) => {
+ const { classes: styles } = useStyles();
+ const navigate = useNavigate();
+
+ const createStrategyPath = formatCreateStrategyPath(
+ projectId,
+ featureId,
+ environmentName,
+ 'default'
+ );
+
+ const onClick = () => {
+ onClose();
+ navigate(createStrategyPath);
+ };
+
+ return (
+ + Before you can enable the toggle in the environment, you need to + add an activation strategy. +
++ You can add the activation strategy by selecting the toggle, + open the environment accordion and add the activation strategy. +
+
+
+ {title}
+ {children} + + } + />{' '} +
+ API Command{' '}
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+};
+
+export default Gradient;
diff --git a/frontend/src/component/common/GridCol/GridCol.tsx b/frontend/src/component/common/GridCol/GridCol.tsx
new file mode 100644
index 0000000000..95b56c7be7
--- /dev/null
+++ b/frontend/src/component/common/GridCol/GridCol.tsx
@@ -0,0 +1,19 @@
+import { Grid } from '@mui/material';
+import { FC } from 'react';
+
+export const GridCol: FC<{ vertical?: boolean }> = ({
+ children,
+ vertical = false,
+}) => {
+ return (
+
+
+ );
+};
+
+export default Input;
diff --git a/frontend/src/component/common/InputCaption/InputCaption.tsx b/frontend/src/component/common/InputCaption/InputCaption.tsx
new file mode 100644
index 0000000000..ecf6fcb0c6
--- /dev/null
+++ b/frontend/src/component/common/InputCaption/InputCaption.tsx
@@ -0,0 +1,23 @@
+import { Box } from '@mui/material';
+
+export interface IInputCaptionProps {
+ text?: string;
+}
+
+export const InputCaption = ({ text }: IInputCaptionProps) => {
+ if (!text) {
+ return null;
+ }
+
+ return (
+
+ (
+ <>
+
+ );
+};
+
+const InstanceStatusBarMemo = React.memo(InstanceStatusBar);
diff --git a/frontend/src/component/common/InstanceStatus/InstanceStatusBar.test.tsx b/frontend/src/component/common/InstanceStatus/InstanceStatusBar.test.tsx
new file mode 100644
index 0000000000..8791740e68
--- /dev/null
+++ b/frontend/src/component/common/InstanceStatus/InstanceStatusBar.test.tsx
@@ -0,0 +1,103 @@
+import { InstanceStatusBar } from 'component/common/InstanceStatus/InstanceStatusBar';
+import { InstancePlan, InstanceState } from 'interfaces/instance';
+import { render } from 'utils/testRenderer';
+import { screen } from '@testing-library/react';
+import { addDays, subDays } from 'date-fns';
+import { INSTANCE_STATUS_BAR_ID } from 'utils/testIds';
+import { UNKNOWN_INSTANCE_STATUS } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
+
+test('InstanceStatusBar should be hidden by default', async () => {
+ render(
+ })
+
+ );
+};
+
+export default Loader;
diff --git a/frontend/src/component/common/LoginRedirect/LoginRedirect.tsx b/frontend/src/component/common/LoginRedirect/LoginRedirect.tsx
new file mode 100644
index 0000000000..38a9bcbea1
--- /dev/null
+++ b/frontend/src/component/common/LoginRedirect/LoginRedirect.tsx
@@ -0,0 +1,10 @@
+import { useLocation, Navigate } from 'react-router-dom';
+
+export const LoginRedirect = () => {
+ const { pathname, search } = useLocation();
+
+ const redirect = encodeURIComponent(pathname + search);
+ const loginLink = `/login?redirect=${redirect}`;
+
+ return
+
+ );
+};
+
+export default NoItems;
diff --git a/frontend/src/component/common/NotFound/NotFound.styles.ts b/frontend/src/component/common/NotFound/NotFound.styles.ts
new file mode 100644
index 0000000000..2f6fa50efe
--- /dev/null
+++ b/frontend/src/component/common/NotFound/NotFound.styles.ts
@@ -0,0 +1,35 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()({
+ container: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ minHeight: '100vh',
+ padding: '2rem',
+ position: 'fixed',
+ inset: 0,
+ backgroundColor: '#fff',
+ width: '100%',
+ },
+ logo: {
+ height: '80px',
+ },
+ content: {
+ display: 'flex',
+ position: 'relative',
+ },
+ buttonContainer: {
+ marginTop: '2rem',
+ },
+ homeButton: {
+ marginLeft: '1rem',
+ },
+ icon: {
+ height: '150px',
+ width: '150px',
+ position: 'absolute',
+ right: 100,
+ top: 45,
+ },
+});
diff --git a/frontend/src/component/common/NotFound/NotFound.tsx b/frontend/src/component/common/NotFound/NotFound.tsx
new file mode 100644
index 0000000000..e20fd10beb
--- /dev/null
+++ b/frontend/src/component/common/NotFound/NotFound.tsx
@@ -0,0 +1,47 @@
+import { Button, Typography } from '@mui/material';
+import { useNavigate } from 'react-router';
+
+import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
+
+import { useStyles } from './NotFound.styles';
+import { GO_BACK } from 'constants/navigate';
+
+const NotFound = () => {
+ const navigate = useNavigate();
+ const { classes: styles } = useStyles();
+
+ const onClickHome = () => {
+ navigate('/');
+ };
+
+ const onClickBack = () => {
+ navigate(GO_BACK);
+ };
+
+ return (
+ {children}
+
+
+
+
+ );
+};
+
+export default NotFound;
diff --git a/frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx b/frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx
new file mode 100644
index 0000000000..2927f4a04a
--- /dev/null
+++ b/frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx
@@ -0,0 +1,23 @@
+import { Alert } from '@mui/material';
+
+export const OperatorUpgradeAlert = () => {
+ return (
+
+
+
+
+ Ooops. That's a page we haven't toggled on yet.
+
+
+
+
+
+
+
+ {children}
+
+ );
+};
+
+export const PageContent: FC{children}
+
+
+ {children}
+
+ );
+};
+
+const PageHeaderDivider: VFC<{ sx?: SxProps
+ {actions}
}
+ />
+
+
+ {titleElement || title}
+
+ {subtitle && {subtitle}}
+
+
+
+ }
+ />
+ );
+};
+
+export default PaginateUI;
diff --git a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts b/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
new file mode 100644
index 0000000000..727320f814
--- /dev/null
+++ b/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
@@ -0,0 +1,58 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ pagination: {
+ margin: '1rem 0 0 0',
+ display: 'flex',
+ justifyContent: ' center',
+ position: 'absolute',
+ bottom: '25px',
+ right: '0',
+ left: '0',
+ },
+ paginationInnerContainer: {
+ position: 'relative',
+ },
+ paginationButton: {
+ border: 'none',
+ cursor: 'pointer',
+ backgroundColor: 'efefef',
+ margin: '0 0.2rem',
+ width: '31px',
+ borderRadius: theme.shape.borderRadius,
+ padding: '0.25rem 0.5rem',
+ },
+ paginationButtonActive: {
+ backgroundColor: '#635DC5',
+ color: '#fff',
+ transition: 'backgroundColor 0.3s ease',
+ },
+ idxBtn: {
+ border: 'none',
+ borderRadius: theme.shape.borderRadius,
+ background: 'transparent',
+ position: 'absolute',
+ height: '23px',
+ cursor: 'pointer',
+ },
+ doubleArrowBtnLeft: {
+ left: '-55px',
+ },
+ doubleArrowBtnRight: {
+ right: '-55px',
+ },
+ arrowIcon: { height: '15px', width: '15px' },
+ arrowIconLeft: {
+ transform: 'rotate(180deg)',
+ },
+ idxBtnIcon: {
+ height: '15px',
+ width: '15px',
+ },
+ idxBtnLeft: {
+ left: '-30px',
+ },
+ idxBtnRight: {
+ right: '-30px',
+ },
+}));
diff --git a/frontend/src/component/common/PasswordField/PasswordField.tsx b/frontend/src/component/common/PasswordField/PasswordField.tsx
new file mode 100644
index 0000000000..49b7df5a12
--- /dev/null
+++ b/frontend/src/component/common/PasswordField/PasswordField.tsx
@@ -0,0 +1,52 @@
+import {
+ IconButton,
+ InputAdornment,
+ TextField,
+ TextFieldProps,
+} from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import React, { useState, VFC } from 'react';
+
+const PasswordField: VFC
+ 0}
+ show={
+ <>
+
+
+
+ }
+ />
+
+ {pages
+ .map((page, idx) => {
+ const active = pageIndex === idx;
+ return (
+
+ );
+ })
+ .slice(start, limit)}
+
+
+
+
+ }
+ />
+
+
+
+ {children}
+
+
+
+
+ );
+};
diff --git a/frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx b/frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx
new file mode 100644
index 0000000000..66396db282
--- /dev/null
+++ b/frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx
@@ -0,0 +1,72 @@
+import { styled } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import {
+ getSearchTextGenerator,
+ IGetSearchContextOutput,
+} from 'hooks/useSearch';
+import { VFC } from 'react';
+
+const StyledHeader = styled('span')(({ theme }) => ({
+ fontSize: theme.fontSizes.smallBody,
+ color: theme.palette.text.primary,
+}));
+
+const StyledCode = styled('span')(({ theme }) => ({
+ backgroundColor: theme.palette.secondaryContainer,
+ color: theme.palette.text.primary,
+ padding: theme.spacing(0, 0.5),
+ borderRadius: theme.spacing(0.5),
+}));
+
+interface ISearchDescriptionProps {
+ filters: any[];
+ getSearchContext: () => IGetSearchContextOutput;
+ searchableColumnsString: string;
+}
+
+export const SearchDescription: VFC
+ onSearchChange(e.target.value)}
+ onFocus={() => setShowSuggestions(true)}
+ onBlur={() => setShowSuggestions(false)}
+ disabled={disabled}
+ />
+
+
+
+ {
+ onSearchChange('');
+ ref.current?.focus();
+ }}
+ >
+
+
+ }
+ />
+
+
+
+
+ Filter by {filter.header}:{' '}
+
+ Example:{' '}
+
{children}
+
+
+ );
+};
+
+export default StatusChip;
diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts
new file mode 100644
index 0000000000..701ed5f7e4
--- /dev/null
+++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.styles.ts
@@ -0,0 +1,39 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ container: {
+ borderRadius: theme.shape.borderRadiusMedium,
+ border: `1px solid ${theme.palette.divider}`,
+ '& + &': {
+ marginTop: theme.spacing(2),
+ },
+ background: theme.palette.background.paper,
+ },
+ header: {
+ padding: theme.spacing(0.5, 2),
+ display: 'flex',
+ gap: theme.spacing(1),
+ alignItems: 'center',
+ borderBottom: `1px solid ${theme.palette.divider}`,
+ fontWeight: theme.typography.fontWeightMedium,
+ },
+ headerDraggable: {
+ paddingLeft: theme.spacing(1),
+ },
+ icon: {
+ fill: theme.palette.inactiveIcon,
+ },
+ actions: {
+ marginLeft: 'auto',
+ display: 'flex',
+ minHeight: theme.spacing(6),
+ alignItems: 'center',
+ },
+ resultChip: {
+ marginLeft: 'auto',
+ },
+ body: {
+ padding: theme.spacing(2),
+ justifyItems: 'center',
+ },
+}));
diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
new file mode 100644
index 0000000000..fc3efe8e61
--- /dev/null
+++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
@@ -0,0 +1,96 @@
+import { DragEventHandler, FC, ReactNode } from 'react';
+import { DragIndicator } from '@mui/icons-material';
+import { styled, IconButton, Box } from '@mui/material';
+import classNames from 'classnames';
+import { IFeatureStrategy } from 'interfaces/strategy';
+import {
+ getFeatureStrategyIcon,
+ formatStrategyName,
+} from 'utils/strategyNames';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useStyles } from './StrategyItemContainer.styles';
+
+interface IStrategyItemContainerProps {
+ strategy: IFeatureStrategy;
+ onDragStart?: DragEventHandler
+ (
+
+
+ )}
+ />
+
+ {actions}
+ {children}
+ {renderTabPanels()}
+
+ );
+};
diff --git a/frontend/src/component/common/TabNav/TabPanel/TabPanel.tsx b/frontend/src/component/common/TabNav/TabPanel/TabPanel.tsx
new file mode 100644
index 0000000000..3c2fc65a39
--- /dev/null
+++ b/frontend/src/component/common/TabNav/TabPanel/TabPanel.tsx
@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+
+interface ITabPanelProps {
+ value: number;
+ index: number;
+ children: ReactNode;
+}
+
+export const TabPanel = ({ children, value, index }: ITabPanelProps) => (
+
+ {value === index && children}
+
+);
diff --git a/frontend/src/component/common/Table/SearchHighlightContext/SearchHighlightContext.tsx b/frontend/src/component/common/Table/SearchHighlightContext/SearchHighlightContext.tsx
new file mode 100644
index 0000000000..2a2e34a58c
--- /dev/null
+++ b/frontend/src/component/common/Table/SearchHighlightContext/SearchHighlightContext.tsx
@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+const SearchHighlightContext = createContext('');
+
+export const SearchHighlightProvider = SearchHighlightContext.Provider;
+
+export const useSearchHighlightContext = (): { searchQuery: string } => {
+ return { searchQuery: useContext(SearchHighlightContext) };
+};
diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
new file mode 100644
index 0000000000..3a7ffa4823
--- /dev/null
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
@@ -0,0 +1,99 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+ header: {
+ position: 'relative',
+ fontWeight: theme.fontWeight.medium,
+ },
+ flex: {
+ justifyContent: 'stretch',
+ alignItems: 'center',
+ display: 'flex',
+ flexShrink: 0,
+ '& > *': {
+ flexGrow: 1,
+ },
+ },
+ flexGrow: {
+ flexGrow: 1,
+ },
+ sortable: {
+ padding: 0,
+ '&:hover, &:focus': {
+ backgroundColor: theme.palette.tableHeaderHover,
+ '& svg': {
+ color: 'inherit',
+ },
+ },
+ },
+ sortButton: {
+ all: 'unset',
+ whiteSpace: 'nowrap',
+ width: '100%',
+ position: 'relative',
+ zIndex: 1,
+ ':hover, :focus, &:focus-visible, &:active': {
+ outline: 'revert',
+ '.hover-only': {
+ display: 'inline-block',
+ },
+ },
+ display: 'flex',
+ boxSizing: 'inherit',
+ cursor: 'pointer',
+ },
+ sortedButton: {
+ fontWeight: theme.fontWeight.bold,
+ },
+ label: {
+ display: 'flex',
+ flexDirection: 'column',
+ flexShrink: 1,
+ minWidth: 0,
+ '::after': {
+ fontWeight: 'bold',
+ display: 'inline-block',
+ height: 0,
+ content: 'attr(data-text)',
+ visibility: 'hidden',
+ overflow: 'hidden',
+ },
+ },
+ alignLeft: {
+ justifyContent: 'flex-start',
+ textAlign: 'left',
+ },
+ alignRight: {
+ justifyContent: 'flex-end',
+ textAlign: 'right',
+ },
+ alignCenter: {
+ justifyContent: 'center',
+ textAlign: 'center',
+ },
+ hiddenMeasurementLayer: {
+ padding: theme.spacing(2),
+ visibility: 'hidden',
+ display: 'flex',
+ alignItems: 'center',
+ width: '100%',
+ },
+ visibleAbsoluteLayer: {
+ padding: theme.spacing(2),
+ position: 'absolute',
+ display: 'flex',
+ alignItems: 'center',
+ width: '100%',
+ height: '100%',
+ '.hover-only': {
+ display: 'none',
+ },
+ '& > span': {
+ minWidth: 0,
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ overflowX: 'hidden',
+ overflowY: 'visible',
+ },
+ },
+}));
diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
new file mode 100644
index 0000000000..bef033443d
--- /dev/null
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx
@@ -0,0 +1,161 @@
+import {
+ FC,
+ MouseEventHandler,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import { TableCell, Tooltip } from '@mui/material';
+import classnames from 'classnames';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useStyles } from './CellSortable.styles';
+import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
+import { SortArrow } from './SortArrow/SortArrow';
+
+interface ICellSortableProps {
+ isSortable?: boolean;
+ isSorted?: boolean;
+ isDescending?: boolean;
+ ariaTitle?: string;
+ width?: number | string;
+ minWidth?: number | string;
+ maxWidth?: number | string;
+ align?: 'left' | 'center' | 'right';
+ isFlex?: boolean;
+ isFlexGrow?: boolean;
+ onClick?: MouseEventHandler{children}
}
+ />
+