chore(site): refactor stories and tests from components directory (#9578)

* Refactor Alert

* Refactor Avatar and its stories

* Refactor AvatarData and its stories

* Refactor CodeExample and its tests

* Refactor ServiceBanner stories

* Refactor Navbar and its tests

* Refactor ServiceBanner stories

* Refactor LicenseBannerView stories

* Refactor DeploymentBannerView stories

* Extract optionValue into a module

* Refactor DeleteDialog stories

* Refactor ConfirmDialog tests

* Refactor EmptyState tests

* Flat ErrorBoundaryState and refactor stories

* Refactor Expander stories

* Refactor FormFooter stories

* Refactor FullPageForm stories

* Refactor EnterpriseSnackbar stories

* Refactor GroupAvatar stories

* Refactor HelpTooltip stories and remove index

* Remove unecessary types module from IconField

* Refactor LoadingButton stories

* Refactor Margins stories

* Refactor Markdown stories

* Refactor PageHeader stories

* Refactor PageButton tests

* Refactor Pill stories

* Refactor Resources stories

* Refactor RichParameterInput stories and flat MultiTextField

* Remove unecessary Stack story

* Refactor TableRowMenu stories

* Refactor TemplateLayout stories

* Refactor Typography props

* Refactor UserAutocomplete

* Refactor WorkspaceBuildLogs components and tests

* Refactor WorkspaceStatusBadge stories

* Fix wrong imports

* Remove Example.args pattern

* Fix wrong import

* Refactor EmptyState stories

* Refactor HelpTooltip stories

* Remove not valid ErrorAlert story

* Fix AvatarData story

* Add border back to CodeExample

* Fix Navbar story

* Fix AgentRow proxy in the stories

site/src/components/CodeExample/CodeExample.stories.tsx

@@ -1,9 +1,9 @@
-import { Story } from "@storybook/react";
-import { CodeExample, CodeExampleProps } from "./CodeExample";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeExample } from "./CodeExample";
 
 const sampleCode = `echo "Hello, world"`;
 
-export default {
+const meta: Meta<typeof CodeExample> = {
   title: "components/CodeExample",
   component: CodeExample,
   argTypes: {
@@ -11,16 +11,17 @@ export default {
   },
 };
 
-const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => (
-  <CodeExample {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof CodeExample>;
 
-export const Example = Template.bind({});
-Example.args = {
-  code: sampleCode,
+export const Example: Story = {
+  args: {
+    code: sampleCode,
+  },
 };
 
-export const LongCode = Template.bind({});
-LongCode.args = {
-  code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
+export const LongCode: Story = {
+  args: {
+    code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
+  },
 };

site/src/components/CodeExample/CodeExample.test.tsx

@@ -1,14 +0,0 @@
-import { screen } from "@testing-library/react";
-import { render } from "../../testHelpers/renderHelpers";
-import { CodeExample } from "./CodeExample";
-
-describe("CodeExample", () => {
-  it("renders code", async () => {
-    // When
-    render(<CodeExample code="echo hello" />);
-
-    // Then
-    // Both lines should be rendered
-    await screen.findByText("echo hello");
-  });
-});

site/src/components/CodeExample/CodeExample.tsx

@@ -7,33 +7,24 @@ import { Theme } from "@mui/material/styles";
 
 export interface CodeExampleProps {
   code: string;
-  className?: string;
-  buttonClassName?: string;
-  tooltipTitle?: string;
-  inline?: boolean;
   password?: boolean;
+  className?: string;
 }
 
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
+export const CodeExample: FC<CodeExampleProps> = ({
   code,
+  password,
   className,
-  buttonClassName,
-  tooltipTitle,
-  inline,
 }) => {
-  const styles = useStyles({ inline: inline });
+  const styles = useStyles({ password });
 
   return (
     <div className={combineClasses([styles.root, className])}>
       <code className={styles.code}>{code}</code>
-      <CopyButton
-        text={code}
-        tooltipTitle={tooltipTitle}
-        buttonClassName={buttonClassName}
-      />
+      <CopyButton text={code} />
     </div>
   );
 };
@@ -48,14 +39,14 @@ const useStyles = makeStyles<Theme, styleProps>((theme) => ({
     display: props.inline ? "inline-flex" : "flex",
     flexDirection: "row",
     alignItems: "center",
-    background: props.inline ? "rgb(0 0 0 / 30%)" : "hsl(223, 27%, 3%)",
-    border: props.inline ? undefined : `1px solid ${theme.palette.divider}`,
+    background: "rgb(0 0 0 / 30%)",
     color: theme.palette.primary.contrastText,
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 14,
     borderRadius: theme.shape.borderRadius,
     padding: theme.spacing(1),
     lineHeight: "150%",
+    border: `1px solid ${theme.palette.divider}`,
   }),
   code: {
     padding: theme.spacing(0, 1),