Merge pull request #1113 from Unleash/segments-warning

refactor: improve segment warning texts

frontend/src/component/segments/SegmentDocs/SegmentDocs.styles.ts

@@ -1,18 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    paragraph: {
-        [theme.breakpoints.down('lg')]: {
-            display: 'inline',
-            '&:after': {
-                content: '" "',
-            },
-        },
-        [theme.breakpoints.up('md')]: {
-            display: 'block',
-            '& + &': {
-                marginTop: '0.25rem',
-            },
-        },
-    },
-}));

frontend/src/component/segments/SegmentDocs/SegmentDocs.tsx

@@ -1,26 +1,6 @@
 import { Alert } from '@mui/material';
-import { useStyles } from 'component/segments/SegmentDocs/SegmentDocs.styles';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 
-export const SegmentDocsWarning = () => {
-    const { classes: styles } = useStyles();
-
-    return (
-        <Alert severity="warning">
-            <p className={styles.paragraph}>
-                Segments is an experimental feature available to select users.
-            </p>
-            <p className={styles.paragraph}>
-                This feature is currently in development. Future versions may
-                require to update your SDKs.
-            </p>
-            <p className={styles.paragraph}>
-                <SegmentDocsLink />
-            </p>
-        </Alert>
-    );
-};
-
 export const SegmentDocsValuesWarning = () => {
     const { segmentValuesLimit } = useSegmentLimits();
 
@@ -30,9 +10,8 @@ export const SegmentDocsValuesWarning = () => {
 
     return (
         <Alert severity="warning">
-            Segments is an experimental feature available to select users.
+            Segments is an experimental feature, currently limited to at most{' '}
-            Currently, segments are limited to at most {segmentValuesLimit}{' '}
+            {segmentValuesLimit} values. <SegmentLimitsLink />
-            values. <SegmentLimitsLink />
         </Alert>
     );
 };
@@ -68,22 +47,6 @@ export const SegmentDocsStrategyWarning = () => {
     );
 };
 
-const SegmentDocsLink = () => {
-    return (
-        <>
-            <a
-                href={segmentsDocsLink}
-                target="_blank"
-                rel="noreferrer"
-                style={{ color: 'inherit' }}
-            >
-                Read more about segments in the documentation
-            </a>
-            .
-        </>
-    );
-};
-
 const SegmentLimitsLink = () => {
     return (
         <>

frontend/src/component/segments/SegmentTable/SegmentTable.tsx

@@ -11,7 +11,7 @@ import {
 import { useTable, useGlobalFilter, useSortBy } from 'react-table';
 import { CreateSegmentButton } from 'component/segments/CreateSegmentButton/CreateSegmentButton';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import { useMediaQuery, Box } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
 import { sortTypes } from 'utils/sortTypes';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { useMemo, useEffect, useState } from 'react';
@@ -22,7 +22,6 @@ import { SegmentActionCell } from 'component/segments/SegmentActionCell/SegmentA
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
 import theme from 'themes/theme';
-import { SegmentDocsWarning } from 'component/segments/SegmentDocs/SegmentDocs';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Search } from 'component/common/Search/Search';
 
@@ -99,9 +98,6 @@ export const SegmentTable = () => {
             }
             isLoading={loading}
         >
-            <Box sx={{ mb: 4 }}>
-                <SegmentDocsWarning />
-            </Box>
             <ConditionallyRender
                 condition={!loading && data.length === 0}
                 show={