Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add tab for submissions view to flowSettings #2884

Merged
merged 3 commits into from
Mar 13, 2024
Merged

feat: add tab for submissions view to flowSettings #2884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
62def8c
chore: add placeholder Submissions component
Mike-Heneghan Mar 13, 2024
1e84783
feat: conditionally render Submissions tab when featureFlag is enabled
Mike-Heneghan Mar 6, 2024
d67cec8
chore: remove unnecessary fragment wrapper
Mike-Heneghan Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,17 @@ import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";

const DataManagerSettings: React.FC = () => {
return (
<>
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Data Manager
</Typography>
<Typography variant="body1">
Manage the data that your service uses and makes available via its API
</Typography>
<Box py={5}>
<FeaturePlaceholder title="Feature in development" />
</Box>
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Data Manager
</Typography>
<Typography variant="body1">
Manage the data that your service uses and makes available via its API
</Typography>
<Box py={5}>
<FeaturePlaceholder title="Feature in development" />
</Box>
</>
</Box>
);
};
export default DataManagerSettings;
24 changes: 11 additions & 13 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,18 @@ import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";

const ServiceFlags: React.FC = () => {
return (
<>
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Service flags
</Typography>
<Typography variant="body1">
Manage the flag sets that this service uses. Flags at the top of a set
override flags below.
</Typography>
<Box py={5}>
<FeaturePlaceholder title="Feature in development" />
</Box>
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Service flags
</Typography>
<Typography variant="body1">
Manage the flag sets that this service uses. Flags at the top of a set
override flags below.
</Typography>
<Box py={5}>
<FeaturePlaceholder title="Feature in development" />
</Box>
</>
</Box>
);
};
export default ServiceFlags;
22 changes: 22 additions & 0 deletions editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import React from "react";
import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";

const Submissions: React.FC = () => {
return (
<Box>
<Typography variant="h2" component="h3" gutterBottom>
Submissions
</Typography>
<Typography variant="body1">
View data on the user submitted applications for this service.
</Typography>
<Box py={5}>
<FeaturePlaceholder title="Feature in development" />
</Box>
</Box>
);
};

export default Submissions;
56 changes: 34 additions & 22 deletions editor.planx.uk/src/routes/flowSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import gql from "graphql-tag";
import { hasFeatureFlag } from "lib/featureFlags";
import { publicClient } from "lib/graphql";
import {
compose,
Expand All @@ -12,13 +13,38 @@ import {
import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings";
import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags";
import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings";
import Submissions from "pages/FlowEditor/components/Settings/Submissions";
import { useStore } from "pages/FlowEditor/lib/store";
import React from "react";

import Settings from "../pages/FlowEditor/components/Settings";
import type { FlowSettings } from "../types";
import { makeTitle } from "./utils";

const standardTabs = [
{
name: "Service",
route: "service",
Component: ServiceSettings,
},
{
name: "Service Flags",
route: "flags",
Component: ServiceFlags,
},
{
name: "Data",
route: "data-manager",
Component: DataManagerSettings,
},
];

const submissionsTab = {
name: "Submissions",
route: "submissions",
Component: Submissions,
};

const flowSettingsRoutes = compose(
withData((req) => ({
mountpath: req.mountpath,
Expand Down Expand Up @@ -58,32 +84,18 @@ const flowSettingsRoutes = compose(
const settings: FlowSettings = data.flows[0].settings;
useStore.getState().setFlowSettings(settings);

function getTabs() {
const isUsingFeatureFlag = hasFeatureFlag("SUBMISSION_VIEW");
return isUsingFeatureFlag
? [...standardTabs, submissionsTab]
: standardTabs;
}

return {
title: makeTitle(
[req.params.team, req.params.flow, "Flow Settings"].join("/"),
),
view: (
<Settings
currentTab={req.params.tab}
tabs={[
{
name: "Service",
route: "service",
Component: ServiceSettings,
},
{
name: "Service Flags",
route: "flags",
Component: ServiceFlags,
},
{
name: "Data",
route: "data-manager",
Component: DataManagerSettings,
},
]}
/>
),
view: <Settings currentTab={req.params.tab} tabs={getTabs()} />,
};
});
}),
Expand Down
Loading