Update design of query editor tab

shared/common/components/dataGrid/index.tsx

@@ -174,19 +174,21 @@ export const GridContent = observer(function GridContent({
   state,
   pinnedCells,
   cells,
+  bottomPadding,
 }: {
   className?: string;
   style?: React.CSSProperties;
   state: DataGridState;
   pinnedCells?: React.ReactNode;
   cells: React.ReactNode;
+  bottomPadding?: number;
 }) {
   return (
     <div
       className={cn(styles.gridContent, className)}
       style={{
         ...style,
-        height: state.gridContentHeight,
+        height: state.gridContentHeight + (bottomPadding ?? 0),
         width: state.gridContentWidth,
       }}
     >

shared/common/components/infoCards/index.tsx

@@ -27,7 +27,7 @@ export function InfoCards({
   className?: string;
   listClassName?: string;
   extraCards?: (InfoCardDef | null)[];
-  currentVersion?: {major: number; minor: number; stage: string} | null;
+  currentVersion?: {major: number; minor: number} | null;
 }) {
   const data = useLatestInfo();
 

shared/common/components/resultGrid/index.tsx

@@ -24,10 +24,12 @@ export {createResultGridState, ResultGridState} from "./state";
 
 export interface ResultGridProps extends Omit<DataGridProps, "state"> {
   state: ResultGridState;
+  bottomPadding?: number;
 }
 
 export const ResultGrid = observer(function ResultGrid({
   state,
+  bottomPadding,
   ...props
 }: ResultGridProps) {
   useEffect(() => {
@@ -51,7 +53,7 @@ export const ResultGrid = observer(function ResultGrid({
   return (
     <DataGrid state={state.grid} {...props}>
       <ResultGridHeaders state={state} />
-      <ResultGridContent state={state} />
+      <ResultGridContent state={state} bottomPadding={bottomPadding} />
     </DataGrid>
   );
 });
@@ -131,6 +133,7 @@ export const ResultGridHeaders = observer(function ResultGridHeaders({
 
 export const ResultGridContent = observer(function ResultGridContent({
   state,
+  bottomPadding,
 }: ResultGridProps) {
   const ranges = state.grid.visibleRanges;
   const rowTops = state.rowTops;
@@ -191,6 +194,7 @@ export const ResultGridContent = observer(function ResultGridContent({
       style={{"--gridHeaderHeight": state.grid.headerHeight + "px"} as any}
       state={state.grid}
       cells={cells}
+      bottomPadding={bottomPadding}
     />
   );
 });

shared/common/mixins.scss

@@ -39,6 +39,7 @@
 
 $breakpoints: (
   mobile: 768px,
+  tablet: 1024px,
 );
 
 @mixin breakpoint($breakpoint) {

shared/common/newui/copyButton/index.tsx

@@ -8,7 +8,7 @@ import {Button} from "../button";
 
 export interface CopyButtonProps {
   className?: string;
-  content: string;
+  content: string | (() => string);
   mini?: boolean;
 }
 
@@ -25,7 +25,7 @@ export function CopyButton({className, content, mini}: CopyButtonProps) {
   }, [copied]);
 
   const onCopy = () => {
-    navigator.clipboard?.writeText(content);
+    navigator.clipboard?.writeText(typeof content === 'string' ? content : content());
     setCopied(true);
   };
 

shared/common/newui/iconToggle/iconToggle.module.scss

@@ -0,0 +1,93 @@
+@import "@edgedb/common/mixins.scss";
+
+.iconToggle {
+  display: flex;
+  background: var(--Grey95);
+  border: 1px solid var(--Grey90);
+  border-radius: 8px;
+  font-family: "Roboto Flex Variable", sans-serif;
+  line-height: 16px;
+
+  &.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  @include darkTheme {
+    background: var(--Grey16);
+    border-color: var(--Grey14);
+  }
+
+  @include isMobile {
+    border-radius: 10px;
+  }
+}
+
+.option {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  svg {
+    color: var(--Grey55);
+    z-index: 1;
+
+    @include darkTheme {
+      color: var(--Grey65);
+    }
+  }
+
+  &.selected:before {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
+
+    @include darkTheme {
+      background: var(--Grey30);
+      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .label {
+    position: absolute;
+    top: calc(100% + 2px);
+    white-space: nowrap;
+    background: var(--panel_background);
+    padding: 6px 10px;
+    border-radius: 6px;
+    color: var(--secondary_text_color);
+    font-weight: 500;
+    font-size: 13px;
+    border: 1px solid var(--panel_border);
+    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s linear;
+  }
+
+  &:hover .label {
+    opacity: 1;
+    transition-delay: 0.4s;
+  }
+
+  @include isMobile {
+    width: 38px;
+    height: 38px;
+
+    &.selected:before {
+      border-radius: 8px;
+    }
+  }
+}

shared/common/newui/iconToggle/index.tsx

@@ -0,0 +1,42 @@
+import cn from "@edgedb/common/utils/classNames";
+
+import styles from "./iconToggle.module.scss";
+
+export interface IconToggleProps<OptionKey extends string | number> {
+  className?: string;
+  options: {
+    key: OptionKey;
+    label: string;
+    icon: JSX.Element;
+    disabled?: boolean;
+  }[];
+  selectedOption: OptionKey;
+  onSelectOption: (key: OptionKey) => void;
+  disabled?: boolean;
+}
+
+export function IconToggle<OptionKey extends string | number = any>({
+  className,
+  options,
+  selectedOption,
+  onSelectOption,
+  disabled,
+}: IconToggleProps<OptionKey>) {
+  return (
+    <div className={cn(styles.iconToggle, className, {[styles.disabled]: !!disabled})}>
+      {options.map((option) => (
+        <div
+          key={option.key}
+          className={cn(styles.option, {
+            [styles.selected]: option.key === selectedOption,
+            [styles.disabled]: !!option.disabled,
+          })}
+          onClick={() => onSelectOption(option.key)}
+        >
+          {option.icon}
+          <div className={styles.label}>{option.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

shared/common/newui/icons/index.tsx

@@ -705,3 +705,155 @@ export function FilterIcon({className}: {className?: string}) {
     </svg>
   );
 }
+
+export function RunIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 5.57143L17 12L7 18.4286V5.57143Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function SplitViewIcon(props: {
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x="5.75"
+        y="5.75"
+        width="12.5"
+        height="4.5"
+        rx="1.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="5.75"
+        y="13.75"
+        width="12.5"
+        height="4.5"
+        rx="1.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+export function TreeViewIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="9.75"
+        y="8.75"
+        width="10.5"
+        height="3.5"
+        rx="1.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <rect
+        x="9.75"
+        y="15.75"
+        width="10.5"
+        height="3.5"
+        rx="1.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M9.5 17.5H8.5C6.84315 17.5 5.5 16.1569 5.5 14.5V7.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M9.5 10.5H8.5C6.84315 10.5 5.5 9.15685 5.5 7.5V7.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <circle
+        cx="5.5"
+        cy="5.5"
+        r="1.75"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+export function TableViewIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="3.75"
+        y="3.75"
+        width="16.5"
+        height="16"
+        rx="1.25"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M4 9H20M9.5 4V19.5M4 14.5H20"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+export function HistoryIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 14.4853 4.00736 16.7353 5.63604 18.364M11 7.6V13L14.6 14.8M5.63604 18.364L6.5 14.5M5.63604 18.364L1.5 17.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

shared/common/newui/index.ts

@@ -7,3 +7,4 @@ export * from "./icons";
 export * from "./logos";
 export * from "./infoTooltip";
 export * from "./modal";
+export * from "./iconToggle";