Skip to content

feat(site): refactor template version editor layout #10912

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

Merged
merged 9 commits into from
Nov 28, 2023
Merged

feat(site): refactor template version editor layout #10912

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
90c68a3
Add base template editor behavior
BrunoQuaresma Nov 27, 2023
5c15516
Finish details
BrunoQuaresma Nov 27, 2023
ec90ce1
Fix test
BrunoQuaresma Nov 27, 2023
b2f0054
Minor fixes
BrunoQuaresma Nov 28, 2023
3c4c0f5
Allow submit publish form using keyboard
BrunoQuaresma Nov 28, 2023
2735d25
Add link to the header
BrunoQuaresma Nov 28, 2023
bbe7894
Add better loading
BrunoQuaresma Nov 28, 2023
9ed1474
Fix fmt
BrunoQuaresma Nov 28, 2023
46a1944
Update site/src/AppRouter.tsx
BrunoQuaresma Nov 28, 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
10 changes: 5 additions & 5 deletions site/src/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,10 +259,6 @@ export const AppRouter: FC = () => {
<Route path="versions">
<Route path=":version">
<Route index element={<TemplateVersionPage />} />
<Route
path="edit"
element={<TemplateVersionEditorPage />}
/>
</Route>
</Route>
</Route>
Expand Down Expand Up @@ -346,13 +342,17 @@ export const AppRouter: FC = () => {
</Route>
</Route>

{/* Terminal and CLI auth pages don't have the dashboard layout */}
{/* Pages that don't have the dashboard layout */}
<Route
path="/:username/:workspace/terminal"
element={<TerminalPage />}
/>
<Route path="/cli-auth" element={<CliAuthenticationPage />} />
<Route path="/icons" element={<IconsPage />} />
<Route
path="/templates/:template/versions/:version/edit"
element={<TemplateVersionEditorPage />}
/>
</Route>

{/* Using path="*"" means "match anything", so this route
Expand Down
8 changes: 6 additions & 2 deletions site/src/components/WorkspaceBuildLogs/Logs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
className = "",
}) => {
return (
<div css={styles.root} className={className}>
<div css={styles.root} className={`${className} logs-container`}>
Copy link
Member

Choose a reason for hiding this comment

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

I forgot the details for when something can and can't support the css, but I'm thinking that this could be consolidated into a single css prop

<div css={{ minWidth: "fit-content" }}>
{lines.map((line, idx) => (
<div css={styles.line} className={line.level} key={idx}>
<div
css={[styles.line]}
className={`${line.level} logs-line`}
key={idx}
>
{!hideTimestamps && (
<>
<span css={styles.time}>
Expand Down
5 changes: 4 additions & 1 deletion site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,10 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({

return (
<Fragment key={stage}>
<div css={[styles.header, sticky && styles.sticky]}>
<div
css={[styles.header, sticky && styles.sticky]}
className="logs-header"
>
<div>{stage}</div>
{shouldDisplayDuration && (
<div css={styles.duration}>
Expand Down
1 change: 0 additions & 1 deletion site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,6 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
<TextField
{...getFieldHelpers("deprecation_message")}
disabled={isSubmitting || !accessControlEnabled}
autoFocus
fullWidth
label="Deprecation Message"
/>
Expand Down
3 changes: 2 additions & 1 deletion site/src/pages/TemplateVersionEditorPage/FileTreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const FileTreeView: FC<{
css={(theme) => css`
overflow: hidden;
user-select: none;
height: 32px;

&:focus:not(.active) > .MuiTreeItem-content {
background: ${theme.palette.action.hover};
Expand Down Expand Up @@ -92,7 +93,7 @@ export const FileTreeView: FC<{
&.active {
& > .MuiTreeItem-content {
color: ${theme.palette.text.primary};
background: ${colors.gray[13]};
background: ${colors.gray[14]};
pointer-events: none;
}
}
Expand Down
25 changes: 3 additions & 22 deletions site/src/pages/TemplateVersionEditorPage/MonacoEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { useTheme } from "@emotion/react";
import Editor, { loader } from "@monaco-editor/react";
import * as monaco from "monaco-editor";
import { FC, useLayoutEffect, useMemo, useState } from "react";
import { FC, useMemo } from "react";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import type { editor } from "monaco-editor";

loader.config({ monaco });

Expand All @@ -13,22 +12,6 @@ export const MonacoEditor: FC<{
onChange?: (value: string) => void;
}> = ({ onChange, value, path }) => {
const theme = useTheme();
const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
useLayoutEffect(() => {
Copy link
Member

Choose a reason for hiding this comment

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

Just curious: do you know why we needed the resize listeners originally?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

To resize the editor when the bottom panel was open/closed but Idk why we were using it since the autoLayout prop was set to true 🤔 maybe someone faced a bug and used the listener? I tested both cases and they worked without it tho

if (!editor) {
return;
}
const resizeListener = () => {
editor.layout({
height: 0,
width: 0,
});
};
window.addEventListener("resize", resizeListener);
return () => {
window.removeEventListener("resize", resizeListener);
};
}, [editor]);

const language = useMemo(() => {
if (path?.endsWith(".tf")) {
Expand Down Expand Up @@ -56,7 +39,7 @@ export const MonacoEditor: FC<{
options={{
automaticLayout: true,
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 16,
fontSize: 14,
wordWrap: "on",
padding: {
top: 16,
Expand All @@ -81,8 +64,6 @@ export const MonacoEditor: FC<{
},
);

setEditor(editor);

document.fonts.ready
.then(() => {
// Ensures that all text is measured properly.
Expand Down Expand Up @@ -124,7 +105,7 @@ export const MonacoEditor: FC<{
],
colors: {
"editor.foreground": theme.palette.text.primary,
"editor.background": theme.palette.background.default,
"editor.background": theme.palette.background.paper,
},
});
editor.updateOptions({
Expand Down
73 changes: 37 additions & 36 deletions site/src/pages/TemplateVersionEditorPage/PublishTemplateVersionDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,44 +68,45 @@ export const PublishTemplateVersionDialog: FC<
confirmText="Publish"
title="Publish new version"
description={
<Stack>
<p>You are about to publish a new version of this template.</p>
<FormFields>
<TextField
{...getFieldHelpers("name")}
label={Language.versionNameLabel}
autoFocus
disabled={isPublishing}
/>
<form id="publish-version" onSubmit={form.handleSubmit}>
<Stack>
<p>You are about to publish a new version of this template.</p>
<FormFields>
<TextField
{...getFieldHelpers("name")}
label={Language.versionNameLabel}
autoFocus
disabled={isPublishing}
/>

<TextField
{...getFieldHelpers("message")}
label="Message"
placeholder={Language.messagePlaceholder}
autoFocus
disabled={isPublishing}
multiline
rows={5}
/>
<TextField
{...getFieldHelpers("message")}
label="Message"
placeholder={Language.messagePlaceholder}
disabled={isPublishing}
multiline
rows={5}
/>

<FormControlLabel
label={Language.defaultCheckboxLabel}
control={
<Checkbox
size="small"
checked={form.values.isActiveVersion}
onChange={async (e) => {
await form.setFieldValue(
"isActiveVersion",
e.target.checked,
);
}}
name="isActiveVersion"
/>
}
/>
</FormFields>
</Stack>
<FormControlLabel
label={Language.defaultCheckboxLabel}
control={
<Checkbox
size="small"
checked={form.values.isActiveVersion}
onChange={async (e) => {
await form.setFieldValue(
"isActiveVersion",
e.target.checked,
);
}}
name="isActiveVersion"
/>
}
/>
</FormFields>
</Stack>
</form>
}
/>
);
Expand Down
Loading