requested shard key

paula-stacho · paula-stacho · commit 9375d7106b6b · 2024-10-16T16:37:07.000+02:00
diff --git a/packages/compass-global-writes/src/components/index.tsx b/packages/compass-global-writes/src/components/index.tsx
@@ -20,6 +20,7 @@ const containerStyles = css({
   display: 'flex',
   width: '100%',
   height: '100%',
+  maxWidth: '700px',
 });
 
 const workspaceContentStyles = css({
diff --git a/packages/compass-global-writes/src/components/shard-key-markup.tsx b/packages/compass-global-writes/src/components/shard-key-markup.tsx
@@ -6,19 +6,20 @@ const codeBlockContainerStyles = css({
   display: 'flex',
   flexDirection: 'column',
   gap: spacing[100],
-  maxWidth: '700px',
 });
 
 interface ShardKeyMarkupProps {
   shardKey: ShardKey;
   namespace: string;
   showMetaData?: boolean;
+  type?: 'requested' | 'existing';
 }
 
 export function ShardKeyMarkup({
   namespace,
   shardKey,
   showMetaData,
+  type = 'existing',
 }: ShardKeyMarkupProps) {
   let markup = shardKey.fields
     .map(
@@ -31,7 +32,14 @@ export function ShardKeyMarkup({
   return (
     <div className={codeBlockContainerStyles}>
       <Body data-testid="shardkey-description-title">
-        <strong>{namespace}</strong> is configured with the following shard key:
+        {type === 'existing' ? (
+          <>
+            <strong>{namespace}</strong> is configured with the following shard
+            key:
+          </>
+        ) : (
+          <>You requested to use the shard key:</>
+        )}
       </Body>
       <Code language="js" data-testid="shardkey-description-content">
         {markup}
diff --git a/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx b/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx
@@ -15,6 +15,7 @@ import {
   type ShardKey,
 } from '../../store/reducer';
 import { connect } from 'react-redux';
+import type { ManagedNamespace } from '../../services/atlas-global-writes-service';
 
 const containerStyles = css({
   display: 'flex',
@@ -27,15 +28,33 @@ const unmanageBtnStyles = css({
   marginTop: spacing[100],
 });
 
+const getRequestedShardKey = (
+  managedNamespace: ManagedNamespace
+): ShardKey => ({
+  fields: [
+    {
+      name: 'location',
+      type: 'RANGE',
+    },
+    {
+      name: managedNamespace.customShardKey,
+      type: managedNamespace.isCustomShardKeyHashed ? 'HASHED' : 'RANGE',
+    },
+  ],
+  isUnique: managedNamespace.isShardKeyUnique,
+});
+
 interface ShardKeyMismatchProps {
   shardKey?: ShardKey;
+  requestedShardKey?: ShardKey;
   namespace: string;
   isUnmanagingNamespace: boolean;
   onUnmanageNamespace: () => void;
 }
 
 export function ShardKeyMismatch({
   shardKey,
+  requestedShardKey,
   namespace,
   onUnmanageNamespace,
   isUnmanagingNamespace,
@@ -64,14 +83,20 @@ export function ShardKeyMismatch({
             Unmanage collection
           </Button>
         </div>
-        {/* {this.state.error && <div className="bem-alert-error">{exceptionToMessage(this.state.error)}</div>} */}
       </Banner>
       <ShardKeyMarkup
         namespace={namespace}
         shardKey={shardKey}
         showMetaData={true}
       />
-      {/** TODO: Add the requested key */}
+      {requestedShardKey && (
+        <ShardKeyMarkup
+          namespace={namespace}
+          shardKey={requestedShardKey}
+          showMetaData={true}
+          type="requested"
+        />
+      )}
     </div>
   );
 }
@@ -80,6 +105,8 @@ export default connect(
   (state: RootState) => ({
     namespace: state.namespace,
     shardKey: state.shardKey,
+    requestedShardKey:
+      state.managedNamespace && getRequestedShardKey(state.managedNamespace),
     isUnmanagingNamespace:
       state.status === ShardingStatuses.UNMANAGING_NAMESPACE_MISMATCH,
   }),
