Skip to content

Commit

Permalink
[Gitar] Updating TSX files
Browse files Browse the repository at this point in the history
  • Loading branch information
Gitar committed Aug 19, 2024
1 parent 662c7ab commit 9fcfa0b
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 121 deletions.
4 changes: 1 addition & 3 deletions ...omponent/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import { testServerRoute, testServerSetup } from 'utils/testServer';
const server = testServerSetup();
test('all options are drawn', async () => {
testServerRoute(server, '/api/admin/ui-config', {
flags: {
featuresExportImport: true,
},
flags: {},
});

render(<FeatureToggleListActions onExportClick={() => {}} />);
Expand Down
48 changes: 19 additions & 29 deletions ...component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,12 @@ import Add from '@mui/icons-material/Add';
import FileDownload from '@mui/icons-material/FileDownload';
import MoreVert from '@mui/icons-material/MoreVert';
import { Link } from 'react-router-dom';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useUiFlag } from 'hooks/useUiFlag';
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';

const StyledActions = styled('div')(({ theme }) => ({
const StyledActions = styled('div')(() => ({
display: 'flex',
justifyContent: 'center',
}));
Expand All @@ -40,7 +38,6 @@ export const FeatureToggleListActions: FC<IFeatureFlagListActions> = ({
}: IFeatureFlagListActions) => {
const { trackEvent } = usePlausibleTracker();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const featuresExportImport = useUiFlag('featuresExportImport');
const createFeature = useCreateFeaturePath({
query: '',
project: 'default',
Expand Down Expand Up @@ -123,31 +120,24 @@ export const FeatureToggleListActions: FC<IFeatureFlagListActions> = ({
</MenuItem>
)}
</PermissionHOC>
<ConditionallyRender
condition={featuresExportImport}
show={
<MenuItem
onClick={() => {
onExportClick();
handleClose();
trackEvent('search-feature-buttons', {
props: {
action: 'export',
},
});
}}
>
<ListItemIcon>
<FileDownload />
</ListItemIcon>
<ListItemText>
<Typography variant='body2'>
Export
</Typography>
</ListItemText>
</MenuItem>
}
/>
<MenuItem
onClick={() => {
onExportClick();
handleClose();
trackEvent('search-feature-buttons', {
props: {
action: 'export',
},
});
}}
>
<ListItemIcon>
<FileDownload />
</ListItemIcon>
<ListItemText>
<Typography variant='body2'>Export</Typography>
</ListItemText>
</MenuItem>
</MenuList>
</StyledPopover>
</StyledActions>
Expand Down
37 changes: 5 additions & 32 deletions frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/
import { FavoriteIconHeader } from 'component/common/Table/FavoriteIconHeader/FavoriteIconHeader';
import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
import { ExportDialog } from './ExportDialog';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { focusable } from 'themes/themeStyles';
import { FeatureEnvironmentSeenCell } from 'component/common/Table/cells/FeatureSeenCell/FeatureEnvironmentSeenCell';
import useToast from 'hooks/useToast';
Expand Down Expand Up @@ -62,11 +61,9 @@ export const FeatureToggleListTable: VFC = () => {
.filter((env) => env.enabled)
.map((env) => env.name);
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const isMediumScreen = useMediaQuery(theme.breakpoints.down('lg'));
const [showExportDialog, setShowExportDialog] = useState(false);

const { setToastApiError } = useToast();
const { uiConfig } = useUiConfig();

const variant =
featureSearchFeedback !== false
Expand Down Expand Up @@ -234,25 +231,6 @@ export const FeatureToggleListTable: VFC = () => {
}),
);

useEffect(() => {
if (isSmallScreen) {
table.setColumnVisibility({
type: false,
createdAt: false,
tags: false,
lastSeenAt: false,
stale: false,
});
} else if (isMediumScreen) {
table.setColumnVisibility({
lastSeenAt: false,
stale: false,
});
} else {
table.setColumnVisibility({});
}
}, [isSmallScreen, isMediumScreen]);

const setSearchValue = (query = '') => {
setTableState({ query });
trackEvent('search-bar', {
Expand Down Expand Up @@ -429,16 +407,11 @@ export const FeatureToggleListTable: VFC = () => {
</Box>
}
/>
<ConditionallyRender
condition={Boolean(uiConfig?.flags?.featuresExportImport)}
show={
<ExportDialog
showExportDialog={showExportDialog}
data={data}
onClose={() => setShowExportDialog(false)}
environments={enabledEnvironments}
/>
}
<ExportDialog
showExportDialog={showExportDialog}
data={data}
onClose={() => setShowExportDialog(false)}
environments={enabledEnvironments}
/>
</PageContent>
);
Expand Down
67 changes: 27 additions & 40 deletions ...aginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ export const ProjectFeatureTogglesHeader: FC<
const [showTitle, setShowTitle] = useState(true);
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const featuresExportImportFlag = useUiFlag('featuresExportImport');
const [showExportDialog, setShowExportDialog] = useState(false);
const { trackEvent } = usePlausibleTracker();
const projectOverviewRefactorFeedback = useUiFlag(
Expand Down Expand Up @@ -148,48 +147,36 @@ export const ProjectFeatureTogglesHeader: FC<
/>
{actions}
<PageHeader.Divider sx={{ marginLeft: 0 }} />
<ConditionallyRender
condition={featuresExportImportFlag}
show={
<>
<Tooltip
title='Export all project flags'
arrow
>
<IconButton
data-loading
onClick={() =>
setShowExportDialog(true)
}
sx={(theme) => ({
marginRight: theme.spacing(2),
})}
>
<FileDownload />
</IconButton>
</Tooltip>
<>
<Tooltip title='Export all project flags' arrow>
<IconButton
data-loading
onClick={() => setShowExportDialog(true)}
sx={(theme) => ({
marginRight: theme.spacing(2),
})}
>
<FileDownload />
</IconButton>
</Tooltip>

<ConditionallyRender
condition={!isLoading}
show={
<ExportDialog
showExportDialog={
showExportDialog
}
project={projectId}
data={[]}
onClose={() =>
setShowExportDialog(false)
}
environments={
environmentsToExport || []
}
/>
<ConditionallyRender
condition={!isLoading}
show={
<ExportDialog
showExportDialog={showExportDialog}
project={projectId}
data={[]}
onClose={() =>
setShowExportDialog(false)
}
environments={
environmentsToExport || []
}
/>
</>
}
/>
}
/>
</>
<ConditionallyRender
condition={
projectOverviewRefactorFeedback &&
Expand Down
27 changes: 10 additions & 17 deletions frontend/src/component/project/Project/Project.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,23 +217,16 @@ export const Project = () => {
</StyledProjectTitle>
</StyledDiv>
<StyledDiv>
<ConditionallyRender
condition={Boolean(
uiConfig?.flags?.featuresExportImport,
)}
show={
<PermissionIconButton
permission={UPDATE_FEATURE}
projectId={projectId}
onClick={() => setModalOpen(true)}
tooltipProps={{ title: 'Import' }}
data-testid={IMPORT_BUTTON}
data-loading-project
>
<FileUpload />
</PermissionIconButton>
}
/>
<PermissionIconButton
permission={UPDATE_FEATURE}
projectId={projectId}
onClick={() => setModalOpen(true)}
tooltipProps={{ title: 'Import' }}
data-testid={IMPORT_BUTTON}
data-loading-project
>
<FileUpload />
</PermissionIconButton>
</StyledDiv>
</StyledTopRow>
</StyledInnerContainer>
Expand Down

0 comments on commit 9fcfa0b

Please sign in to comment.