8000 feat: Add helpful tooltips for the key features by BrunoQuaresma · Pull Request #2097 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

feat: Add helpful tooltips for the key features #2097

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 7 commits into from
Jun 7, 2022
Merged

feat: Add helpful tooltips for the key features #2097

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d453963
feat: Add page header and help tooltips
BrunoQuaresma Jun 6, 2022
c4e15cd
Add header in the logs page
BrunoQuaresma Jun 6, 2022
c725b33
Refactor page header title and subtitle
BrunoQuaresma Jun 6, 2022
9e2b90c
Update page header
BrunoQuaresma Jun 6, 2022
915c3c5
Add tooltip for agent and resource
BrunoQuaresma Jun 6, 2022
05af10a
Add help space from titles
BrunoQuaresma Jun 6, 2022
81f2e16
Move tooltip content to language object
BrunoQuaresma Jun 7, 2022
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 page header title and subtitle
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Jun 6, 2022
commit c725b33d1d2b2f442eca3ddf82b3eb58dc83a1a7
33 changes: 25 additions & 8 deletions site/src/components/PageHeader/PageHeader.tsx
View file
Open in desktop
8000
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
import { makeStyles } from "@material-ui/core/styles"
import { Stack } from "../Stack/Stack"

export const PageHeader: React.FC = ({ children }) => {
export interface PageHeaderProps {
actions?: JSX.Element
}

export const PageHeader: React.FC<PageHeaderProps> = ({ children, actions }) => {
const styles = useStyles()

return <div className={styles.root}>{children}</div>
return (
<div className={styles.root}>
<hgroup>{children}</hgroup>
<Stack direction="row" className={styles.actions}>
{actions}
</Stack>
</div>
)
}

export const PageHeaderTitle: React.FC = ({ children }) => {
Expand All @@ -13,14 +24,10 @@ export const PageHeaderTitle: React.FC = ({ children }) => {
return <h1 className={styles.title}>{children}</h1>
}

export const PageHeaderActions: React.FC = ({ children }) => {
export const PageHeaderSubtitle: React.FC = ({ children }) => {
const styles = useStyles()

return (
<Stack direction="row" className={styles.actions}>
{children}
</Stack>
)
return <h2 className={styles.subtitle}>{children}</h2>
}

const useStyles = makeStyles((theme) => ({
Expand All @@ -37,6 +44,16 @@ const useStyles = makeStyles((theme) => ({
margin: 0,
display: "flex",
alignItems: "center",
lineHeight: "140%",
},

subtitle: {
fontSize: theme.spacing(2.5),
color: theme.palette.text.secondary,
fontWeight: 400,
display: "block",
margin: 0,
marginTop: theme.spacing(1),
},

actions: {
Expand Down
59 changes: 11 additions & 48 deletions site/src/pages/TemplatePage/TemplatePageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import Button from "@material-ui/core/Button"
import Link from "@material-ui/core/Link"
import { makeStyles } from "@material-ui/core/styles"
import Typography from "@material-ui/core/Typography"
import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
import frontMatter from "front-matter"
import { FC } from "react"
import ReactMarkdown from "react-markdown"
import { Link as RouterLink } from "react-router-dom"
import { Template, TemplateVersion, WorkspaceResource } from "../../api/typesGenerated"
import { Margins } from "../../components/Margins/Margins"
import { PageHeader, PageHeaderSubtitle, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
import { Stack } from "../../components/Stack/Stack"
import { TemplateResourcesTable } from "../../components/TemplateResourcesTable/TemplateResourcesTable"
import { TemplateStats } from "../../components/TemplateStats/TemplateStats"
import { WorkspaceSection } from "../../components/WorkspaceSection/WorkspaceSection"
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"

const Language = {
createButton: "Create workspace",
Expand All @@ -38,23 +37,19 @@ export const TemplatePageView: FC<TemplatePageViewProps> = ({ template, activeTe

return (
<Margins>
<div className={styles.header}>
<div>
<Typography variant="h4" className={styles.title}>
{template.name}
</Typography>

<Typography color="textSecondary" className={styles.subtitle}>
{template.description === "" ? Language.noDescription : template.description}
</Typography>
</div>

<div className={styles.headerActions}>
<PageHeader
actions={
<Link underline="none" component={RouterLink} to={`/workspaces/new?template=${template.name}`}>
<Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
</Link>
</div>
</div>
}
>
<PageHeaderTitle>{template.name}</PageHeaderTitle>
<PageHeaderSubtitle>
{" "}
{template.description === "" ? Language.noDescription : template.description}
</PageHeaderSubtitle>
</PageHeader>

<Stack spacing={3}>
<TemplateStats template={template} activeVersion={activeTemplateVersion} />
Expand Down Expand Up @@ -83,38 +78,6 @@ export const TemplatePageView: FC<TemplatePageViewProps> = ({ template, activeTe

export const useStyles = makeStyles((theme) => {
return {
root: {
display: "flex",
flexDirection: "column",
},
header: {
paddingTop: theme.spacing(5),
paddingBottom: theme.spacing(5),
fontFamily: MONOSPACE_FONT_FAMILY,
display: "flex",
alignItems: "center",
},
headerActions: {
marginLeft: "auto",
},
title: {
fontWeight: 600,
fontFamily: "inherit",
},
subtitle: {
fontFamily: "inherit",
marginTop: theme.spacing(0.5),
},
layout: {
alignItems: "flex-start",
},
main: {
width: "100%",
},
sidebar: {
width: theme.spacing(32),
flexShrink: 0,
},
readmeContents: {
margin: 0,
},
Expand Down
15 changes: 8 additions & 7 deletions site/src/pages/UsersPage/UsersPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { FC } from "react"
import * as TypesGen from "../../api/typesGenerated"
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSum 10000 mary"
import { Margins } from "../../components/Margins/Margins"
import { PageHeader, PageHeaderActions, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
import { UsersTable } from "../../components/UsersTable/UsersTable"

export const Language = {
Expand Down Expand Up @@ -41,15 +41,16 @@ export const UsersPageView: FC<UsersPageViewProps> = ({
}) => {
return (
<Margins>
<PageHeader>
<PageHeaderTitle>Users</PageHeaderTitle>
<PageHeaderActions>
{canCreateUser && (
<PageHeader
actions={
canCreateUser ? (
<Button onClick={openUserCreationDialog} startIcon={<AddCircleOutline />}>
{Language.createButton}
</Button>
)}
</PageHeaderActions>
) : undefined
}
>
<PageHeaderTitle>Users</PageHeaderTitle>
</PageHeader>

{error ? (
Expand Down
18 changes: 9 additions & 9 deletions site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
HelpTooltipTitle,
} from "../../components/HelpTooltip/HelpTooltip"
import { Margins } from "../../components/Margins/Margins"
import { PageHeader, PageHeaderActions, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHeader"
import { Stack } from "../../components/Stack/Stack"
import { TableLoader } from "../../components/TableLoader/TableLoader"
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
Expand Down Expand Up @@ -124,19 +124,19 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works

return (
<Margins>
<PageHeader>
<PageHeaderTitle>
Workspaces
<WorkspaceHelpTooltip />
</PageHeaderTitle>

<PageHeaderActions>
<PageHeader
actions={
<Link underline="none" component={RouterLink} to="/workspaces/new">
<Button startIcon={<AddCircleOutline />} style={{ height: "44px" }}>
{Language.createWorkspaceButton}
</Button>
</Link>
</PageHeaderActions>
}
>
<PageHeaderTitle>
Workspaces
<WorkspaceHelpTooltip />
</PageHeaderTitle>
</PageHeader>

<Stack direction="row" spacing={0} className={styles.filterContainer}>
Expand Down
0