From 118a409ac360321642fd645c227d13cfb5eeac31 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 27 Mar 2023 09:10:26 +0200
Subject: [PATCH] chore(website): [playground] add tabs to ast viewer and
 update design (#6735)

---
 .../src/components/ESQueryFilter.module.css   |  3 -
 .../website/src/components/EditorTabs.tsx     | 46 ----------------
 .../src/components/OptionsSelector.tsx        | 16 ------
 .../src/components/Playground.module.css      | 32 ++---------
 .../website/src/components/Playground.tsx     | 39 +++++++------
 packages/website/src/components/config.ts     |  6 ++
 .../src/components/config/ConfigEditor.tsx    |  2 +-
 .../components/layout/EditorTabs.module.css   | 30 ++++++++++
 .../src/components/layout/EditorTabs.tsx      | 55 +++++++++++++++++++
 .../{modals => layout}/Modal.module.css       |  5 +-
 .../components/{modals => layout}/Modal.tsx   |  0
 11 files changed, 123 insertions(+), 111 deletions(-)
 delete mode 100644 packages/website/src/components/EditorTabs.tsx
 create mode 100644 packages/website/src/components/config.ts
 create mode 100644 packages/website/src/components/layout/EditorTabs.module.css
 create mode 100644 packages/website/src/components/layout/EditorTabs.tsx
 rename packages/website/src/components/{modals => layout}/Modal.module.css (94%)
 rename packages/website/src/components/{modals => layout}/Modal.tsx (100%)

diff --git a/packages/website/src/components/ESQueryFilter.module.css b/packages/website/src/components/ESQueryFilter.module.css
index 49dbce2ed6f..4aa0d9a1914 100644
--- a/packages/website/src/components/ESQueryFilter.module.css
+++ b/packages/website/src/components/ESQueryFilter.module.css
@@ -1,7 +1,4 @@
 .searchContainer {
   display: flex;
   margin: 0 0 0.5rem 0;
-  position: sticky;
-  top: 0;
-  left: 0;
 }
diff --git a/packages/website/src/components/EditorTabs.tsx b/packages/website/src/components/EditorTabs.tsx
deleted file mode 100644
index 6edbee22422..00000000000
--- a/packages/website/src/components/EditorTabs.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import EditIcon from '@site/src/icons/edit.svg';
-import React from 'react';
-
-import styles from './Playground.module.css';
-import type { TabType } from './types';
-
-export interface FileTabsProps {
-  readonly tabs: TabType[];
-  readonly activeTab: TabType;
-  readonly change: (tab: TabType) => void;
-  readonly showModal: () => void;
-}
-
-export default function EditorTabs({
-  tabs,
-  activeTab,
-  change,
-  showModal,
-}: FileTabsProps): JSX.Element {
-  return (
-    <div className={styles.tabContainer}>
-      <div role="tablist">
-        {tabs.map(item => {
-          return (
-            <button
-              role="tab"
-              className={styles.tabStyle}
-              key={item}
-              aria-selected={activeTab === item}
-              disabled={activeTab === item}
-              onClick={(): void => change(item)}
-            >
-              {item}
-            </button>
-          );
-        })}
-      </div>
-      {activeTab !== 'code' && (
-        <button className={styles.tabStyle} onClick={showModal}>
-          Visual Editor
-          <EditIcon width={12} height={12} />
-        </button>
-      )}
-    </div>
-  );
-}
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index fe573ef86ab..0588e88cb94 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -22,13 +22,6 @@ export interface OptionsSelectorParams {
   readonly isLoading: boolean;
 }
 
-const ASTOptions = [
-  { value: false, label: 'Disabled' },
-  { value: 'es', label: 'ESTree' },
-  { value: 'ts', label: 'TypeScript' },
-  { value: 'scope', label: 'Scope' },
-] as const;
-
 function OptionsSelectorContent({
   state,
   setState,
@@ -109,15 +102,6 @@ function OptionsSelectorContent({
             className={styles.optionCheckbox}
           />
         </label>
-        <label className={styles.optionLabel}>
-          AST Viewer
-          <Dropdown
-            name="showAST"
-            value={state.showAST}
-            onChange={(e): void => setState({ showAST: e })}
-            options={ASTOptions}
-          />
-        </label>
         <label className={styles.optionLabel}>
           Source type
           <Dropdown
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index 9f14c0eee08..191dc8ea040 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -45,39 +45,17 @@
   z-index: calc(var(--ifm-z-index-fixed) - 1);
 }
 
-.tabContainer {
-  display: flex;
-  justify-content: space-between;
-  background: var(--playground-main-color);
-  border-bottom: 1px solid var(--playground-secondary-color);
+.playgroundInfoHeader {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 1;
 }
 
 .tabCode {
   height: calc(100% - 32px);
 }
 
-.tabStyle {
-  border: none;
-  border-right: 1px solid var(--playground-secondary-color);
-  background: var(--playground-main-color);
-  color: var(--ifm-color-emphasis-700);
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-}
-
-.tabStyle svg {
-  margin-left: 0.3rem;
-}
-
-.tabStyle:hover {
-  background: var(--playground-secondary-color);
-}
-
-.tabStyle:disabled {
-  background: var(--playground-secondary-color);
-  color: var(--ifm-color-emphasis-900);
-}
-
 @media only screen and (max-width: 996px) {
   .codeContainer {
     display: block;
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index 6fe79df9f24..d193a6625c8 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -1,13 +1,3 @@
-import ASTViewerScope from '@site/src/components/ASTViewerScope';
-import ConfigEslint from '@site/src/components/config/ConfigEslint';
-import ConfigTypeScript from '@site/src/components/config/ConfigTypeScript';
-import {
-  defaultEslintConfig,
-  defaultTsConfig,
-} from '@site/src/components/config/utils';
-import EditorTabs from '@site/src/components/EditorTabs';
-import { ErrorsViewer, ErrorViewer } from '@site/src/components/ErrorsViewer';
-import { ESQueryFilter } from '@site/src/components/ESQueryFilter';
 import type { TSESTree } from '@typescript-eslint/utils';
 import clsx from 'clsx';
 import type * as ESQuery from 'esquery';
@@ -17,10 +7,18 @@ import type { SourceFile } from 'typescript';
 
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import ASTViewerESTree from './ASTViewerESTree';
+import ASTViewerScope from './ASTViewerScope';
 import ASTViewerTS from './ASTViewerTS';
+import { detailTabs } from './config';
+import ConfigEslint from './config/ConfigEslint';
+import ConfigTypeScript from './config/ConfigTypeScript';
+import { defaultEslintConfig, defaultTsConfig } from './config/utils';
 import { EditorEmbed } from './editor/EditorEmbed';
 import { LoadingEditor } from './editor/LoadingEditor';
+import { ErrorsViewer, ErrorViewer } from './ErrorsViewer';
+import { ESQueryFilter } from './ESQueryFilter';
 import useHashState from './hooks/useHashState';
+import EditorTabs from './layout/EditorTabs';
 import Loader from './layout/Loader';
 import { shallowEqual } from './lib/shallowEqual';
 import OptionsSelector from './OptionsSelector';
@@ -138,8 +136,9 @@ function Playground(): JSX.Element {
               {isLoading && <Loader />}
               <EditorTabs
                 tabs={['code', 'tsconfig', 'eslintrc']}
-                activeTab={activeTab}
+                active={activeTab}
                 change={setTab}
+                showVisualEditor={activeTab !== 'code'}
                 showModal={(): void => setShowModal(activeTab)}
               />
               <div className={styles.tabCode}>
@@ -165,12 +164,20 @@ function Playground(): JSX.Element {
               />
             </div>
             <div className={styles.astViewer}>
-              {state.showAST === 'es' && (
-                <ESQueryFilter
-                  onChange={setEsQueryFilter}
-                  onError={setEsQueryError}
+              <div className={styles.playgroundInfoHeader}>
+                <EditorTabs
+                  tabs={detailTabs}
+                  active={state.showAST ?? false}
+                  change={(v): void => setState({ showAST: v })}
                 />
-              )}
+                {state.showAST === 'es' && (
+                  <ESQueryFilter
+                    onChange={setEsQueryFilter}
+                    onError={setEsQueryError}
+                  />
+                )}
+              </div>
+
               {(state.showAST === 'ts' && tsAst && (
                 <ASTViewerTS
                   value={tsAst}
diff --git a/packages/website/src/components/config.ts b/packages/website/src/components/config.ts
new file mode 100644
index 00000000000..71e1930b942
--- /dev/null
+++ b/packages/website/src/components/config.ts
@@ -0,0 +1,6 @@
+export const detailTabs = [
+  { value: false as const, label: 'Errors' },
+  { value: 'es' as const, label: 'ESTree' },
+  { value: 'ts' as const, label: 'TypeScript' },
+  { value: 'scope' as const, label: 'Scope' },
+];
diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx
index 361ac95b667..c1e8e149feb 100644
--- a/packages/website/src/components/config/ConfigEditor.tsx
+++ b/packages/website/src/components/config/ConfigEditor.tsx
@@ -1,5 +1,5 @@
 import Dropdown from '@site/src/components/inputs/Dropdown';
-import Modal from '@site/src/components/modals/Modal';
+import Modal from '@site/src/components/layout/Modal';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 
diff --git a/packages/website/src/components/layout/EditorTabs.module.css b/packages/website/src/components/layout/EditorTabs.module.css
new file mode 100644
index 00000000000..98ce2454125
--- /dev/null
+++ b/packages/website/src/components/layout/EditorTabs.module.css
@@ -0,0 +1,30 @@
+.tabContainer {
+  display: flex;
+  justify-content: space-between;
+  background: var(--playground-main-color);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.tabStyle {
+  --ifm-button-padding-horizontal: 1rem;
+  --ifm-button-background-color: var(--ifm-background-surface-color);
+  --ifm-button-color: var(--ifm-color-emphasis-700);
+  --ifm-button-border-color: var(--ifm-color-emphasis-200);
+
+  font-size: 0.75rem;
+}
+
+.tabStyle svg {
+  margin-left: 0.3rem;
+}
+
+.tabStyle:hover {
+  --ifm-button-background-color: var(--playground-secondary-color);
+}
+
+.tabStyle:disabled {
+  --ifm-button-background-color: var(--playground-secondary-color);
+  --ifm-button-color: var(--ifm-color-emphasis-900);
+
+  opacity: 1;
+}
diff --git a/packages/website/src/components/layout/EditorTabs.tsx b/packages/website/src/components/layout/EditorTabs.tsx
new file mode 100644
index 00000000000..2890908cc55
--- /dev/null
+++ b/packages/website/src/components/layout/EditorTabs.tsx
@@ -0,0 +1,55 @@
+import EditIcon from '@site/src/icons/edit.svg';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './EditorTabs.module.css';
+
+export interface EditorTabsProps<T extends string | boolean> {
+  readonly tabs: ({ value: T; label: string } | T)[];
+  readonly active: T;
+  readonly showVisualEditor?: boolean;
+  readonly change: (name: T) => void;
+  readonly showModal?: (name: T) => void;
+}
+
+function EditorTabs<T extends string | boolean>({
+  tabs,
+  active,
+  showVisualEditor,
+  change,
+  showModal,
+}: EditorTabsProps<T>): JSX.Element {
+  const tabsWithLabels = tabs.map(tab =>
+    typeof tab !== 'object' ? { value: tab, label: String(tab) } : tab,
+  );
+
+  return (
+    <div className={clsx(styles.tabContainer, 'padding--xs')}>
+      <div role="tablist" className="button-group">
+        {tabsWithLabels.map(item => (
+          <button
+            role="tab"
+            className={clsx(styles.tabStyle, 'button')}
+            key={item.label}
+            aria-selected={active === item.value}
+            disabled={active === item.value}
+            onClick={(): void => change(item.value)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      {showVisualEditor && (
+        <button
+          className={clsx(styles.tabStyle, 'button')}
+          onClick={(): void => showModal?.(active)}
+        >
+          Visual Editor
+          <EditIcon width={12} height={12} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default EditorTabs;
diff --git a/packages/website/src/components/modals/Modal.module.css b/packages/website/src/components/layout/Modal.module.css
similarity index 94%
rename from packages/website/src/components/modals/Modal.module.css
rename to packages/website/src/components/layout/Modal.module.css
index a6209dedd4f..c33aaa17f43 100644
--- a/packages/website/src/components/modals/Modal.module.css
+++ b/packages/website/src/components/layout/Modal.module.css
@@ -1,14 +1,14 @@
 .modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 2;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgb(0 0 0 / 40%);
 }
 
 .modal.open {
@@ -32,6 +32,7 @@
     top: -30rem;
     opacity: 0;
   }
+
   to {
     top: 0;
     opacity: 1;
diff --git a/packages/website/src/components/modals/Modal.tsx b/packages/website/src/components/layout/Modal.tsx
similarity index 100%
rename from packages/website/src/components/modals/Modal.tsx
rename to packages/website/src/components/layout/Modal.tsx