Fix graphiql react issue with setting tabs title (#2968)

* updates fuzzyExtractOperationName regex

* adds/rearranges tests for "comment line handling"

packages/graphiql-react/src/editor/__tests__/tabs.spec.ts

@@ -78,10 +78,27 @@ describe('fuzzyExtractionOperationTitle', () => {
   it('should return null for anonymous queries', () => {
     expect(fuzzyExtractOperationName('{}')).toBeNull();
   });
-  it('should not extract query names with comments', () => {
-    expect(
-      fuzzyExtractOperationName('# query My_3ExampleQuery() {}'),
-    ).toBeNull();
+
+  describe('comment line handling', () => {
+    it('should not extract query names within commented out lines', () => {
+      expect(
+        fuzzyExtractOperationName('# query My_3ExampleQuery() {}'),
+      ).toBeNull();
+    });
+    it('should extract query names when there is a single leading comment line', () => {
+      expect(
+        fuzzyExtractOperationName(
+          '# comment line 1 \n query MyExampleQueryWithSingleCommentLine() {}',
+        ),
+      ).toEqual('MyExampleQueryWithSingleCommentLine');
+    });
+    it('should extract query names when there are more than one leading comment lines', () => {
+      expect(
+        fuzzyExtractOperationName(
+          '# comment line 1 \n # comment line 2 \n query MyExampleQueryWithMultipleCommentLines() {}',
+        ),
+      ).toEqual('MyExampleQueryWithMultipleCommentLines');
+    });
   });
 });
 

packages/graphiql-react/src/editor/tabs.ts

@@ -337,7 +337,8 @@ function hashFromTabContents(args: {
 }
 
 export function fuzzyExtractOperationName(str: string): string | null {
-  const regex = /^(?!.*#).*(query|subscription|mutation)\s+([a-zA-Z0-9_]+)/;
+  const regex = /^(?!#).*(query|subscription|mutation)\s+([a-zA-Z0-9_]+)/m;
+
   const match = regex.exec(str);
 
   return match?.[2] ?? null;