Improve wrapping of GraphQL fragment directives (#7721)

* fix GraphQL line wrapping for fragment directives is ugly

* update test of graphql for fixing directives

* add changelog_unreleased for pr-7721

* fix graphql directive

* update test of graphql

* update changelog_unreleased

* Update changelog_unreleased/graphql/pr-7721.md

Co-authored-by: Jed Fox <git@twopointzero.us>

* Fix comment in changelog

Co-authored-by: Georgii Dolzhykov <thorn.mailbox@gmail.com>
Co-authored-by: Jed Fox <git@twopointzero.us>
Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/graphql/pr-7721.md

@@ -0,0 +1,23 @@
+#### Improve wrapping of GraphQL fragment directives ([#7721](https://github.com/prettier/prettier/pull/7721) by [@sasurau4](https://github.com/sasurau4))
+
+<!-- prettier-ignore -->
+```graphql
+# Input
+fragment TodoList_list on TodoList @argumentDefinitions(
+  count: {type: "Int", defaultValue: 10},
+) {
+  title
+}
+
+# Prettier stable
+fragment TodoList_list on TodoList
+  @argumentDefinitions(count: { type: "Int", defaultValue: 10 }) {
+  title
+}
+
+# Prettier master
+fragment TodoList_list on TodoList
+@argumentDefinitions(count: { type: "Int", defaultValue: 10 }) {
+  title
+}
+```

src/language-graphql/printer-graphql.js

@@ -616,20 +616,7 @@ function printDirectives(path, print, n) {
     return "";
   }
 
-  return concat([
-    " ",
-    group(
-      indent(
-        concat([
-          softline,
-          join(
-            concat([ifBreak("", " "), softline]),
-            path.map(print, "directives")
-          ),
-        ])
-      )
-    ),
-  ]);
+  return group(concat([line, join(line, path.map(print, "directives"))]));
 }
 
 function printSequence(sequencePath, options, print) {

tests/graphql_bracket_spacing/__snapshots__/jsfmt.spec.js.snap

@@ -16,7 +16,7 @@ fragment Visit on HighlightedVisit
 
 =====================================output=====================================
 fragment Visit on HighlightedVisit
-  @argumentDefinitions(count: {type: "Int", defaultValue: 20}) {
+@argumentDefinitions(count: {type: "Int", defaultValue: 20}) {
   name
 }
 
@@ -38,7 +38,7 @@ fragment Visit on HighlightedVisit
 
 =====================================output=====================================
 fragment Visit on HighlightedVisit
-  @argumentDefinitions(count: { type: "Int", defaultValue: 20 }) {
+@argumentDefinitions(count: { type: "Int", defaultValue: 20 }) {
   name
 }
 

tests/graphql_directives/__snapshots__/jsfmt.spec.js.snap

@@ -32,7 +32,7 @@ query MyQuery @directive(arg: 5) {
   field @skip(if: true) @nope
   otherField
   ...fragmentSpread
-    @include(if: ["this isn't even a boolean", "wow, that's really odd"])
+  @include(if: ["this isn't even a boolean", "wow, that's really odd"])
 }
 
 fragment YouCanHaveDirectivesHereToo on SomeType @yesReally(what: "yes") {
@@ -45,10 +45,10 @@ fragment YouCanHaveDirectivesHereToo on SomeType @yesReally(what: "yes") {
   }
 
   thisFieldHasALotOfDirectives
-    @thisIsthefirst
-    @thisIsTheSecond
-    @thisIsTheThird
-    @thisIstheFourthWillBeTooLongForSure(and: "it has arguments as well")
+  @thisIsthefirst
+  @thisIsTheSecond
+  @thisIsTheThird
+  @thisIstheFourthWillBeTooLongForSure(and: "it has arguments as well")
 }
 
 query QueryWVars($x: String) @directive {

tests/graphql_newline/__snapshots__/jsfmt.spec.js.snap

@@ -56,23 +56,23 @@ query MyQuery @directive(
 
 =====================================output=====================================
 query MyQuery
-  @directive(
-    arg: 5
+@directive(
+  arg: 5
+
+  # comment
+  arg2: 10
+) {
+  field
+  @skip(
+    if: true
 
     # comment
-    arg2: 10
-  ) {
-  field
-    @skip(
-      if: true
-
-      # comment
-      cursor: 10
-    )
-    @nope
+    cursor: 10
+  )
+  @nope
   otherField
   ...fragmentSpread
-    @include(if: ["this isn't even a boolean", "wow, that's really odd"])
+  @include(if: ["this isn't even a boolean", "wow, that's really odd"])
 }
 
 ================================================================================

tests/graphql_trailing_comma/__snapshots__/jsfmt.spec.js.snap

@@ -35,16 +35,16 @@ query Query(
   $PROJECT_UNIT_PROFILE_PICTURE_SIZE: Int
   $PROJECT_UNIT_CARD_SIZE: Int
 )
-  @argumentDefinitions(
-    count: {
-      type: "Int"
-      defaultValue: 20
-      someSuperSuperSuperSuperLongType: 301
-    }
-    test: [
-      { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 }
-    ]
-  ) {
+@argumentDefinitions(
+  count: {
+    type: "Int"
+    defaultValue: 20
+    someSuperSuperSuperSuperLongType: 301
+  }
+  test: [
+    { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 }
+  ]
+) {
   cover_photo {
     image(
       width: $PROJECT_UNIT_CARD_SIZE
@@ -95,16 +95,16 @@ query Query(
   $PROJECT_UNIT_PROFILE_PICTURE_SIZE: Int
   $PROJECT_UNIT_CARD_SIZE: Int
 )
-  @argumentDefinitions(
-    count: {
-      type: "Int"
-      defaultValue: 20
-      someSuperSuperSuperSuperLongType: 301
-    }
-    test: [
-      { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 }
-    ]
-  ) {
+@argumentDefinitions(
+  count: {
+    type: "Int"
+    defaultValue: 20
+    someSuperSuperSuperSuperLongType: 301
+  }
+  test: [
+    { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 }
+  ]
+) {
   cover_photo {
     image(
       width: $PROJECT_UNIT_CARD_SIZE
@@ -154,16 +154,16 @@ query Query(
   $PROJECT_UNIT_PROFILE_PICTURE_SIZE: Int
   $PROJECT_UNIT_CARD_SIZE: Int
 )
-  @argumentDefinitions(
-    count: {
-      type: "Int"
-      defaultValue: 20
-      someSuperSuperSuperSuperLongType: 301
-    }
-    test: [
-      { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 }
-    ]
-  ) {
+@argumentDefinitions(
+  count: {
+    type: "Int"
+    defaultValue: 20
+    someSuperSuperSuperSuperLongType: 301
+  }
+  test: [
+    { type: "Int", defaultValue: 20, someSuperSuperSuperSuperLongType: 301 }
+  ]
+) {
   cover_photo {
     image(
       width: $PROJECT_UNIT_CARD_SIZE