fix(insights): Incorrect comma placement in MongoDB queries (#77720)

Fixes a bug where a comma separator would not be added when formatting
MongoDB queries, when the original query JSON has the operation entry as
the very last entry in the object

### Before
```
"findOne": "my_collection""first_key": "first_value", "second_key": "second_value",
```

### After
```
"findOne": "my_collection", "first_key": "first_value", "second_key": "second_value"
```

static/app/views/insights/database/utils/formatMongoDBQuery.spec.tsx

@@ -101,4 +101,16 @@ describe('formatMongoDBQuery', function () {
     );
     expect(truncatedEntry).toBeInTheDocument();
   });
+
+  it('properly handles formatting MongoDB queries when the operation entry is the last entry', function () {
+    const query = `{"first_key":"first_value","second_key":"second_value","findOne":"my_collection"}`;
+    const tokenizedQuery = formatMongoDBQuery(query, 'findOne');
+    render(<Fragment>{tokenizedQuery}</Fragment>);
+
+    const boldedText = screen.getByText(/"findOne": "my_collection"/i);
+    expect(boldedText).toContainHTML('<b>"findOne": "my_collection"</b>');
+
+    const commaTokens = screen.getAllByText(',');
+    expect(commaTokens).toHaveLength(2);
+  });
 });

static/app/views/insights/database/utils/formatMongoDBQuery.tsx

@@ -39,31 +39,28 @@ export function formatMongoDBQuery(query: string, command: string) {
   const tempTokens: ReactElement[] = [];
 
   const queryEntries = Object.entries(queryObject);
-  queryEntries.forEach(([key, val], index) => {
+  queryEntries.forEach(([key, val]) => {
+    const isBoldedEntry = key.toLowerCase() === command.toLowerCase();
+
     // Push the bolded entry into tokens so it is the first entry displayed.
     // The other tokens will be pushed into tempTokens, and then copied into tokens afterwards
-    const isBoldedEntry = key.toLowerCase() === command.toLowerCase();
+    isBoldedEntry
+      ? tokens.push(jsonEntryToToken(key, val, true))
+      : tempTokens.push(jsonEntryToToken(key, val));
+  });
 
-    if (index === queryEntries.length - 1) {
-      isBoldedEntry
-        ? tokens.push(jsonEntryToToken(key, val, true))
-        : tempTokens.push(jsonEntryToToken(key, val));
+  if (tokens.length === 1 && tempTokens.length > 0) {
+    tokens.push(stringToToken(', ', `${tokens[0].key}:,`));
+  }
 
-      return;
-    }
+  tempTokens.forEach((token, index) => {
+    tokens.push(token);
 
-    if (isBoldedEntry) {
-      tokens.push(jsonEntryToToken(key, val, true));
-      tokens.push(stringToToken(', ', `${key}:${val},`));
-      return;
+    if (index !== tempTokens.length - 1) {
+      tokens.push(stringToToken(', ', `${token.key}:${index}`));
     }
-
-    tempTokens.push(jsonEntryToToken(key, val));
-    tempTokens.push(stringToToken(', ', `${key}:${val},`));
   });
 
-  tempTokens.forEach(token => tokens.push(token));
-
   sentrySpan.end();
 
   return tokens;