Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

refactor(site): Group template permissions, settings and variables under a settings layout#6737

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.

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

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 17 commits intomainfrombq/template-settings-refactor
Mar 23, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
17 commits
Select commitHold shift + click to select a range
5ea1d23
Add template settings
BrunoQuaresmaMar 22, 2023
b40c8e7
Move permissions page
BrunoQuaresmaMar 22, 2023
13086b4
Move template variables
BrunoQuaresmaMar 22, 2023
674647c
Add schedule
BrunoQuaresmaMar 22, 2023
f5a9673
Remove schedule from general settings
BrunoQuaresmaMar 22, 2023
ce33a5c
Fix update
BrunoQuaresmaMar 22, 2023
51ae1cd
Remove permissiosn from tab
BrunoQuaresmaMar 22, 2023
d657b70
Remove go back button
BrunoQuaresmaMar 22, 2023
54fd3c3
Make template name on sidebar a link
BrunoQuaresmaMar 22, 2023
27093d4
Remove variables version
BrunoQuaresmaMar 22, 2023
7f139d7
Add titles
BrunoQuaresmaMar 22, 2023
d3081e8
Fix title
BrunoQuaresmaMar 22, 2023
e17ca38
Fix test for schedule
BrunoQuaresmaMar 22, 2023
020d79d
Fix tests
BrunoQuaresmaMar 22, 2023
9fb5b07
Fix tests
BrunoQuaresmaMar 22, 2023
2f44ba0
Fix stories
BrunoQuaresmaMar 23, 2023
b04f454
Fix e2e char
BrunoQuaresmaMar 23, 2023
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
2 changes: 1 addition & 1 deletionsite/e2e/tests/listTemplates.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,5 +5,5 @@ test.use({ storageState: getStatePath("authState") })

test("list templates", async ({ page, baseURL }) => {
await page.goto(`${baseURL}/templates`, { waitUntil: "networkidle" })
await expect(page).toHaveTitle("Templates– Coder")
await expect(page).toHaveTitle("Templates- Coder")
})
35 changes: 27 additions & 8 deletionssite/src/AppRouter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,7 @@ import AuditPage from "pages/AuditPage/AuditPage"
import GroupsPage from "pages/GroupsPage/GroupsPage"
import LoginPage from "pages/LoginPage/LoginPage"
import { SetupPage } from "pages/SetupPage/SetupPage"
import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateSettingsPage"
import { TemplateSettingsPage } from "pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPage"
import TemplatesPage from "pages/TemplatesPage/TemplatesPage"
import UsersPage from "pages/UsersPage/UsersPage"
import WorkspacesPage from "pages/WorkspacesPage/WorkspacesPage"
Expand All@@ -16,6 +16,7 @@ import { DashboardLayout } from "./components/Dashboard/DashboardLayout"
import { RequireAuth } from "./components/RequireAuth/RequireAuth"
import { SettingsLayout } from "./components/SettingsLayout/SettingsLayout"
import { DeploySettingsLayout } from "components/DeploySettingsLayout/DeploySettingsLayout"
import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout"

