Replace RU limit banner by clarifying the error when RU limit is exceeded (#1966)

* allow DE to provide clearer error messages for certain conditions

* allow rendeering a "help" link for an error

* use TableCellLayout where possible

* remove RU Threshold banner, now that we have a clearer error

* refmt

* fix QueryError test

* change "RU Threshold" to "RU Limit"

src/Explorer/Tabs/QueryTab/ErrorList.tsx

@@ -12,7 +12,7 @@ import {
   createTableColumn,
   tokens,
 } from "@fluentui/react-components";
-import { ErrorCircleFilled, MoreHorizontalRegular, WarningFilled } from "@fluentui/react-icons";
+import { ErrorCircleFilled, MoreHorizontalRegular, QuestionRegular, WarningFilled } from "@fluentui/react-icons";
 import QueryError, { QueryErrorSeverity, compareSeverity } from "Common/QueryError";
 import { useQueryTabStyles } from "Explorer/Tabs/QueryTab/Styles";
 import { useNotificationConsole } from "hooks/useNotificationConsole";
@@ -34,25 +34,32 @@ export const ErrorList: React.FC<{ errors: QueryError[] }> = ({ errors }) => {
     createTableColumn<QueryError>({
       columnId: "code",
       compare: (item1, item2) => item1.code.localeCompare(item2.code),
-      renderHeaderCell: () => null,
-      renderCell: (item) => item.code,
+      renderHeaderCell: () => "Code",
+      renderCell: (item) => <TableCellLayout truncate>{item.code}</TableCellLayout>,
     }),
     createTableColumn<QueryError>({
       columnId: "severity",
       compare: (item1, item2) => compareSeverity(item1.severity, item2.severity),
-      renderHeaderCell: () => null,
-      renderCell: (item) => <TableCellLayout media={severityIcons[item.severity]}>{item.severity}</TableCellLayout>,
+      renderHeaderCell: () => "Severity",
+      renderCell: (item) => (
+        <TableCellLayout truncate media={severityIcons[item.severity]}>
+          {item.severity}
+        </TableCellLayout>
+      ),
     }),
     createTableColumn<QueryError>({
       columnId: "location",
       compare: (item1, item2) => item1.location?.start?.offset - item2.location?.start?.offset,
       renderHeaderCell: () => "Location",
-      renderCell: (item) =>
-        item.location
-          ? item.location.start.lineNumber
-            ? `Line ${item.location.start.lineNumber}`
-            : "<unknown>"
-          : "<no location>",
+      renderCell: (item) => (
+        <TableCellLayout truncate>
+          {item.location
+            ? item.location.start.lineNumber
+              ? `Line ${item.location.start.lineNumber}`
+              : "<unknown>"
+            : "<no location>"}
+        </TableCellLayout>
+      ),
     }),
     createTableColumn<QueryError>({
       columnId: "message",
@@ -60,8 +67,20 @@ export const ErrorList: React.FC<{ errors: QueryError[] }> = ({ errors }) => {
       renderHeaderCell: () => "Message",
       renderCell: (item) => (
         <div className={styles.errorListMessageCell}>
-          <div className={styles.errorListMessage}>{item.message}</div>
-          <div>
+          <div className={styles.errorListMessage} title={item.message}>
+            {item.message}
+          </div>
+          <div className={styles.errorListMessageActions}>
+            {item.helpLink && (
+              <Button
+                as="a"
+                aria-label="Help"
+                appearance="subtle"
+                icon={<QuestionRegular />}
+                href={item.helpLink}
+                target="_blank"
+              />
+            )}
             <Button
               aria-label="Details"
               appearance="subtle"
@@ -76,9 +95,9 @@ export const ErrorList: React.FC<{ errors: QueryError[] }> = ({ errors }) => {
 
   const columnSizingOptions: TableColumnSizingOptions = {
     code: {
-      minWidth: 75,
-      idealWidth: 75,
-      defaultWidth: 75,
+      minWidth: 90,
+      idealWidth: 90,
+      defaultWidth: 90,
     },
     severity: {
       minWidth: 100,

src/Explorer/Tabs/QueryTab/Styles.ts

@@ -72,6 +72,11 @@ export const useQueryTabStyles = makeStyles({
   metricsGridButtons: {
     ...cosmosShorthands.borderTop(),
   },
+  errorListTableCell: {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+  },
   errorListMessageCell: {
     display: "flex",
     flexDirection: "row",
@@ -80,5 +85,12 @@ export const useQueryTabStyles = makeStyles({
   },
   errorListMessage: {
     flexGrow: 1,
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+  },
+  errorListMessageActions: {
+    display: "flex",
+    flexDirection: "row",
   },
 });

src/Explorer/Tabs/Tabs.tsx

@@ -1,7 +1,7 @@
-import { IMessageBarStyles, Link, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
+import { IMessageBarStyles, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
 import { CassandraProxyEndpoints, MongoProxyEndpoints } from "Common/Constants";
 import { sendMessage } from "Common/MessageHandler";
-import { Platform, configContext, updateConfigContext } from "ConfigContext";
+import { configContext, updateConfigContext } from "ConfigContext";
 import { IpRule } from "Contracts/DataModels";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { CollectionTabKind } from "Contracts/ViewModels";
@@ -16,7 +16,6 @@ import { VcoreMongoConnectTab } from "Explorer/Tabs/VCoreMongoConnectTab";
 import { VcoreMongoQuickstartTab } from "Explorer/Tabs/VCoreMongoQuickstartTab";
 import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { hasRUThresholdBeenConfigured } from "Shared/StorageUtility";
 import { userContext } from "UserContext";
 import { CassandraProxyOutboundIPs, MongoProxyOutboundIPs, PortalBackendIPs } from "Utils/EndpointUtils";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
@@ -37,9 +36,6 @@ interface TabsProps {
 
 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
   const { openedTabs, openedReactTabs, activeTab, activeReactTab, networkSettingsWarning } = useTabs();
-  const [showRUThresholdMessageBar, setShowRUThresholdMessageBar] = useState<boolean>(
-    userContext.apiType === "SQL" && configContext.platform !== Platform.Fabric && !hasRUThresholdBeenConfigured(),
-  );
   const [
     showMongoAndCassandraProxiesNetworkSettingsWarningState,
     setShowMongoAndCassandraProxiesNetworkSettingsWarningState,
@@ -87,30 +83,6 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
           {networkSettingsWarning}
         </MessageBar>
       )}
-      {showRUThresholdMessageBar && (
-        <MessageBar
-          messageBarType={MessageBarType.info}
-          onDismiss={() => {
-            setShowRUThresholdMessageBar(false);
-          }}
-          styles={{
-            ...defaultMessageBarStyles,
-            innerText: {
-              fontWeight: "bold",
-            },
-          }}
-          dismissButtonAriaLabel="Close info"
-        >
-          {`Data Explorer has a 5,000 RU default limit. To adjust the limit, go to the Settings page and find "RU Threshold".`}
-          <Link
-            className="underlinedLink"
-            href="https://review.learn.microsoft.com/en-us/azure/cosmos-db/data-explorer?branch=main#configure-request-unit-threshold"
-            target="_blank"
-          >
-            Learn More
-          </Link>
-        </MessageBar>
-      )}
       {showMongoAndCassandraProxiesNetworkSettingsWarningState && (
         <MessageBar
           messageBarType={MessageBarType.warning}