Skip to content

feat(site): show previous agent scripts logs #12233

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 12 commits into from
Feb 21, 2024
Merged

feat(site): show previous agent scripts logs #12233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
707e60e
WIP: Refactor agent logs and tabs to be reusable
BrunoQuaresma Feb 16, 2024
0d1fb45
Merge branch 'main' of https://github.com/coder/coder into bq/show-ag…
BrunoQuaresma Feb 20, 2024
5436b15
Display tabs for agent logs
BrunoQuaresma Feb 20, 2024
67bf84b
Minor visual tweaks
BrunoQuaresma Feb 20, 2024
4258969
Merge branch 'main' of https://github.com/coder/coder into bq/show-ag…
BrunoQuaresma Feb 21, 2024
93b1184
Use padding x as const
BrunoQuaresma Feb 21, 2024
94a64e9
Simplify agents selection
BrunoQuaresma Feb 21, 2024
dbdbedd
Fix tabs storybook
BrunoQuaresma Feb 21, 2024
29429a7
Add test to ensure agent logs are displayed
BrunoQuaresma Feb 21, 2024
728af1a
Merge branch 'main' of https://github.com/coder/coder into bq/show-ag…
BrunoQuaresma Feb 21, 2024
20f25e1
Remove ref
BrunoQuaresma Feb 21, 2024
da45599
Merge branch 'main' of https://github.com/coder/coder into bq/show-ag…
BrunoQuaresma Feb 21, 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
19 changes: 13 additions & 6 deletions site/src/components/Tabs/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Tabs, TabLink } from "./Tabs";
import { Tabs, TabLink, TabsList } from "./Tabs";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Tabs> = {
Expand All @@ -11,12 +11,19 @@ type Story = StoryObj<typeof Tabs>;

export const Default: Story = {
args: {
active: "tab-1",
children: (
<>
<TabLink to="">Tab 1</TabLink>
<TabLink to="tab-3">Tab 2</TabLink>
<TabLink to="tab-4">Tab 3</TabLink>
</>
<TabsList>
<TabLink value="tab-1" to="">
Tab 1
</TabLink>
<TabLink value="tab-2" to="tab-3">
Tab 2
</TabLink>
<TabLink value="tab-3" to="tab-4">
Tab 3
</TabLink>
</TabsList>
),
},
};
145 changes: 81 additions & 64 deletions site/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

Big fan of the file changes – looks really clean now.
Once this PR is out, would you be okay with me adding some accessibility code? Mainly want to add some stuff from the APG example for tabs

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

100% I'm not attached to my code at all 😆

Original file line number Diff line number Diff line change
@@ -1,78 +1,95 @@
import { cx } from "@emotion/css";
import { type FC, type PropsWithChildren } from "react";
import { NavLink, NavLinkProps } from "react-router-dom";
import { Margins } from "components/Margins/Margins";
import { type ClassName, useClassName } from "hooks/useClassName";
import { HTMLAttributes, type FC, createContext, useContext } from "react";
import { Link, LinkProps } from "react-router-dom";
import { Interpolation, Theme, useTheme } from "@emotion/react";

export const TAB_PADDING_Y = 12;
export const TAB_PADDING_X = 16;

type TabsContextValue = {
active: string;
};

const TabsContext = createContext<TabsContextValue | undefined>(undefined);

type TabsProps = HTMLAttributes<HTMLDivElement> & TabsContextValue;

export const Tabs: FC<TabsProps> = ({ active, ...htmlProps }) => {
const theme = useTheme();

export const Tabs: FC<PropsWithChildren> = ({ children }) => {
return (
<div
css={(theme) => ({
borderBottom: `1px solid ${theme.palette.divider}`,
marginBottom: 40,
})}
>
<Margins
<TabsContext.Provider value={{ active }}>
<div
css={{
display: "flex",
alignItems: "center",
gap: 2,
borderBottom: `1px solid ${theme.palette.divider}`,
}}
>
{children}
</Margins>
</div>
{...htmlProps}
/>
</TabsContext.Provider>
);
};

type TabsListProps = HTMLAttributes<HTMLDivElement>;

export const TabsList: FC<TabsListProps> = (props) => {
return (
<div
role="tablist"
css={{
display: "flex",
alignItems: "baseline",
}}
{...props}
/>
);
};

interface TabLinkProps extends NavLinkProps {
className?: string;
}
type TabLinkProps = LinkProps & {
value: string;
};

export const TabLink: FC<TabLinkProps> = ({
className,
children,
...linkProps
}) => {
const tabLink = useClassName(classNames.tabLink, []);
const activeTabLink = useClassName(classNames.activeTabLink, []);
export const TabLink: FC<TabLinkProps> = ({ value, ...linkProps }) => {
const tabsContext = useContext(TabsContext);

if (!tabsContext) {
throw new Error("Tab only can be used inside of Tabs");
}

const isActive = tabsContext.active === value;

return (
<NavLink
className={({ isActive }) =>
cx([tabLink, isActive && activeTabLink, className])
}
<Link
{...linkProps}
>
{children}
</NavLink>
css={[styles.tabLink, isActive ? styles.activeTabLink : ""]}
/>
);
};

const classNames = {
tabLink: (css, theme) => css`
text-decoration: none;
color: ${theme.palette.text.secondary};
font-size: 14px;
display: block;
padding: 0 16px 16px;

&:hover {
color: ${theme.palette.text.primary};
}
`,
activeTabLink: (css, theme) => css`
color: ${theme.palette.text.primary};
position: relative;

&:before {
content: "";
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: ${theme.palette.primary.main};
position: absolute;
}
`,
} satisfies Record<string, ClassName>;
const styles = {
tabLink: (theme) => ({
textDecoration: "none",
color: theme.palette.text.secondary,
fontSize: 14,
display: "block",
padding: `${TAB_PADDING_Y}px ${TAB_PADDING_X}px`,
fontWeight: 500,
lineHeight: "1",

"&:hover": {
color: theme.palette.text.primary,
},
}),
activeTabLink: (theme) => ({
color: theme.palette.text.primary,
position: "relative",

"&:before": {
Copy link
Member

@Parkreiner Parkreiner Feb 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Is this for the accent underline? I'm wondering if it might be more direct to add a bottom border to all the tabs.
As in, give all the tabs the same border thickness and line style, but not the same color. If the tab's active, it could use the primary accent color, and if not, it could use the same color as the background, and blend them together

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes. In the way you suggested it does not vertically align the content correctly since it is off by 1px at the bottom so you also would need to add a border to the top which starts to make the CSS more "complicated" IMO. I just think the before is easier to understand and implement.

content: '""',
left: 0,
bottom: -1,
height: 1,
width: "100%",
background: theme.palette.primary.main,
position: "absolute",
},
}),
} satisfies Record<string, Interpolation<Theme>>;
Loading