Skip to content

Commit

Permalink
feat: get suggested changeset draft (#2274)
Browse files Browse the repository at this point in the history 
* feat: get suggested changeset draft

* fix: update routes snapshot
  • Loading branch information
@Tymek
Tymek committed Oct 28, 2022
1 parent c6c873d commit b7183fd
Show file tree
Hide file tree
Showing 9 changed files with 343 additions and 190 deletions.
252 changes: 139 additions & 113 deletions frontend/src/component/feature/FeatureView/FeatureView.tsx
View file
Expand Up @@ -30,12 +30,16 @@ import StatusChip from 'component/common/StatusChip/StatusChip';
import { FeatureNotFound } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { FeatureArchiveDialog } from '../../common/FeatureArchiveDialog/FeatureArchiveDialog';
import { DraftBanner } from 'component/suggestChanges/DraftBanner/DraftBanner';
import { MainLayout } from 'component/layout/MainLayout/MainLayout';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';

export const FeatureView = () => {
const projectId = useRequiredPathParam('projectId');
const featureId = useRequiredPathParam('featureId');
const { refetch: projectRefetch } = useProject(projectId);
const { refetchFeature } = useFeature(projectId, featureId);
const { uiConfig } = useUiConfig();

const [openTagDialog, setOpenTagDialog] = useState(false);
const [showDelDialog, setShowDelDialog] = useState(false);
Expand Down Expand Up @@ -81,123 +85,145 @@ export const FeatureView = () => {
}

return (
<ConditionallyRender
condition={error === undefined}
show={
<div ref={ref}>
<div className={styles.header}>
<div className={styles.innerContainer}>
<div className={styles.toggleInfoContainer}>
<h1
className={styles.featureViewHeader}
data-loading
>
{feature.name}{' '}
</h1>
<ConditionallyRender
condition={!smallScreen}
show={<StatusChip stale={feature?.stale} />}
/>
</div>
<MainLayout
ref={ref}
subheader={
uiConfig?.flags?.suggestChanges ? (
<DraftBanner project={projectId} />
) : null
}
>
<ConditionallyRender
condition={error === undefined}
show={
<div ref={ref}>
<div className={styles.header}>
<div className={styles.innerContainer}>
<div className={styles.toggleInfoContainer}>
<h1
className={styles.featureViewHeader}
data-loading
>
{feature.name}{' '}
</h1>
<ConditionallyRender
condition={!smallScreen}
show={
<StatusChip
stale={feature?.stale}
/>
}
/>
</div>

<div className={styles.toolbarContainer}>
<PermissionIconButton
permission={CREATE_FEATURE}
projectId={projectId}
data-loading
component={Link}
to={`/projects/${projectId}/features/${featureId}/strategies/copy`}
tooltipProps={{
title: 'Copy feature toggle',
}}
>
<FileCopy />
</PermissionIconButton>
<PermissionIconButton
permission={DELETE_FEATURE}
projectId={projectId}
tooltipProps={{
title: 'Archive feature toggle',
}}
data-loading
onClick={() => setShowDelDialog(true)}
>
<Archive />
</PermissionIconButton>
<PermissionIconButton
onClick={() => setOpenStaleDialog(true)}
permission={UPDATE_FEATURE}
projectId={projectId}
tooltipProps={{
title: 'Toggle stale state',
}}
data-loading
>
<WatchLater />
</PermissionIconButton>
<PermissionIconButton
onClick={() => setOpenTagDialog(true)}
permission={UPDATE_FEATURE}
projectId={projectId}
tooltipProps={{ title: 'Add tag' }}
data-loading
<div className={styles.toolbarContainer}>
<PermissionIconButton
permission={CREATE_FEATURE}
projectId={projectId}
data-loading
component={Link}
to={`/projects/${projectId}/features/${featureId}/strategies/copy`}
tooltipProps={{
title: 'Copy feature toggle',
}}
>
<FileCopy />
</PermissionIconButton>
<PermissionIconButton
permission={DELETE_FEATURE}
projectId={projectId}
tooltipProps={{
title: 'Archive feature toggle',
}}
data-loading
onClick={() => setShowDelDialog(true)}
>
<Archive />
</PermissionIconButton>
<PermissionIconButton
onClick={() => setOpenStaleDialog(true)}
permission={UPDATE_FEATURE}
projectId={projectId}
tooltipProps={{
title: 'Toggle stale state',
}}
data-loading
>
<WatchLater />
</PermissionIconButton>
<PermissionIconButton
onClick={() => setOpenTagDialog(true)}
permission={UPDATE_FEATURE}
projectId={projectId}
tooltipProps={{ title: 'Add tag' }}
data-loading
>
<Label />
</PermissionIconButton>
</div>
</div>
<div className={styles.separator} />
<div className={styles.tabContainer}>
<Tabs
value={activeTab.path}
indicatorColor="primary"
textColor="primary"
>
<Label />
</PermissionIconButton>
{tabData.map(tab => (
<Tab
key={tab.title}
label={tab.title}
value={tab.path}
onClick={() => navigate(tab.path)}
className={styles.tabButton}
/>
))}
</Tabs>
</div>
</div>
<div className={styles.separator} />
<div className={styles.tabContainer}>
<Tabs
value={activeTab.path}
indicatorColor="primary"
textColor="primary"
>
{tabData.map(tab => (
<Tab
key={tab.title}
label={tab.title}
value={tab.path}
onClick={() => navigate(tab.path)}
className={styles.tabButton}
/>
))}
</Tabs>
</div>
<Routes>
<Route
path="metrics"
element={<FeatureMetrics />}
/>
<Route path="logs" element={<FeatureLog />} />
<Route
path="variants"
element={<FeatureVariants />}
/>
<Route
path="settings"
element={<FeatureSettings />}
/>
<Route path="*" element={<FeatureOverview />} />
</Routes>
<FeatureArchiveDialog
isOpen={showDelDialog}
onConfirm={() => {
projectRefetch();
navigate(`/projects/${projectId}`);
}}
onClose={() => setShowDelDialog(false)}
projectId={projectId}
featureId={featureId}
/>
<FeatureStaleDialog
isStale={feature.stale}
isOpen={openStaleDialog}
onClose={() => {
setOpenStaleDialog(false);
refetchFeature();
}}
featureId={featureId}
projectId={projectId}
/>
<AddTagDialog
open={openTagDialog}
setOpen={setOpenTagDialog}
/>
</div>
<Routes>
<Route path="metrics" element={<FeatureMetrics />} />
<Route path="logs" element={<FeatureLog />} />
<Route path="variants" element={<FeatureVariants />} />
<Route path="settings" element={<FeatureSettings />} />
<Route path="*" element={<FeatureOverview />} />
</Routes>
<FeatureArchiveDialog
isOpen={showDelDialog}
onConfirm={() => {
projectRefetch();
navigate(`/projects/${projectId}`);
}}
onClose={() => setShowDelDialog(false)}
projectId={projectId}
featureId={featureId}
/>
<FeatureStaleDialog
isStale={feature.stale}
isOpen={openStaleDialog}
onClose={() => {
setOpenStaleDialog(false);
refetchFeature();
}}
featureId={featureId}
projectId={projectId}
/>
<AddTagDialog
open={openTagDialog}
setOpen={setOpenTagDialog}
/>
</div>
}
/>
}
/>
</MainLayout>
);
};
1 change: 1 addition & 0 deletions frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap
View file
Expand Up @@ -54,6 +54,7 @@ exports[`returns all baseRoutes 1`] = `
},
{
"component": [Function],
"isStandalone": true,
"menu": {},
"parent": "/projects",
"path": "/projects/:projectId/features/:featureId/*",
Expand Down
1 change: 1 addition & 0 deletions frontend/src/component/menu/routes.ts
View file
Expand Up @@ -121,6 +121,7 @@ export const routes: IRoute[] = [
title: 'FeatureView',
component: FeatureView,
type: 'protected',
isStandalone: true,
menu: {},
},
{
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/component/project/Project/Project.tsx
View file
Expand Up @@ -117,7 +117,11 @@ const Project = () => {
return (
<MainLayout
ref={ref}
subheader={uiConfig?.flags?.suggestChanges ? <DraftBanner /> : null}
subheader={
uiConfig?.flags?.suggestChanges ? (
<DraftBanner project={projectId} />
) : null
}
>
<div className={styles.header}>
<div className={styles.innerContainer}>
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/component/suggestChanges/DraftBanner/DraftBanner.tsx
View file
Expand Up @@ -4,14 +4,21 @@ import { useStyles as useAppStyles } from 'component/App.styles';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { SuggestedChangesSidebar } from '../SuggestedChangesSidebar/SuggestedChangesSidebar';
import { useSuggestedChangesDraft } from 'hooks/api/getters/useSuggestedChangesDraft/useSuggestedChangesDraft';

interface IDraftBannerProps {
environment?: string;
project: string;
}

export const DraftBanner: VFC<IDraftBannerProps> = ({ environment }) => {
export const DraftBanner: VFC<IDraftBannerProps> = ({ project }) => {
const { classes } = useAppStyles();
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const { draft, loading } = useSuggestedChangesDraft(project);
const environment = '';

if (!loading && !draft) {
return null;
}

return (
<Box
Expand Down Expand Up @@ -63,6 +70,7 @@ export const DraftBanner: VFC<IDraftBannerProps> = ({ environment }) => {
</Box>
</Box>
<SuggestedChangesSidebar
project={project}
open={isSidebarOpen}
onClose={() => {
setIsSidebarOpen(false);
Expand Down

1 comment on commit b7183fd

@vercel
Copy link

@vercel vercel bot commented on b7183fd Oct 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

unleash-monorepo-frontend – ./frontend

unleash-monorepo-frontend-git-main-unleash-team.vercel.app
unleash-monorepo-frontend.vercel.app
unleash-monorepo-frontend-unleash-team.vercel.app

Please sign in to comment.