🤖 backported "Bump jetty-server to 9.4.48.v20220622"

deps.edn

@@ -117,7 +117,7 @@
   org.clojure/tools.namespace               {:mvn/version "1.3.0"}
   org.clojure/tools.reader                  {:mvn/version "1.3.6"}
   org.clojure/tools.trace                   {:mvn/version "0.7.11"}             ; function tracing
-  org.eclipse.jetty/jetty-server            {:mvn/version "9.4.44.v20210927"}   ; web server
+  org.eclipse.jetty/jetty-server            {:mvn/version "9.4.48.v20220622"}   ; web server
   org.flatland/ordered                      {:mvn/version "1.15.10"}            ; ordered maps & sets
   org.graalvm.js/js                         {:mvn/version "22.0.0.2"}           ; JavaScript engine
   org.liquibase/liquibase-core              {:mvn/version "4.10.0"              ; migration management (Java lib)

docs/troubleshooting-guide/sync-fingerprint-scan.md

@@ -17,7 +17,7 @@ Metabase needs to know what's in your database in order to show tables and field
 
 2. Metabase *fingerprints* the column the first time it synchronizes. Fingerprinting fetches the first 10,000 rows from each column and uses that data to guesstimate how many unique values each column has, what the minimum and maximum values are for numeric and timestamp columns, and so on. Metabase only fingerprints each column once, unless the administrator explicitly tells it to fingerprint the column again, or in the rare event that a new release of Metabase changes the fingerprinting logic.
 
-3. A *scan* is similar to fingerprinting, but is done every 24 hours (unless it's configured to run less often or disabled).  Scanning looks at the first 1000 distinct records ordered ascending, when a field is set to "A list of all values" in the Data Model, which is used to display options in dropdowns. If the textual result of scanning a column is more than 10 kilobytes long, for example, we display a search box instead of a dropdown.
+3. A *scan* is similar to fingerprinting. Metabase will scan a database by default every 24 hours (though you can configure Metabase to run a scan less frequently, or disable scanning entirely). When you set a field to "A list of all values" in the [Data Model](../administration-guide/03-metadata-editing.md), which is used to display options in dropdown menus, scanning looks at the first 1,000 distinct records (ordered ascending). For each field scanned, Metabase stores only the first 100 kilobytes of text. If more values exist, Metabase displays the stored values in the dropdown menus, and only triggers a database search query to look for more values when people type in the search box for that filter widget.
 
 <h2 id="cant-sync-fingerprint-scan">Metabase can't sync, fingerprint, or scan</h2>
 

frontend/src/metabase-lib/lib/Dimension.ts

@@ -274,6 +274,10 @@ export default class Dimension {
     );
   }
 
+  isExpression(): boolean {
+    return isExpressionDimension(this);
+  }
+
   foreign(dimension: Dimension): FieldDimension {
     return null;
   }

frontend/src/metabase-lib/lib/DimensionOptions/DimensionOptions.ts

@@ -36,7 +36,9 @@ export default class DimensionOptions {
   }
 
   sections({ extraItems = [] } = {}): DimensionOptionsSection[] {
-    const [dimension] = this.dimensions;
+    const dimension =
+      this.dimensions.find(dimension => !dimension.isExpression()) ??
+      this.dimensions[0];
     const table = dimension && dimension.field().table;
     const tableName = table ? table.objectName() : null;
     const mainSection: DimensionOptionsSection = {

frontend/src/metabase/admin/datamodel/components/database/ColumnItem/ColumnItem.styled.tsx

@@ -7,7 +7,7 @@ interface ColumnItemInputProps {
 }
 
 export const ColumnItemInput = styled(InputBlurChange)<ColumnItemInputProps>`
-  border-color: ${color("border-dark")};
+  border-color: ${color("border")};
 
   background-color: ${props =>
     color(props.variant === "primary" ? "white" : "bg-light")};

frontend/src/metabase/admin/settings/components/SettingsBatchForm.jsx

@@ -21,7 +21,7 @@ const VALIDATIONS = {
   },
   email_list: {
     validate: value => value.every(MetabaseUtils.isEmail),
-    message: t`That's not a valid list of email addresses`,
+    message: t`That's not a valid email address`,
   },
   integer: {
     validate: value => !isNaN(parseInt(value)),

frontend/src/metabase/admin/settings/components/widgets/SettingCommaDelimitedInput.jsx

@@ -3,6 +3,8 @@ import React from "react";
 import InputBlurChange from "metabase/components/InputBlurChange";
 import cx from "classnames";
 
+const maybeSingletonList = value => (value ? [value] : null);
+
 const SettingCommaDelimitedInput = ({
   setting,
   onChange,
@@ -25,8 +27,13 @@ const SettingCommaDelimitedInput = ({
       // https://github.com/metabase/metabase/issues/22540
       value={setting.value ? setting.value[0] : ""}
       placeholder={setting.placeholder}
-      onChange={fireOnChange ? e => onChange([e.target.value]) : null}
-      onBlurChange={!fireOnChange ? e => onChange([e.target.value]) : null}
+      // If the input's value is empty, setting.value should be null
+      onChange={
+        fireOnChange ? e => onChange(maybeSingletonList(e.target.value)) : null
+      }
+      onBlurChange={
+        !fireOnChange ? e => onChange(maybeSingletonList(e.target.value)) : null
+      }
       autoFocus={autoFocus}
     />
   );

frontend/src/metabase/admin/settings/selectors.js

@@ -214,7 +214,7 @@ const SECTIONS = updateSectionsWithPlugins({
         type: "string",
         required: false,
         widget: SettingCommaDelimitedInput,
-        validations: [["email_list", t`That's not a valid email addresses`]],
+        validations: [["email_list", t`That's not a valid email address`]],
       },
     ],
   },

frontend/src/metabase/components/InputBlurChange.styled.tsx

@@ -2,5 +2,5 @@ import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
 
 export const Input = styled.input`
-  border: 1px solid ${color("border-dark")};
+  border: 1px solid ${color("border")};
 `;

frontend/src/metabase/components/TextInput/TextInput.styled.tsx

@@ -33,7 +33,7 @@ const getBorderColor = (colorScheme: ColorScheme, invalid?: boolean) => {
     return color("error");
   }
 
-  return colorScheme === "transparent" ? "transparent" : color("border-dark");
+  return colorScheme === "transparent" ? "transparent" : color("border");
 };
 
 export const Input = styled.input<InputProps>`

frontend/src/metabase/components/TokenField/TokenField.styled.tsx

@@ -21,7 +21,7 @@ export const TokenFieldContainer = styled.ul`
   overflow-x: auto;
   overflow-y: auto;
   border-radius: ${space(1)};
-  border: 1px solid ${color("border-dark")};
+  border: 1px solid ${color("border")};
 `;
 
 export const TokenInputItem = styled.li`

frontend/src/metabase/components/TokenField/TokenField.tsx

@@ -459,18 +459,12 @@ export default class TokenField extends Component<
     } else {
       onChange(valueToAdd.slice(0, 1));
     }
-    // reset the input value
-    // setTimeout(() =>
-    //   this.setInputValue("")
-    // )
   }
 
   removeValue(valueToRemove: any) {
     const { value, onChange } = this.props;
     const values = value.filter(v => !this._valueIsEqual(v, valueToRemove));
     onChange(values);
-    // reset the input value
-    // this.setInputValue("");
   }
 
   _valueIsEqual(v1: any, v2: any) {
@@ -596,6 +590,7 @@ export default class TokenField extends Component<
                 onClick={e => {
                   e.preventDefault();
                   this.removeValue(v);
+                  this.inputRef?.current?.blur();
                 }}
                 onMouseDown={e => e.preventDefault()}
               >

frontend/src/metabase/core/components/Input/Input.styled.tsx

@@ -26,7 +26,7 @@ export const InputField = styled.input<InputProps>`
   font-size: 1rem;
   color: ${color("text-dark")};
   padding: 0.75rem;
-  border: 1px solid ${color("border-dark")};
+  border: 1px solid ${color("border")};
   border-radius: ${space(1)};
   background-color: ${props => color(props.readOnly ? "bg-light" : "bg-white")};
   outline: none;

frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx

@@ -24,7 +24,7 @@ export const SelectButtonRoot = styled.button<SelectButtonRootProps>`
   padding: 0.6em;
   border: 1px solid
     ${({ hasValue, highlighted }) =>
-      hasValue && highlighted ? color("brand") : color("border-dark")};
+      hasValue && highlighted ? color("brand") : color("border")};
   background-color: ${({ hasValue, highlighted }) =>
     hasValue && highlighted ? color("brand") : color("white")};
   border-radius: ${space(1)};

frontend/src/metabase/core/components/Tab/Tab.styled.tsx

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
+import { color, alpha } from "metabase/lib/colors";
+import { space } from "metabase/styled-components/theme";
 import Icon from "metabase/components/Icon";
 import Ellipsified from "../Ellipsified";
 
@@ -8,19 +9,20 @@ export interface TabProps {
 }
 
 export const TabRoot = styled.button<TabProps>`
-  display: inline-flex;
-  align-items: center;
-  color: ${props =>
-    props.isSelected ? color("text-dark") : color("text-light")};
+  display: flex;
+  width: 100%;
+  flex: 1;
+  text-align: left;
+
+  color: ${props => (props.isSelected ? color("brand") : color("text-light"))};
+  background-color: ${props =>
+    props.isSelected ? alpha("brand", 0.1) : "transparent"};
   cursor: pointer;
 
   margin-bottom: 0.75rem;
-  padding-bottom: 0.25rem;
-
-  &:first-of-type {
-    padding-right: 1.5rem;
-    border-right: ${color("border")} 1px solid;
-  }
+  padding: 0.75rem 1rem;
+  margin-right: ${space(1)};
+  border-radius: ${space(0)};
 
   &:hover {
     color: ${color("brand")};
@@ -38,10 +40,13 @@ export const TabRoot = styled.button<TabProps>`
 export const TabIcon = styled(Icon)`
   width: 0.8rem;
   height: 0.8rem;
+  margin-top: 0.2rem;
   margin-right: 0.5rem;
 `;
 
-export const TabLabel = styled(Ellipsified)`
+export const TabLabel = styled.div`
+  width: 100%;
   font-weight: bold;
-  max-width: 16rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;

frontend/src/metabase/core/components/TabList/TabList.stories.tsx

@@ -11,7 +11,7 @@ export default {
 };
 
 const sampleStyle = {
-  maxWidth: "400px",
+  maxWidth: "200px",
   padding: "10px",
   border: "1px solid #ccc",
 };
@@ -25,7 +25,7 @@ const Template: ComponentStory<typeof TabList> = args => {
       <TabList {...args} value={value} onChange={handleChange}>
         <Tab value={1}>Tab 1</Tab>
         <Tab value={2}>Tab 2</Tab>
-        <Tab value={3}>Tab3supercalifragilisticexpialidocious</Tab>
+        <Tab value={3}>Tab3_supercal_ifragilisticexpia_lidocious</Tab>
         <Tab value={4}>
           Tab 4 With a Very Long Name that may cause this component to wrap
         </Tab>

frontend/src/metabase/core/components/TabList/TabList.styled.tsx

@@ -1,42 +1,10 @@
 import styled from "@emotion/styled";
-import { alpha, color } from "metabase/lib/colors";
-import { space } from "metabase/styled-components/theme";
 
 export const TabListRoot = styled.div`
   position: relative;
-  display: flex;
-  align-items: center;
 `;
 
 export const TabListContent = styled.div`
-  overflow-x: hidden;
-  display: flex;
-  align-items: flex-start;
-  gap: 1.5rem;
   scroll-behavior: smooth;
-`;
-
-interface ScrollButtonProps {
-  directionIcon: "left" | "right";
-}
-
-export const ScrollButton = styled.button<ScrollButtonProps>`
-  position: absolute;
-  cursor: pointer;
   height: 100%;
-  width: 3rem;
-  padding-bottom: ${space(2)};
-  text-align: ${props => props.directionIcon};
-  color: ${color("text-light")};
-  &:hover {
-    color: ${color("brand")};
-  }
-  ${props => props.directionIcon}: 0;
-  background: linear-gradient(
-    to ${props => props.directionIcon},
-    ${alpha("white", 0.1)},
-    ${alpha("white", 0.5)},
-    30%,
-    ${color("white")}
-  );
 `;

frontend/src/metabase/core/components/TabList/TabList.tsx

@@ -12,7 +12,7 @@ import React, {
 import Icon from "metabase/components/Icon";
 import { useUniqueId } from "metabase/hooks/use-unique-id";
 import { TabContext, TabContextType } from "../Tab";
-import { TabListContent, TabListRoot, ScrollButton } from "./TabList.styled";
+import { TabListContent, TabListRoot } from "./TabList.styled";
 
 const UNDERSCROLL_PIXELS = 32;
 
@@ -30,9 +30,6 @@ const TabList = forwardRef(function TabGroup<T>(
   const idPrefix = useUniqueId();
   const outerContext = useContext(TabContext);
 
-  const [scrollPosition, setScrollPosition] = useState(0);
-  const [showScrollRight, setShowScrollRight] = useState(false);
-
   const tabListContentRef = useRef(null);
 
   const innerContext = useMemo(() => {
@@ -41,61 +38,15 @@ const TabList = forwardRef(function TabGroup<T>(
 
   const activeContext = outerContext.isDefault ? innerContext : outerContext;
 
-  const scroll = (direction: string) => {
-    if (tabListContentRef.current) {
-      const container = tabListContentRef.current as HTMLDivElement;
-
-      const scrollDistance =
-        (container.offsetWidth - UNDERSCROLL_PIXELS) *
-        (direction === "left" ? -1 : 1);
-      container.scrollBy(scrollDistance, 0);
-      setScrollPosition(container.scrollLeft + scrollDistance);
-    }
-  };
-
-  const showScrollLeft = scrollPosition > 0;
-
-  useEffect(() => {
-    if (!tabListContentRef.current) {
-      return;
-    }
-
-    const container = tabListContentRef.current as HTMLDivElement;
-    setShowScrollRight(
-      scrollPosition + container.offsetWidth < container.scrollWidth,
-    );
-  }, [scrollPosition]);
-
   return (
     <TabListRoot {...props} ref={ref} role="tablist">
       <TabListContent ref={tabListContentRef}>
         <TabContext.Provider value={activeContext as TabContextType}>
           {children}
         </TabContext.Provider>
       </TabListContent>
-      {showScrollLeft && (
-        <ScrollArrow direction="left" onClick={() => scroll("left")} />
-      )}
-      {showScrollRight && (
-        <ScrollArrow direction="right" onClick={() => scroll("right")} />
-      )}
     </TabListRoot>
   );
 });
 
-interface ScrollArrowProps {
-  direction: "left" | "right";
-  onClick: () => void;
-}
-
-const ScrollArrow = ({ direction, onClick }: ScrollArrowProps) => (
-  <ScrollButton
-    onClick={onClick}
-    directionIcon={direction}
-    aria-label={`scroll-${direction}-button`}
-  >
-    <Icon name={`chevron${direction}`} color="brand" />
-  </ScrollButton>
-);
-
 export default TabList;

frontend/src/metabase/css/components/form.css

@@ -1,5 +1,5 @@
 :root {
-  --form-field-border-color: var(--color-border-dark);
+  --form-field-border-color: var(--color-border);
   --input-border-radius: 8px;
 }
 ::-webkit-input-placeholder {
@@ -56,7 +56,7 @@
 }
 .Form-file-input::before {
   background: transparent;
-  border: 1px solid color-mod(var(--color-border-dark) blackness(5%));
+  border: 1px solid color-mod(var(--color-border) blackness(5%));
   border-radius: 6px;
   box-sizing: border-box;
   color: var(--color-text-dark);

frontend/src/metabase/css/core/colors.css

@@ -31,7 +31,6 @@
   --color-focus: #cbe2f7;
   --color-shadow: rgba(0, 0, 0, 0.13);
   --color-border: #eeecec;
-  --color-border-dark: #c9ced3;
 
   /* Saturated colors for the SQL editor. Shouldn't be used elsewhere since they're not white-labelable. */
   --color-saturated-blue: #2d86d4;

frontend/src/metabase/css/core/inputs.css

@@ -1,5 +1,5 @@
 :root {
-  --input-border-color: var(--color-border-dark);
+  --input-border-color: var(--color-border);
   --input-border-active-color: var(--color-brand);
   --input-border-radius: 8px;
 }

frontend/src/metabase/dashboard/containers/DashboardHeader.styled.jsx

@@ -8,7 +8,7 @@ export const DashboardHeaderActionDivider = styled.div`
   padding-left: 0.5rem;
   margin-left: 0.5rem;
   width: 0px;
-  border-left: 1px solid ${color("border-dark")};
+  border-left: 1px solid ${color("border")};
 `;
 
 export const DashboardHeaderButton = styled(Button)`