Playground result info modal initial

frontend/src/component/common/Table/cells/IconCell/IconCell.tsx

@@ -1,13 +1,21 @@
 import { Box } from '@mui/material';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 interface IIconCellProps {
     icon: ReactNode;
+    onClick?: () => void;
 }
 
-export const IconCell = ({ icon }: IIconCellProps) => {
+export const IconCell = ({ icon, onClick }: IIconCellProps) => {
+    const handleClick =
+        onClick &&
+        ((event: React.SyntheticEvent) => {
+            event.stopPropagation();
+            onClick();
+        });
     return (
         <Box
+            onClick={handleClick}
             sx={{
                 pl: 2,
                 pr: 1,

frontend/src/component/playground/Playground/PlaygroundFeatureResultInfoModal/PlaygroundFeatureResultInfoModal.tsx

@@ -0,0 +1,24 @@
+import { PlaygroundFeatureSchema } from '../../../../hooks/api/actions/usePlayground/playground.model';
+import { Modal } from '@mui/material';
+
+interface PlaygroundFeatureResultInfoModalProps {
+    feature?: PlaygroundFeatureSchema;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+
+export const PlaygroundFeatureResultInfoModal = ({
+    feature,
+    open,
+    setOpen,
+}: PlaygroundFeatureResultInfoModalProps) => {
+    if (!feature) {
+        return null;
+    }
+
+    return (
+        <Modal open={open} onClose={() => setOpen(false)}>
+            <p>Test</p>
+        </Modal>
+    );
+};

frontend/src/component/playground/Playground/PlaygroundResultsTable/PlaygroundResultsTable.tsx

@@ -23,6 +23,9 @@ import { PlaygroundFeatureSchema } from 'hooks/api/actions/usePlayground/playgro
 import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import useLoading from 'hooks/useLoading';
 import { VariantCell } from './VariantCell/VariantCell';
+import { IconCell } from '../../../common/Table/cells/IconCell/IconCell';
+import { InfoOutlined } from '@mui/icons-material';
+import { PlaygroundFeatureResultInfoModal } from '../PlaygroundFeatureResultInfoModal/PlaygroundFeatureResultInfoModal';
 
 const defaultSort: SortingRule<string> = { id: 'name' };
 const { value, setValue } = createLocalStorage(
@@ -48,11 +51,87 @@ export const PlaygroundResultsTable = ({
     const isExtraSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
+    const [selectedFeature, setSelectedFeature] = useState<
+        PlaygroundFeatureSchema | undefined
+    >();
+    const [showResultInfoModal, setShowResultInfoModal] = useState(false);
+
+    const columns = useMemo(
+        () => [
+            {
+                Header: 'Name',
+                accessor: 'name',
+                searchable: true,
+                minWidth: 160,
+                Cell: ({ value, row: { original } }: any) => (
+                    <LinkCell
+                        title={value}
+                        to={`/projects/${original?.projectId}/features/${value}`}
+                    />
+                ),
+            },
+            {
+                Header: 'Project ID',
+                accessor: 'projectId',
+                sortType: 'alphanumeric',
+                filterName: 'projectId',
+                searchable: true,
+                maxWidth: 170,
+                Cell: ({ value }: any) => (
+                    <LinkCell title={value} to={`/projects/${value}`} />
+                ),
+            },
+            {
+                Header: 'Variant',
+                id: 'variant',
+                accessor: 'variant.name',
+                sortType: 'alphanumeric',
+                filterName: 'variant',
+                searchable: true,
+                width: 200,
+                Cell: ({
+                    value,
+                    row: {
+                        original: { variant, feature, variants, isEnabled },
+                    },
+                }: any) => (
+                    <VariantCell
+                        variant={variant?.enabled ? value : ''}
+                        variants={variants}
+                        feature={feature}
+                        isEnabled={isEnabled}
+                    />
+                ),
+            },
+            {
+                Header: 'isEnabled',
+                accessor: 'isEnabled',
+                filterName: 'isEnabled',
+                filterParsing: (value: boolean) => (value ? 'true' : 'false'),
+                Cell: ({ value }: any) => <FeatureStatusCell enabled={value} />,
+                sortType: 'boolean',
+                sortInverted: true,
+            },
+            {
+                Header: '',
+                id: 'info',
+                Cell: ({ row }: any) => (
+                    <IconCell
+                        icon={<InfoOutlined />}
+                        onClick={() => onFeatureResultInfoClick(row.original)}
+                    />
+                ),
+            },
+        ],
+        //eslint-disable-next-line
+        []
+    );
+
     const {
         data: searchedData,
         getSearchText,
         getSearchContext,
-    } = useSearch(COLUMNS, searchValue, features || []);
+    } = useSearch(columns, searchValue, features || []);
 
     const data = useMemo(() => {
         return loading
@@ -87,7 +166,7 @@ export const PlaygroundResultsTable = ({
     } = useTable(
         {
             initialState,
-            columns: COLUMNS as any,
+            columns: columns as any,
             data: data as any,
             sortTypes,
             autoResetGlobalFilter: false,
@@ -138,8 +217,18 @@ export const PlaygroundResultsTable = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps -- don't re-render after search params change
     }, [loading, sortBy, searchValue]);
 
+    const onFeatureResultInfoClick = (feature: PlaygroundFeatureSchema) => {
+        setSelectedFeature(feature);
+        setShowResultInfoModal(true);
+    };
+
     return (
         <>
+            <PlaygroundFeatureResultInfoModal
+                feature={selectedFeature}
+                open={showResultInfoModal}
+                setOpen={setShowResultInfoModal}
+            />
             <Box
                 sx={{
                     display: 'flex',
@@ -235,60 +324,3 @@ export const PlaygroundResultsTable = ({
         </>
     );
 };
-
-const COLUMNS = [
-    {
-        Header: 'Name',
-        accessor: 'name',
-        searchable: true,
-        minWidth: 160,
-        Cell: ({ value, row: { original } }: any) => (
-            <LinkCell
-                title={value}
-                to={`/projects/${original?.projectId}/features/${value}`}
-            />
-        ),
-    },
-    {
-        Header: 'Project ID',
-        accessor: 'projectId',
-        sortType: 'alphanumeric',
-        filterName: 'projectId',
-        searchable: true,
-        maxWidth: 170,
-        Cell: ({ value }: any) => (
-            <LinkCell title={value} to={`/projects/${value}`} />
-        ),
-    },
-    {
-        Header: 'Variant',
-        id: 'variant',
-        accessor: 'variant.name',
-        sortType: 'alphanumeric',
-        filterName: 'variant',
-        searchable: true,
-        width: 200,
-        Cell: ({
-            value,
-            row: {
-                original: { variant, feature, variants, isEnabled },
-            },
-        }: any) => (
-            <VariantCell
-                variant={variant?.enabled ? value : ''}
-                variants={variants}
-                feature={feature}
-                isEnabled={isEnabled}
-            />
-        ),
-    },
-    {
-        Header: 'isEnabled',
-        accessor: 'isEnabled',
-        filterName: 'isEnabled',
-        filterParsing: (value: boolean) => (value ? 'true' : 'false'),
-        Cell: ({ value }: any) => <FeatureStatusCell enabled={value} />,
-        sortType: 'boolean',
-        sortInverted: true,
-    },
-];