rename files related to playground

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/FeatureStrategyItem.tsx

@@ -4,24 +4,24 @@ import {
     PlaygroundStrategySchema,
     PlaygroundRequestSchema,
 } from 'hooks/api/actions/usePlayground/playground.model';
-import { PlaygroundResultStrategyExecution } from './PlaygroundResultStrategyExecution/PlaygroundResultStrategyExecution';
-import { useStyles } from './PlaygroundResultFeatureStrategyItem.styles';
+import { StrategyExecution } from './StrategyExecution/StrategyExecution';
+import { useStyles } from './FeatureStrategyItem.styles';
 import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer';
 import { objectId } from 'utils/objectId';
 
-interface IPlaygroundResultFeatureStrategyItemProps {
+interface IFeatureStrategyItemProps {
     strategy: PlaygroundStrategySchema;
     index: number;
     input?: PlaygroundRequestSchema;
     compact: boolean;
 }
 
-export const PlaygroundResultFeatureStrategyItem = ({
+export const FeatureStrategyItem = ({
     strategy,
     input,
     index,
     compact,
-}: IPlaygroundResultFeatureStrategyItemProps) => {
+}: IFeatureStrategyItemProps) => {
     const { result } = strategy;
     const { classes: styles } = useStyles();
     const theme = useTheme();
@@ -54,7 +54,7 @@ export const PlaygroundResultFeatureStrategyItem = ({
                 />
             }
         >
-            <PlaygroundResultStrategyExecution
+            <StrategyExecution
                 strategyResult={strategy}
                 input={input}
                 percentageFill={theme.palette.tertiary.light}

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, VFC } from 'react';
 import {
     Accordion,
     AccordionSummary,
@@ -14,7 +14,7 @@ import {
     numOperators,
     semVerOperators,
 } from 'constants/operators';
-import { useStyles } from './PlaygroundConstraintAccordion.styles';
+import { useStyles } from './ConstraintAccordion.styles';
 import {
     PlaygroundConstraintSchema,
     PlaygroundRequestSchema,
@@ -28,12 +28,12 @@ interface IConstraintAccordionViewProps {
     sx?: SxProps<Theme>;
 }
 
-export const PlaygroundResultConstraintAccordionView = ({
+export const ConstraintAccordionView: VFC<IConstraintAccordionViewProps> = ({
     constraint,
     sx = undefined,
     maxLength,
     playgroundInput,
-}: IConstraintAccordionViewProps) => {
+}) => {
     const { classes: styles } = useStyles();
     const [expandable, setExpandable] = useState(true);
     const [expanded, setExpanded] = useState(false);

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundConstraintAccordionViewHeaderInfo.tsx

@@ -3,7 +3,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { PlaygroundConstraintAccordionViewHeaderSingleValue } from './PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue';
 import { PLaygroundConstraintAccordionViewHeaderMultipleValues } from './PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues';
 import React from 'react';
-import { useStyles } from '../../PlaygroundConstraintAccordion.styles';
+import { useStyles } from '../../ConstraintAccordion.styles';
 import { CancelOutlined } from '@mui/icons-material';
 import {
     PlaygroundConstraintSchema,

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderMultipleValues/PLaygroundConstraintAccordionViewHeaderMultipleValues.tsx

@@ -2,7 +2,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { styled, Typography } from '@mui/material';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
-import { useStyles } from '../../../PlaygroundConstraintAccordion.styles';
+import { useStyles } from '../../../ConstraintAccordion.styles';
 import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
 
 const StyledValuesSpan = styled('span')(({ theme }) => ({

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintAccordion/ConstraintAccordionView/PlaygroundConstraintAccordionViewHeader/PlaygroundConstraintAccordionViewHeaderInfo/PlaygroundContraintAccordionViewHeaderSingleValue/PlaygroundConstraintAccordionViewHeaderSingleValue.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Chip, styled, Typography } from '@mui/material';
 import { formatConstraintValue } from 'utils/formatConstraintValue';
-import { useStyles } from '../../../PlaygroundConstraintAccordion.styles';
+import { useStyles } from '../../../ConstraintAccordion.styles';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx

@@ -1,42 +1,42 @@
+import { Fragment, VFC } from 'react';
 import {
     PlaygroundConstraintSchema,
     PlaygroundRequestSchema,
 } from 'hooks/api/actions/usePlayground/playground.model';
-import React, { Fragment } from 'react';
-import { objectId } from '../../../../../../../../../../utils/objectId';
-import { ConditionallyRender } from '../../../../../../../../../common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from '../../../../../../../../../common/StrategySeparator/StrategySeparator';
+import { objectId } from 'utils/objectId';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { styled } from '@mui/material';
-import { PlaygroundResultConstraintAccordionView } from './PlaygroundResultConstraintAccordion/PlaygroundResultConstraintAccordionView/PlaygroundResultConstraintAccordionView';
+import { ConstraintAccordionView } from './ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
 
-interface PlaygroundResultConstraintExecutionProps {
+interface IConstraintExecutionProps {
     constraints?: PlaygroundConstraintSchema[];
     compact: boolean;
     input?: PlaygroundRequestSchema;
 }
 
-export const PlaygroundResultConstraintExecutionWrapper = styled('div')(() => ({
+export const ConstraintExecutionWrapper = styled('div')(() => ({
     width: '100%',
     display: 'flex',
     flexDirection: 'column',
 }));
 
-export const PlaygroundResultConstraintExecution = ({
+export const ConstraintExecution: VFC<IConstraintExecutionProps> = ({
     constraints,
     compact,
     input,
-}: PlaygroundResultConstraintExecutionProps) => {
+}) => {
     if (!constraints) return null;
 
     return (
-        <PlaygroundResultConstraintExecutionWrapper>
+        <ConstraintExecutionWrapper>
             {constraints?.map((constraint, index) => (
                 <Fragment key={objectId(constraint)}>
                     <ConditionallyRender
                         condition={index > 0 && constraints?.length > 1}
                         show={<StrategySeparator text="AND" />}
                     />
-                    <PlaygroundResultConstraintAccordionView
+                    <ConstraintAccordionView
                         constraint={constraint}
                         playgroundInput={input}
                         maxLength={compact ? 25 : 50}
@@ -46,6 +46,6 @@ export const PlaygroundResultConstraintExecution = ({
                     />
                 </Fragment>
             ))}
-        </PlaygroundResultConstraintExecutionWrapper>
+        </ConstraintExecutionWrapper>
     );
 };

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx

@@ -1,30 +1,30 @@
+import React, { Fragment, VFC } from 'react';
 import {
     parseParameterNumber,
     parseParameterString,
     parseParameterStrings,
 } from 'utils/parseParameter';
-import React, { Fragment } from 'react';
-import { PlaygroundConstraintItem } from '../PlaygroundConstraintItem/PlaygroundConstraintItem';
+import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { Chip } from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { PlaygroundConstraintSchema } from 'hooks/api/actions/usePlayground/playground.model';
-import { useStyles } from '../PlaygroundResultStrategyExecution.styles';
+import { useStyles } from '../StrategyExecution.styles';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 
-interface PlaygroundResultStrategyExecutionCustomStrategyProps {
+interface ICustomStrategyProps {
     parameters: { [key: string]: string };
     strategyName: string;
     constraints: PlaygroundConstraintSchema[];
 }
 
-export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({
+export const CustomStrategyParams: VFC<ICustomStrategyProps> = ({
     strategyName,
     constraints,
     parameters,
-}: PlaygroundResultStrategyExecutionCustomStrategyProps) => {
+}) => {
     const { classes: styles } = useStyles();
     const { strategies } = useStrategies();
 
@@ -43,7 +43,7 @@ export const PlaygroundResultStrategyExecutionCustomStrategyParams = ({
                     );
                     return (
                         <Fragment key={param?.name}>
-                            <PlaygroundConstraintItem
+                            <PlaygroundParameterItem
                                 value={values}
                                 text={param.name}
                             />

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx

@@ -1,16 +1,17 @@
+import { VFC } from 'react';
 import {
     PlaygroundSegmentSchema,
     PlaygroundRequestSchema,
-} from '../../../../../../../../../../hooks/api/actions/usePlayground/playground.model';
-import { PlaygroundResultConstraintExecution } from '../PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution';
+} from 'hooks/api/actions/usePlayground/playground.model';
+import { ConstraintExecution } from '../ConstraintExecution/ConstraintExecution';
 import { CancelOutlined, DonutLarge } from '@mui/icons-material';
 import { Link } from 'react-router-dom';
-import { StrategySeparator } from '../../../../../../../../../common/StrategySeparator/StrategySeparator';
-import { useStyles } from './PlaygroundResultSegmentExecution.styles';
+import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
+import { useStyles } from './SegmentExecution.styles';
 import { styled, Typography } from '@mui/material';
-import { ConditionallyRender } from '../../../../../../../../../common/ConditionallyRender/ConditionallyRender';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
-interface PlaygroundResultSegmentExecutionProps {
+interface ISegmentExecutionProps {
     segments?: PlaygroundSegmentSchema[];
     input?: PlaygroundRequestSchema;
     hasConstraints: boolean;
@@ -58,11 +59,11 @@ const SegmentResultTextWrapper = styled('div')(({ theme }) => ({
     gap: theme.spacing(1),
 }));
 
-export const PlaygroundResultSegmentExecution = ({
+export const SegmentExecution: VFC<ISegmentExecutionProps> = ({
     segments,
     input,
     hasConstraints,
-}: PlaygroundResultSegmentExecutionProps) => {
+}) => {
     const { classes: styles } = useStyles();
 
     if (!segments) return null;
@@ -99,7 +100,7 @@ export const PlaygroundResultSegmentExecution = ({
                         />
                     </SegmentExecutionHeader>
                     <SegmentExecutionConstraintWrapper>
-                        <PlaygroundResultConstraintExecution
+                        <ConstraintExecution
                             constraints={segment.constraints}
                             input={input}
                             compact

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -1,18 +1,19 @@
+import { VFC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 import { Box, Chip, styled } from '@mui/material';
-import { useStyles } from './PlaygroundResultStrategyExecution.styles';
+import { useStyles } from './StrategyExecution.styles';
 import {
     PlaygroundRequestSchema,
     PlaygroundStrategySchema,
 } from 'hooks/api/actions/usePlayground/playground.model';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { PlaygroundResultConstraintExecution } from './PlaygroundResultConstraintExecution/PlaygroundResultConstraintExecution';
-import { PlaygroundResultSegmentExecution } from './PlaygroundResultSegmentExecution/PlaygroundResultSegmentExecution';
-import { PlaygroundResultStrategyExecutionParameters } from './PlaygroundResultStrategyExecutionParameters/PlaygroundResultStrategyExecutionParameters';
-import { PlaygroundResultStrategyExecutionCustomStrategyParams } from './PlaygroundResultStrategyExecutionCustomStrategyParams/PlaygroundResultStrategyExecutionCustomStrategyParams';
+import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution';
+import { SegmentExecution } from './SegmentExecution/SegmentExecution';
+import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecutionParameters/StrategyExecutionParameters';
+import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams';
 
-interface PlaygroundResultStrategyExecutionProps {
+interface IStrategyExecutionProps {
     strategyResult: PlaygroundStrategySchema;
     percentageFill?: string;
     input?: PlaygroundRequestSchema;
@@ -26,10 +27,10 @@ const StyledParamWrapper = styled('div')(({ theme }) => ({
     padding: theme.spacing(0, 0),
 }));
 
-export const PlaygroundResultStrategyExecution = ({
+export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
     strategyResult,
     input,
-}: PlaygroundResultStrategyExecutionProps) => {
+}) => {
     const { name, constraints, segments, parameters } = strategyResult;
 
     const { uiConfig } = useUiConfig();
@@ -50,7 +51,7 @@ export const PlaygroundResultStrategyExecution = ({
                     Boolean(segments && segments.length > 0)
                 }
                 show={
-                    <PlaygroundResultSegmentExecution
+                    <SegmentExecution
                         segments={segments}
                         hasConstraints={hasConstraints}
                         input={input}
@@ -61,7 +62,7 @@ export const PlaygroundResultStrategyExecution = ({
                 condition={Boolean(constraints && constraints.length > 0)}
                 show={
                     <>
-                        <PlaygroundResultConstraintExecution
+                        <ConstraintExecution
                             constraints={constraints}
                             compact={true}
                             input={input}
@@ -99,7 +100,7 @@ export const PlaygroundResultStrategyExecution = ({
                     input={input}
                 />
                 <StyledParamWrapper sx={{ pt: 2 }}>
-                    <PlaygroundResultStrategyExecutionCustomStrategyParams
+                    <CustomStrategyParams
                         strategyName={strategyResult.name}
                         parameters={parameters}
                         constraints={constraints}

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx

@@ -4,9 +4,9 @@ import {
 } from 'utils/parseParameter';
 import { Box, Chip } from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
-import { PlaygroundParameterItem } from '../PlaygroundParamteterItem/PlaygroundParameterItem';
+import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem';
 import React from 'react';
-import { useStyles } from '../PlaygroundResultStrategyExecution.styles';
+import { useStyles } from '../StrategyExecution.styles';
 import {
     PlaygroundConstraintSchema,
     PlaygroundRequestSchema,

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/PlaygroundResultFeatureStrategyList/PlaygroundResultStrategyList/playgroundResultStrategyLists.tsx

@@ -5,7 +5,7 @@ import {
     PlaygroundRequestSchema,
 } from 'hooks/api/actions/usePlayground/playground.model';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { PlaygroundResultFeatureStrategyItem } from './PlaygroundResultFeatureStrategyItem/PlaygroundResultFeatureStrategyItem';
+import { FeatureStrategyItem } from './StrategyItem/FeatureStrategyItem';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
 
 const StyledAlertWrapper = styled('div')(({ theme }) => ({
@@ -51,7 +51,7 @@ export const PlaygroundResultStrategyLists = ({
                                 condition={index > 0}
                                 show={<StrategySeparator text="OR" />}
                             />
-                            <PlaygroundResultFeatureStrategyItem
+                            <FeatureStrategyItem
                                 key={strategy.id}
                                 strategy={strategy}
                                 index={index}