// Lazy load pages
// - Pages that are secondary, not in the main navigation or not usually accessed
Expand DownExpand Up@@ -50,7 +51,7 @@ const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
const TemplatePermissionsPage = lazy(
() =>
import(
"./pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPage"
"./pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPage"
),
)
const TemplateSummaryPage = lazy(
Expand DownExpand Up@@ -120,7 +121,10 @@ const CreateTemplatePage = lazy(
() => import("./pages/CreateTemplatePage/CreateTemplatePage"),
)
const TemplateVariablesPage = lazy(
() => import("./pages/TemplateVariablesPage/TemplateVariablesPage"),
() =>
import(
"./pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPage"
),
)
const WorkspaceSettingsPage = lazy(
() => import("./pages/WorkspaceSettingsPage/WorkspaceSettingsPage"),
Expand All@@ -129,7 +133,13 @@ const CreateTokenPage = lazy(
() => import("./pages/CreateTokenPage/CreateTokenPage"),
)
const TemplateFilesPage = lazy(
() => import("./pages/TemplateFilesPage/TemplateFilesPage"),
() => import("./pages/TemplatePage/TemplateFilesPage/TemplateFilesPage"),
)
const TemplateSchedulePage = lazy(
() =>
import(
"./pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePage"
),
)

export const AppRouter: FC = () => {
Expand DownExpand Up@@ -160,16 +170,25 @@ export const AppRouter: FC = () => {
<Route path=":template">
<Route element={<TemplateLayout />}>
<Route index element={<TemplateSummaryPage />} />

<Route path="files" element={<TemplateFilesPage />} />
</Route>

<Route path="workspace" element={<CreateWorkspacePage />} />

<Route path="settings" element={<TemplateSettingsLayout />}>
<Route index element={<TemplateSettingsPage />} />
<Route
path="permissions"
element={<TemplatePermissionsPage />}
/>
<Route path="files" element={<TemplateFilesPage />} />
<Route
path="variables"
element={<TemplateVariablesPage />}
/>
<Route path="schedule" element={<TemplateSchedulePage />} />
</Route>

<Route path="workspace" element={<CreateWorkspacePage />} />
<Route path="settings" element={<TemplateSettingsPage />} />
<Route path="variables" element={<TemplateVariablesPage />} />
<Route path="versions">
<Route path=":version">
<Route index element={<TemplateVersionPage />} />
Expand Down
19 changes: 0 additions & 19 deletionssite/src/components/GoBackButton/GoBackButton.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletionsite/src/components/IconField/LazyIconField.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ const IconField = lazy(() => import("./IconField"))

export const LazyIconField: FC<IconFieldProps> = (props) => {
return (
<Suspense>
<Suspense fallback={<div role="progressbar" data-testid="loader" />}>
<IconField {...props} />
</Suspense>
)
Expand Down
1 change: 1 addition & 0 deletionssite/src/components/SettingsLayout/Sidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -130,6 +130,7 @@ const useStyles = makeStyles((theme) => ({
fontWeight: 600,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
},
email: {
color: theme.palette.text.secondary,
Expand Down
43 changes: 14 additions & 29 deletionssite/src/components/TemplateLayout/TemplateLayout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,13 +42,6 @@ const fetchTemplate = async (orgId: string, templateName: string) => {
}
}

const useTemplateData = (orgId: string, templateName: string) => {
return useQuery({
queryKey: ["template", templateName],
queryFn: () => fetchTemplate(orgId, templateName),
})
}

type TemplateLayoutContextValue = Awaited<ReturnType<typeof fetchTemplate>>

const TemplateLayoutContext = createContext<
Expand All@@ -71,28 +64,31 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
const navigate = useNavigate()
const styles = useStyles()
const orgId = useOrganizationId()
const { template } = useParams() as { template: string }
const templateData = useTemplateData(orgId, template)
const { template: templateName } = useParams() as { template: string }
const { data, error, isLoading } = useQuery({
queryKey: ["template", templateName],
queryFn: () => fetchTemplate(orgId, templateName),
})
const dashboard = useDashboard()

if (templateData.error) {
if (error) {
return (
<div className={styles.error}>
<AlertBanner severity="error" error={templateData.error} />
<AlertBanner severity="error" error={error} />
</div>
)
}

if (templateData.isLoading || !templateData.data) {
if (isLoading || !data) {
return <Loader />
}

return (
<>
<TemplatePageHeader
template={templateData.data.template}
activeVersion={templateData.data.activeVersion}
permissions={templateData.data.permissions}
template={data.template}
activeVersion={data.activeVersion}
permissions={data.permissions}
canEditFiles={dashboard.experiments.includes("template_editor")}
onDeleteTemplate={() => {
navigate("/templates")
Expand All@@ -104,7 +100,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
<Stack direction="row" spacing={0.25}>
<NavLink
end
to={`/templates/${template}`}
to={`/templates/${templateName}`}
className={({ isActive }) =>
combineClasses([
styles.tabItem,
Expand All@@ -115,18 +111,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
Summary
</NavLink>
<NavLink
to={`/templates/${template}/permissions`}
className={({ isActive }) =>
combineClasses([
styles.tabItem,
isActive ? styles.tabItemActive : undefined,
])
}
>
Permissions
</NavLink>
<NavLink
to={`/templates/${template}/files`}
to={`/templates/${templateName}/files`}
className={({ isActive }) =>
combineClasses([
styles.tabItem,
Expand All@@ -141,7 +126,7 @@ export const TemplateLayout: FC<{ children?: JSX.Element }> = ({
</div>

<Margins>
<TemplateLayoutContext.Provider value={templateData.data}>
<TemplateLayoutContext.Provider value={data}>
<Suspense fallback={<Loader />}>{children}</Suspense>
</TemplateLayoutContext.Provider>
</Margins>
Expand Down
7 changes: 0 additions & 7 deletionssite/src/components/TemplateLayout/TemplatePageHeader.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -67,13 +67,6 @@ const TemplateMenu: FC<{
>
{Language.settingsButton}
</MenuItem>
<MenuItem
component={RouterLink}
to={`/templates/${templateName}/variables`}
onClick={handleClose}
>
{Language.variablesButton}
</MenuItem>
{canEditFiles && (
<MenuItem
component={RouterLink}
Expand Down
2 changes: 1 addition & 1 deletionsite/src/i18n/en/templateSettingsPage.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
{
"title": "Template settings",
"title": "General Settings",
"nameLabel": "Name",
"displayNameLabel": "Display name",
"descriptionLabel": "Description",
Expand Down
149 changes: 149 additions & 0 deletionssite/src/pages/TemplateSettingsPage/Sidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
import { makeStyles } from "@material-ui/core/styles"
import ScheduleIcon from "@material-ui/icons/TimerOutlined"
import VariablesIcon from "@material-ui/icons/CodeOutlined"
import { Template } from "api/typesGenerated"
import { Stack } from "components/Stack/Stack"
import { FC, ElementType, PropsWithChildren, ReactNode } from "react"
import { Link, NavLink } from "react-router-dom"
import { combineClasses } from "util/combineClasses"
import GeneralIcon from "@material-ui/icons/SettingsOutlined"
import SecurityIcon from "@material-ui/icons/LockOutlined"
import { Avatar } from "components/Avatar/Avatar"

const SidebarNavItem: FC<
PropsWithChildren<{ href: string; icon: ReactNode }>
> = ({ children, href, icon }) => {
const styles = useStyles()
return (
<NavLink
end
to={href}
className={({ isActive }) =>
combineClasses([
styles.sidebarNavItem,
isActive ? styles.sidebarNavItemActive : undefined,
])
}
>
<Stack alignItems="center" spacing={1.5} direction="row">
{icon}
{children}
</Stack>
</NavLink>
)
}

const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
icon: Icon,
}) => {
const styles = useStyles()
return <Icon className={styles.sidebarNavItemIcon} />
}

export const Sidebar: React.FC<{ template: Template }> = ({ template }) => {
const styles = useStyles()

return (
<nav className={styles.sidebar}>
<Stack
direction="row"
alignItems="center"
className={styles.templateInfo}
>
<Avatar src={template.icon} variant="square" fitImage />
<Stack spacing={0} className={styles.templateData}>
<Link className={styles.name} to={`/templates/${template.name}`}>
{template.display_name !== ""
? template.display_name
: template.name}
</Link>
<span className={styles.secondary}>{template.name}</span>
</Stack>
</Stack>

<SidebarNavItem href="" icon={<SidebarNavItemIcon icon={GeneralIcon} />}>
General
</SidebarNavItem>
<SidebarNavItem
href="permissions"
icon={<SidebarNavItemIcon icon={SecurityIcon} />}
>
Permissions
</SidebarNavItem>
<SidebarNavItem
href="variables"
icon={<SidebarNavItemIcon icon={VariablesIcon} />}
>
Variables
</SidebarNavItem>
<SidebarNavItem
href="schedule"
icon={<SidebarNavItemIcon icon={ScheduleIcon} />}
>
Schedule
</SidebarNavItem>
</nav>
)
}

const useStyles = makeStyles((theme) => ({
sidebar: {
width: 245,
flexShrink: 0,
},
sidebarNavItem: {
color: "inherit",
display: "block",
fontSize: 14,
textDecoration: "none",
padding: theme.spacing(1.5, 1.5, 1.5, 2),
borderRadius: theme.shape.borderRadius / 2,
transition: "background-color 0.15s ease-in-out",
marginBottom: 1,
position: "relative",

"&:hover": {
backgroundColor: theme.palette.action.hover,
},
},
sidebarNavItemActive: {
backgroundColor: theme.palette.action.hover,

"&:before": {
content: '""',
display: "block",
width: 3,
height: "100%",
position: "absolute",
left: 0,
top: 0,
backgroundColor: theme.palette.secondary.dark,
borderTopLeftRadius: theme.shape.borderRadius,
borderBottomLeftRadius: theme.shape.borderRadius,
},
},
sidebarNavItemIcon: {
width: theme.spacing(2),
height: theme.spacing(2),
},
templateInfo: {
marginBottom: theme.spacing(2),
},
templateData: {
overflow: "hidden",
},
name: {
fontWeight: 600,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
color: theme.palette.text.primary,
textDecoration: "none",
},
secondary: {
color: theme.palette.text.secondary,
fontSize: 12,
overflow: "hidden",
textOverflow: "ellipsis",
},
}))
Loading
[8]ページ先頭
©2009-2025 Movatter.jp