Update auth admin design + add support for webhooks and openid connec…

…t providers (#369)

shared/common/newui/button/index.tsx

@@ -2,7 +2,7 @@ import cn from "@edgedb/common/utils/classNames";
 
 import styles from "./button.module.scss";
 import Spinner from "../../ui/spinner";
-import {PropsWithChildren} from "react";
+import {CSSProperties, PropsWithChildren, useEffect, useState} from "react";
 
 interface _BaseButtonProps {
   className?: string;
@@ -12,6 +12,7 @@ interface _BaseButtonProps {
   rightIcon?: JSX.Element;
   disabled?: boolean;
   loading?: boolean;
+  style?: CSSProperties;
 }
 
 export interface ButtonProps extends _BaseButtonProps {
@@ -107,3 +108,31 @@ export function LinkButton({
     </a>
   );
 }
+
+export function ConfirmButton({onClick, children, ...props}: ButtonProps) {
+  const [confirming, setConfirming] = useState(false);
+
+  useEffect(() => {
+    if (confirming) {
+      const timer = setTimeout(() => setConfirming(false), 1000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [confirming]);
+
+  return (
+    <Button
+      onClick={() => {
+        if (confirming) {
+          setConfirming(false);
+          onClick?.();
+        } else {
+          setConfirming(true);
+        }
+      }}
+      {...props}
+    >
+      {confirming ? "Confirm?" : children}
+    </Button>
+  );
+}

shared/common/newui/checkbox/checkbox.module.scss

@@ -43,6 +43,14 @@
     pointer-events: none;
   }
 
+  &.readonly {
+    pointer-events: none;
+
+    .check {
+      opacity: 0.5;
+    }
+  }
+
   @include darkTheme {
     color: #ccc;
 

shared/common/newui/checkbox/index.tsx

@@ -2,32 +2,40 @@ import cn from "@edgedb/common/utils/classNames";
 
 import styles from "./checkbox.module.scss";
 
-export interface CheckboxProps {
+export type CheckboxProps<Readonly extends boolean> = {
   className?: string;
   label?: string | JSX.Element;
   checked: boolean;
-  onChange: (checked: boolean) => void;
   disabled?: boolean;
-}
+  readOnly?: Readonly;
+} & (Readonly extends true
+  ? {
+      onChange?: (checked: boolean) => void;
+    }
+  : {
+      onChange: (checked: boolean) => void;
+    });
 
-export function Checkbox({
+export function Checkbox<Readonly extends boolean = false>({
   className,
   label,
   checked,
   onChange,
   disabled,
-}: CheckboxProps) {
+  readOnly,
+}: CheckboxProps<Readonly>) {
   return (
     <label
       className={cn(styles.checkbox, className, {
         [styles.disabled]: !!disabled,
+        [styles.readonly]: !!readOnly,
       })}
     >
       <input
         type="checkbox"
         checked={checked}
-        onChange={(e) => onChange(e.target.checked)}
-        disabled={disabled}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled || readOnly}
       />
       <div className={styles.check} />
       {label}

shared/common/newui/loadingSkeleton/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./loadingSkeleton.module.scss";
+
+export function LoadingSkeleton({ className }: { className?: string }) {
+  return <div className={`${styles.loadingSkeleton} ${className ?? ""}`} />;
+}

shared/common/newui/loadingSkeleton/loadingSkeleton.module.scss

@@ -0,0 +1,30 @@
+@import "@edgedb/common/mixins.scss";
+
+.loadingSkeleton {
+  border-radius: 8px;
+  background: var(--skeletonBg, #ededed);
+  background-image: linear-gradient(
+    90deg,
+    transparent,
+    var(--skeletonShimmer, #fafafa) 66%,
+    transparent
+  );
+  background-repeat: no-repeat;
+  background-size: 100px 100%;
+  animation: shimmer 2s infinite linear;
+
+  @include darkTheme {
+    --skeletonBg: #2d2d2d;
+    --skeletonShimmer: #3c3c3c;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -100px;
+  }
+  50%,
+  100% {
+    background-position: calc(100% + 100px);
+  }
+}

shared/common/newui/panelTabs/index.tsx

@@ -0,0 +1,33 @@
+import cn from "@edgedb/common/utils/classNames";
+
+import styles from "./panelTabs.module.scss";
+
+export interface PanelTabsProps<TabId extends string> {
+  className?: string;
+  tabs: {id: TabId; label: string | JSX.Element}[];
+  selectedTabId: TabId;
+  setSelectedTabId: (id: TabId) => void;
+}
+
+export function PanelTabs<TabId extends string = string>({
+  className,
+  tabs,
+  selectedTabId,
+  setSelectedTabId,
+}: PanelTabsProps<TabId>) {
+  return (
+    <div className={cn(styles.panelTabs, className)}>
+      {tabs.map((tab) => (
+        <div
+          key={tab.id}
+          className={cn(styles.tab, {
+            [styles.active]: selectedTabId === tab.id,
+          })}
+          onClick={() => setSelectedTabId(tab.id)}
+        >
+          {tab.label}
+        </div>
+      ))}
+    </div>
+  );
+}

shared/common/newui/panelTabs/panelTabs.module.scss

@@ -0,0 +1,94 @@
+@import "@edgedb/common/mixins.scss";
+
+.panelTabs {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-self: start;
+  position: sticky;
+  top: 0;
+  width: max-content;
+  justify-self: end;
+  text-align: end;
+  padding: 64px 24px;
+  z-index: 1;
+
+  .tab {
+    position: relative;
+    font-family: "Roboto Flex Variable", sans-serif;
+    color: var(--secondary_text_color);
+    text-decoration: none;
+    font-weight: 500;
+    padding: 12px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+      background: #fff;
+    }
+
+    &.active {
+      color: var(--main_text_color);
+
+      &:after {
+        content: "";
+        position: absolute;
+        right: 1px;
+        top: 4px;
+        bottom: 4px;
+        width: 2px;
+        border-radius: 1px;
+        background: #a565cd;
+      }
+    }
+  }
+
+  @include darkTheme {
+    .tab:hover {
+      background: var(--Grey12);
+    }
+  }
+
+  @include isMobile {
+    border-bottom: 1px solid var(--Grey93, #ededed);
+    background: var(--Grey99, #fcfcfc);
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
+    flex-direction: row;
+    padding: 0;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    flex-shrink: 0;
+
+    .tab {
+      padding: 10px 12px;
+      border-radius: 6px;
+
+      &:hover {
+        background: var(--Grey95, #f2f2f2);
+      }
+
+      &.active:after {
+        left: 4px;
+        right: 4px;
+        top: auto;
+        bottom: -3px;
+        height: 2px;
+        width: auto;
+      }
+    }
+
+    @include darkTheme {
+      border-bottom: 1px solid var(--Grey22, #363636);
+      background: var(--Grey18, #2e2e2e);
+      box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
+
+      .tab:hover {
+        background: var(--Grey14, #242424);
+      }
+    }
+  }
+}

shared/common/newui/select/index.tsx

@@ -3,6 +3,7 @@ import {
   Select as _Select,
   SelectProps as _SelectProps,
 } from "@edgedb/common/ui/select";
+export type {SelectItem, SelectItems} from "@edgedb/common/ui/select";
 
 import styles from "./select.module.scss";
 

shared/common/newui/textInput/index.tsx

@@ -12,6 +12,7 @@ export interface TextInputProps extends FieldHeaderProps {
   type?: "text" | "password" | "textarea";
   error?: string | null;
   prefix?: string;
+  suffixEl?: JSX.Element;
 }
 
 export const TextInput = forwardRef(function TextInput(
@@ -23,6 +24,7 @@ export const TextInput = forwardRef(function TextInput(
     headerNote,
     error,
     prefix,
+    suffixEl,
     ...props
   }: TextInputProps &
     Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type">,
@@ -53,6 +55,7 @@ export const TextInput = forwardRef(function TextInput(
               : undefined,
           }}
         />
+        {suffixEl}
         {error != null ? (
           <div className={styles.error}>
             <InfoIcon />

shared/studio/components/databasePage/databasePage.module.scss

@@ -3,9 +3,9 @@
 .databasePage {
   position: relative;
   flex-grow: 1;
-  overflow: hidden;
+  min-height: 0;
   display: grid;
-  padding: 0 16px 16px 0;
+  padding: 0 8px 8px 0;
   grid-template-areas: "tabs session" "tabs content";
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;

shared/studio/tabs/ai/index.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useLayoutEffect, useState} from "react";
+import {useEffect, useLayoutEffect} from "react";
 import {Observer, observer} from "mobx-react-lite";
 
 import cn from "@edgedb/common/utils/classNames";
@@ -15,7 +15,7 @@ import {PlaygroundTab} from "./playground";
 import {PromptsTab} from "./prompts";
 
 import styles from "./aiAdmin.module.scss";
-import {Button, ButtonProps, WarningIcon} from "@edgedb/common/newui";
+import {WarningIcon} from "@edgedb/common/newui";
 
 const AIAdminPage = observer(function AIAdminPage() {
   const state = useTabState(AIAdminState);
@@ -133,31 +133,3 @@ function AIAdminLayout() {
     </div>
   );
 }
-
-export function ConfirmButton({onClick, children, ...props}: ButtonProps) {
-  const [confirming, setConfirming] = useState(false);
-
-  useEffect(() => {
-    if (confirming) {
-      const timer = setTimeout(() => setConfirming(false), 1000);
-
-      return () => clearTimeout(timer);
-    }
-  }, [confirming]);
-
-  return (
-    <Button
-      onClick={() => {
-        if (confirming) {
-          setConfirming(false);
-          onClick?.();
-        } else {
-          setConfirming(true);
-        }
-      }}
-      {...props}
-    >
-      {confirming ? "Confirm?" : children}
-    </Button>
-  );
-}

shared/studio/tabs/ai/prompts.tsx

@@ -4,6 +4,7 @@ import {observer} from "mobx-react-lite";
 import cn from "@edgedb/common/utils/classNames";
 import {
   Button,
+  ConfirmButton,
   ChevronDownIcon,
   InfoIcon,
   InfoTooltip,
@@ -16,7 +17,6 @@ import {AIAdminState, AIPromptDraft, PromptChatParticipantRole} from "./state";
 
 import textStyles from "@edgedb/common/newui/textInput/textInput.module.scss";
 import styles from "./aiAdmin.module.scss";
-import {ConfirmButton} from ".";
 
 export const PromptsTab = observer(function PromptTab() {
   const state = useTabState(AIAdminState);