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: Only show "Team Settings" menu for users with teamEditor role #2693

Merged
merged 5 commits into from
Jan 24, 2024
Merged

feat: Only show "Team Settings" menu for users with teamEditor role #2693

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
deab12d
feat: Only show TeamSettings menu for TeamEditors
DafyddLlyr Jan 23, 2024
f405966
fix: Add permissions route guards
DafyddLlyr Jan 23, 2024
b0726e7
feat: Correctly setup Hasura permissions
DafyddLlyr Jan 23, 2024
f5f9542
fix: Hide other header menu options
DafyddLlyr Jan 23, 2024
e74a7be
fix: Add route guard to global-settings
DafyddLlyr Jan 23, 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
18 changes: 14 additions & 4 deletions editor.planx.uk/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,10 +400,11 @@ const EditorToolbar: React.FC<{
}> = ({ headerRef, route }) => {
const { navigate } = useNavigation();
const [open, setOpen] = useState(false);
const [togglePreview, user, team] = useStore((state) => [
const [togglePreview, user, team, canUserEditTeam] = useStore((state) => [
state.togglePreview,
state.getUser(),
state.getTeam(),
state.canUserEditTeam,
]);

const handleClose = () => {
Expand All @@ -414,6 +415,15 @@ const EditorToolbar: React.FC<{
setOpen(!open);
};

const isFlowSettingsVisible =
route.data.flow && !route.data.flow && canUserEditTeam(team.slug);

const isTeamSettingsVisible =
route.data.team && !route.data.flow && canUserEditTeam(team.slug);

const isGlobalSettingsVisible =
!route.data.flow && !team.slug && user?.isPlatformAdmin;
Comment on lines +418 to +425
Copy link
Contributor Author

Choose a reason for hiding this comment

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

A few related fixes / tidy ups to the change made in this PR , apologies for polluting things a little.


return (
<>
<StyledToolbar disableGutters>
Expand Down Expand Up @@ -496,14 +506,14 @@ const EditorToolbar: React.FC<{
)}

{/* Only show team settings link if inside a team route */}
{route.data.team && !route.data.flow && (
{isTeamSettingsVisible && (
<MenuItem onClick={() => navigate(`${rootTeamPath()}/settings`)}>
Team Settings
</MenuItem>
)}

{/* Only show flow settings link if inside a flow route */}
{route.data.flow && (
{isFlowSettingsVisible && (
<MenuItem
onClick={() =>
navigate([rootFlowPath(true), "settings"].join("/"))
Expand All @@ -514,7 +524,7 @@ const EditorToolbar: React.FC<{
)}

{/* Only show global settings link from top-level admin view */}
{!route.data.flow && !team.slug && (
{isGlobalSettingsVisible && (
<MenuItem onClick={() => navigate("/global-settings")}>
Global Settings
</MenuItem>
Expand Down
114 changes: 65 additions & 49 deletions editor.planx.uk/src/routes/flowSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
import gql from "graphql-tag";
import { publicClient } from "lib/graphql";
import { compose, mount, redirect, route, withData } from "navi";
import {
compose,
map,
mount,
NotFoundError,
redirect,
route,
withData,
} from "navi";
import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings";
import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags";
import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings";
Expand All @@ -18,58 +26,66 @@ const flowSettingsRoutes = compose(

mount({
"/": redirect("./service"),
"/:tab": route(async (req) => {
const { data } = await publicClient.query({
query: gql`
query GetFlow($slug: String!, $team_slug: String!) {
flows(
limit: 1
where: {
slug: { _eq: $slug }
team: { slug: { _eq: $team_slug } }
"/:tab": map(async (req) => {
const isAuthorised = useStore.getState().canUserEditTeam(req.params.team);
if (!isAuthorised)
throw new NotFoundError(
`User does not have access to ${req.originalUrl}`,
);
Comment on lines +30 to +34
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I noticed that this was missing and picked up the fix here. On staging and prod you can navigate to <flow>/settings without the proper permissions.


return route(async (req) => {
const { data } = await publicClient.query({
query: gql`
query GetFlow($slug: String!, $team_slug: String!) {
flows(
limit: 1
where: {
slug: { _eq: $slug }
team: { slug: { _eq: $team_slug } }
}
) {
id
settings
}
) {
id
settings
}
}
`,
variables: {
slug: req.params.flow,
team_slug: req.params.team,
},
});
`,
variables: {
slug: req.params.flow,
team_slug: req.params.team,
},
});

const settings: FlowSettings = data.flows[0].settings;
useStore.getState().setFlowSettings(settings);
const settings: FlowSettings = data.flows[0].settings;
useStore.getState().setFlowSettings(settings);

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,
},
]}
/>
),
};
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,
},
]}
/>
),
};
});
}),
}),
);
Expand Down
63 changes: 40 additions & 23 deletions editor.planx.uk/src/routes/teamSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,56 @@
import { compose, mount, redirect, route, withData } from "navi";
import {
compose,
map,
mount,
NotFoundError,
redirect,
route,
withData,
} from "navi";
import DesignSettings from "pages/FlowEditor/components/Settings/DesignSettings";
import TeamSettings from "pages/FlowEditor/components/Settings/TeamSettings";
import { useStore } from "pages/FlowEditor/lib/store";
import React from "react";

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

const flowSettingsRoutes = compose(
const teamSettingsRoutes = compose(
withData((req) => ({
mountpath: req.mountpath,
})),

mount({
"/": redirect("./team"),
"/:tab": route(async (req) => ({
title: makeTitle([req.params.team, "Team Settings"].join("/")),
view: (
<Settings
currentTab={req.params.tab}
tabs={[
{
name: "Team",
route: "team",
Component: TeamSettings,
},
{
name: "Design",
route: "design",
Component: DesignSettings,
},
]}
/>
),
})),
"/:tab": map(async (req) => {
const isAuthorised = useStore.getState().canUserEditTeam(req.params.team);
if (!isAuthorised)
throw new NotFoundError(
`User does not have access to ${req.originalUrl}`,
);

return route(async (req) => ({
title: makeTitle([req.params.team, "Team Settings"].join("/")),
view: (
<Settings
currentTab={req.params.tab}
tabs={[
{
name: "Team",
route: "team",
Component: TeamSettings,
},
{
name: "Design",
route: "design",
Component: DesignSettings,
},
]}
/>
),
}));
}),
}),
);

export default flowSettingsRoutes;
export default teamSettingsRoutes;
13 changes: 12 additions & 1 deletion hasura.planx.uk/metadata/tables.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1412,6 +1412,10 @@
- table:
name: team_themes
schema: public
object_relationships:
- name: team
using:
foreign_key_constraint_on: team_id
select_permissions:
- role: api
permission:
Expand Down Expand Up @@ -1481,7 +1485,14 @@
- link_colour
- logo
- primary_colour
filter: {}
filter:
team:
members:
_and:
- user_id:
_eq: x-hasura-user-id
- role:
_eq: teamEditor
Comment on lines +1488 to +1495
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This equates to "teams where the user is a teamEditor"

check: null
comment: ""
- table:
Expand Down
Loading