Skip to content

fix(site): fix and improve pending state on template editor UI #12766

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 4 commits into from
Mar 27, 2024
Merged

fix(site): fix and improve pending state on template editor UI #12766

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
746072b
Fix pending state
BrunoQuaresma Mar 26, 2024
77d2d33
Add test
BrunoQuaresma Mar 26, 2024
bc6f070
Refactor tab content style
BrunoQuaresma Mar 27, 2024
872634a
Refactor styles
BrunoQuaresma Mar 27, 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
Prev Previous commit
Next Next commit
Refactor tab content style
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Mar 27, 2024
commit bc6f070c2593ff3a5573efb81bde5d7d00cdea61
105 changes: 55 additions & 50 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
typeof editorValue === "string" ? isBinaryData(editorValue) : false;

// Auto scroll
const buildLogsRef = useRef<HTMLDivElement>(null);
const tabContentRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (buildLogsRef.current) {
buildLogsRef.current.scrollTop = buildLogsRef.current.scrollHeight;
if (tabContentRef.current) {
tabContentRef.current.scrollTop = tabContentRef.current.scrollHeight;
}
}, [buildLogs]);

Expand Down Expand Up @@ -573,55 +573,51 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
)}
</div>

{selectedTab === "logs" && (
<div
ref={buildLogsRef}
css={{
display: "flex",
height: selectedTab ? 280 : 0,
flexDirection: "column",
overflowY: "auto",
}}
>
{templateVersion.job.error && (
<div>
<Alert
severity="error"
css={{
borderRadius: 0,
border: 0,
borderBottom: `1px solid ${theme.palette.divider}`,
borderLeft: `2px solid ${theme.palette.error.main}`,
}}
>
<AlertTitle>Error during the build</AlertTitle>
<AlertDetail>{templateVersion.job.error}</AlertDetail>
</Alert>
</div>
)}
{selectedTab && (
<div css={styles.tabContent} ref={tabContentRef}>
{selectedTab === "logs" && (
<div css={styles.logs}>
{templateVersion.job.error && (
<div>
<Alert
severity="error"
css={{
borderRadius: 0,
border: 0,
borderBottom: `1px solid ${theme.palette.divider}`,
borderLeft: `2px solid ${theme.palette.error.main}`,
}}
>
<AlertTitle>Error during the build</AlertTitle>
<AlertDetail>
{templateVersion.job.error}
</AlertDetail>
</Alert>
</div>
)}

{buildLogs && buildLogs.length > 0 ? (
<WorkspaceBuildLogs
css={styles.buildLogs}
hideTimestamps
logs={buildLogs}
/>
) : (
<Loader css={{ height: "100%" }} />
{buildLogs && buildLogs.length > 0 ? (
<WorkspaceBuildLogs
css={styles.buildLogs}
hideTimestamps
logs={buildLogs}
/>
) : (
<Loader css={{ height: "100%" }} />
)}
</div>
)}
</div>
)}

{selectedTab === "resources" && (
<div
css={[{ height: selectedTab ? 280 : 0 }, styles.resources]}
>
{resources && (
<TemplateResourcesTable
resources={resources.filter(
(r) => r.workspace_transition === "start",
{selectedTab === "resources" && (
<div css={styles.resources}>
{resources && (
<TemplateResourcesTable
resources={resources.filter(
(r) => r.workspace_transition === "start",
)}
/>
)}
/>
</div>
)}
</div>
)}
Expand Down Expand Up @@ -745,6 +741,17 @@ const styles = {
},
}),

tabContent: {
height: 280,
overflowY: "auto",
},

logs: {
display: "flex",
height: "100%",
flexDirection: "column",
},

buildLogs: {
borderRadius: 0,
border: 0,
Expand Down Expand Up @@ -774,8 +781,6 @@ const styles = {
},

resources: {
overflowY: "auto",

// Hack to access customize resource-card from here
"& .resource-card": {
borderLeft: 0,
Expand Down
Loading