From 3866bcd529068ca0b7ed8a40a4e1c453f5d696ae Mon Sep 17 00:00:00 2001
From: Paul Gottschling <paul.gottschling@goteleport.com>
Date: Wed, 15 May 2024 14:59:02 -0400
Subject: [PATCH] Remove the VarList component (#464)

We don't use it very often in the docs, and it has failed to render
since at least 1fb84dafaa8ac48956eac65a861050b5f838d772. Removing
instead of putting in the resources to debug.
---
 components/Variables/VarList.module.css | 12 ------
 components/Variables/VarList.tsx        | 51 -------------------------
 components/Variables/index.ts           |  1 -
 docs-contributors/ui-reference.md       | 17 ---------
 layouts/DocsPage/components.tsx         |  3 +-
 package.json                            |  5 ++-
 6 files changed, 5 insertions(+), 84 deletions(-)
 delete mode 100644 components/Variables/VarList.module.css
 delete mode 100644 components/Variables/VarList.tsx

diff --git a/components/Variables/VarList.module.css b/components/Variables/VarList.module.css
deleted file mode 100644
index c731d07e1c..0000000000
--- a/components/Variables/VarList.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.list {
-  padding-left: var(--m-1-5);
-  list-style: none;
-}
-
-.title {
-  font-size: var(--fs-text-lg);
-}
-
-.text {
-  margin: 0;
-}
diff --git a/components/Variables/VarList.tsx b/components/Variables/VarList.tsx
deleted file mode 100644
index 6dcff97425..0000000000
--- a/components/Variables/VarList.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useContext } from "react";
-import { Var } from "./Var";
-import { VarsContext } from "./context";
-import type { VarsContextProps } from "./context";
-import styles from "./VarList.module.css";
-
-export const VarList = () => {
-  const { fields, globalFields, fieldDescriptions } =
-    useContext<VarsContextProps>(VarsContext);
-  const globalFieldsList = Object.keys(globalFields).map((item) => (
-    <li className={styles.item} key={item}>
-      <Var
-        name={item}
-        description={fieldDescriptions[item]}
-        needLabel
-        isGlobal={true}
-      />
-    </li>
-  ));
-
-  const pageFields = Object.keys(fields)
-    .map((field) => (field in globalFields ? undefined : field))
-    .filter(Boolean);
-
-  const pageFieldList = pageFields.map((item) => (
-    <li className={styles.item} key={item}>
-      <Var name={item} description={fieldDescriptions[item]} needLabel />
-    </li>
-  ));
-
-  if (!globalFieldsList.length && !pageFieldList.length) {
-    return <></>;
-  }
-
-  return (
-    <section>
-      {!!globalFieldsList.length && (
-        <>
-          <h2 className={styles.title}>Documentation-wide variables</h2>
-          <ul className={styles.list}>{globalFieldsList}</ul>
-        </>
-      )}
-      {!!pageFieldList.length && (
-        <>
-          <h2 className={styles.title}>Page-wide variables</h2>
-          <ul className={styles.list}>{pageFieldList}</ul>
-        </>
-      )}
-    </section>
-  );
-};
diff --git a/components/Variables/index.ts b/components/Variables/index.ts
index ec4f3dbc65..eae026d4af 100644
--- a/components/Variables/index.ts
+++ b/components/Variables/index.ts
@@ -1,3 +1,2 @@
-export { VarList } from "./VarList";
 export { Var } from "./Var";
 export { VarsProvider } from "./context";
diff --git a/docs-contributors/ui-reference.md b/docs-contributors/ui-reference.md
index 8898d845ac..4055cae1c8 100644
--- a/docs-contributors/ui-reference.md
+++ b/docs-contributors/ui-reference.md
@@ -149,9 +149,6 @@ between browser sessions.
 
 #### Var component properties
 
-The `description` field is used in the `VarList` component, which we explain in
-the next section. You only need to specify the `description` once.
-
 By default, the `Var` component displays its `name` until the user assigns a
 value to it. To configure the component to display an initial value beside its
 name, set the `initial` field:
@@ -163,20 +160,6 @@ name, set the `initial` field:
 You should only set an `initial` field for a single occurrence of a `Var` with a
 particular name. Otherwise, `Var`s will overwrite one another's initial values.
 
-### The VarList component
-
-To provide a key for all of the global and page-local variables the docs have
-defined, use the `VarList` component:
-
-```markdown
-<Details title="Page variables" opened>
-<VarList/>
-</Details>
-```
-
-The description we added to the `proxy` variable appears here. Since the `user`
-variable does not have a description, the `VarList` shows its name instead.
-
 ## Notices
 
 If you want to add notice like the one above to the page, use this syntax:
diff --git a/layouts/DocsPage/components.tsx b/layouts/DocsPage/components.tsx
index 3a3987bb26..7253626202 100644
--- a/layouts/DocsPage/components.tsx
+++ b/layouts/DocsPage/components.tsx
@@ -4,7 +4,7 @@ import Icon from "components/Icon";
 import Notice from "components/Notice";
 import Snippet from "components/Snippet";
 import { Tabs, TabItem } from "components/Tabs";
-import { Var, VarList } from "components/Variables";
+import { Var } from "components/Variables";
 import Details from "components/Details";
 import {
   Code,
@@ -67,5 +67,4 @@ export const components = {
   snippet: Snippet,
   details: Details,
   var: (props) => <Var {...props} />, // needed to circumvent props mismatch in types
-  varlist: VarList,
 };
diff --git a/package.json b/package.json
index b863079ba3..48e83c990a 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,10 @@
     "storybook:test-local": "yarn build-storybook --quiet && npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"yarn test-storybook\""
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": ["eslint", "prettier --check"],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint",
+      "prettier --check"
+    ],
     "*.{json}": "prettier --check"
   },
   "simple-git-hooks": {