fix(compass-global-writes): show error on all invalid statuses COMPASS-8451

packages/compass-global-writes/src/components/states/shard-key-correct.tsx

@@ -65,7 +65,7 @@ export function ShardKeyCorrect({
         <Button
           data-testid="unmanage-collection-button"
           onClick={onUnmanageNamespace}
-          variant={ButtonVariant.Primary}
+          variant={ButtonVariant.Default}
           isLoading={isUnmanagingNamespace}
           loadingIndicator={<SpinLoader />}
         >

packages/compass-global-writes/src/plugin-title.spec.tsx

@@ -4,13 +4,19 @@ import { PluginTitle } from './plugin-title';
 import { render, screen } from '@mongodb-js/testing-library-compass';
 
 describe('PluginTitle', function () {
-  it('Renders a warning', function () {
-    render(<PluginTitle showWarning={true} />);
+  it('Renders a warning when showError', function () {
+    render(<PluginTitle showError={true} showWarning={false} />);
     expect(screen.getByLabelText('warning')).to.be.visible;
   });
 
+  it("Renders an 'important' warning when showWarning", function () {
+    render(<PluginTitle showError={false} showWarning={true} />);
+    expect(screen.getByLabelText('important')).to.be.visible;
+  });
+
   it('Does not render a warning', function () {
-    render(<PluginTitle showWarning={false} />);
+    render(<PluginTitle showError={false} showWarning={false} />);
     expect(screen.queryByLabelText('warning')).not.to.exist;
+    expect(screen.queryByLabelText('important')).not.to.exist;
   });
 });

packages/compass-global-writes/src/plugin-title.tsx

@@ -22,20 +22,62 @@ const warningIconStyles = css({
   display: 'flex',
 });
 
-const iconStylesLight = css({
+const warningIconStylesLight = css({
   color: palette.yellow.dark2,
 });
 
-const iconStylesDark = css({
+const warningIconStylesDark = css({
   color: palette.yellow.base,
 });
 
-export const PluginTitle = ({ showWarning }: { showWarning: boolean }) => {
-  const darkMode = useDarkMode();
+const importantIconStylesLight = css({
+  color: palette.red.dark2,
+});
+
+const importantIconStylesDark = css({
+  color: palette.red.base,
+});
+
+const ErrorIcon = ({ darkMode }: { darkMode: boolean }) => {
+  return (
+    <Icon
+      glyph="Warning"
+      aria-label="warning"
+      className={cx(
+        warningIconStyles,
+        warningIconStylesLight,
+        darkMode && warningIconStylesDark
+      )}
+    />
+  );
+};
+
+const WarningIcon = ({ darkMode }: { darkMode: boolean }) => {
+  return (
+    <Icon
+      glyph="ImportantWithCircle"
+      aria-label="important"
+      className={cx(
+        warningIconStyles,
+        importantIconStylesLight,
+        darkMode && importantIconStylesDark
+      )}
+    />
+  );
+};
+
+export const PluginTitle = ({
+  showError,
+  showWarning,
+}: {
+  showError: boolean;
+  showWarning: boolean;
+}) => {
+  const darkMode = !!useDarkMode();
   return (
     <div data-testid="global-writes-tab-title" className={containerStyles}>
       Global Writes{' '}
-      {showWarning && (
+      {(showError || showWarning) && (
         <Tooltip
           data-testid="collection-stats-tooltip"
           align="bottom"
@@ -48,15 +90,11 @@ export const PluginTitle = ({ showWarning }: { showWarning: boolean }) => {
                 // so we add noop onClick and let it bubble up.
               }}
             >
-              <Icon
-                glyph="ImportantWithCircle"
-                aria-label="warning"
-                className={cx(
-                  warningIconStyles,
-                  iconStylesLight,
-                  darkMode && iconStylesDark
-                )}
-              />
+              {showError ? (
+                <ErrorIcon darkMode={darkMode} />
+              ) : (
+                <WarningIcon darkMode={darkMode} />
+              )}
             </span>
           }
         >
@@ -72,8 +110,22 @@ export const PluginTitle = ({ showWarning }: { showWarning: boolean }) => {
   );
 };
 
-export const GlobalWritesTabTitle = connect(
-  ({ managedNamespace, status }: RootState) => ({
-    showWarning: !managedNamespace && status !== ShardingStatuses.NOT_READY,
-  })
-)(PluginTitle);
+export const GlobalWritesTabTitle = connect(({ status }: RootState) => {
+  const errorStatuses = [
+    ShardingStatuses.LOADING_ERROR,
+    ShardingStatuses.SHARDING_ERROR,
+    ShardingStatuses.SHARD_KEY_MISMATCH,
+    ShardingStatuses.SHARD_KEY_INVALID,
+  ];
+  const okStatuses = [
+    ShardingStatuses.NOT_READY,
+    ShardingStatuses.SHARD_KEY_CORRECT,
+  ];
+  const showError = errorStatuses.includes(status);
+  const showWarning = !showError && !okStatuses.includes(status);
+
+  return {
+    showError,
+    showWarning,
+  };
+})(PluginTitle);