one more regex edge case, valid element nesting

acao · acao · commit 68a938254ce0 · 2022-03-26T12:11:19.000+01:00
diff --git a/packages/graphiql/src/components/Tabs.tsx b/packages/graphiql/src/components/Tabs.tsx
@@ -6,7 +6,9 @@ import React from 'react';
 
 function TabCloseButton(props: { onClick: () => void }) {
   return (
-    <button
+    <div
+      role="button"
+      aria-pressed={false}
       className="close"
       aria-label="Close Tab"
       title="Close Tab"
diff --git a/packages/graphiql/src/css/app.css b/packages/graphiql/src/css/app.css
@@ -551,6 +551,7 @@ div.CodeMirror-lint-tooltip > * + * {
 } */
 
 .graphiql-container .tab .close {
+  display: inline-block;
   cursor: pointer;
   border: none;
   background: transparent;
diff --git a/packages/graphiql/src/utility/__tests__/fuzzyExtractOperationTitle.spec.ts b/packages/graphiql/src/utility/__tests__/fuzzyExtractOperationTitle.spec.ts
@@ -24,4 +24,9 @@ describe('fuzzyExtractionOperationTitle', () => {
   it('should return null for anonymous queries', () => {
     expect(fuzzyExtractOperationTitle('{}')).toEqual('<untitled>');
   });
+  it('should not extract query names with comments', () => {
+    expect(fuzzyExtractOperationTitle('# query My_3xampleQuery() {}')).toEqual(
+      '<untitled>',
+    );
+  });
 });
diff --git a/packages/graphiql/src/utility/fuzzyExtractOperationTitle.ts b/packages/graphiql/src/utility/fuzzyExtractOperationTitle.ts
@@ -2,7 +2,7 @@
  * Very simple and quick way of extracting the operation title from a document string (compared to parsing and traversing the whole AST).
  */
 export function fuzzyExtractOperationTitle(str: string): string {
-  const regex = /(query|subscription|mutation) ([a-zA-Z0-9_]+)/;
+  const regex = /^[^#](query|subscription|mutation) ([a-zA-Z0-9_]+)/;
   const match = regex.exec(str);
 
   return match?.[2] ?? '<untitled>';
