Upgrade prettier and re-format files with new prettier (#7902)

- **upgrade prettier**
- **format files with new prettier**

Re-applies the upgrade of prettier in #7741 and then re-formats using
the change introduced by #7891

.prettierrc

@@ -5,5 +5,5 @@
   "semi": true,
   "singleQuote": false,
   "printWidth": 120,
-  "jsxBracketSameLine": true
+  "bracketSameLine": true
 }

app/alert/alert.css

@@ -5,7 +5,9 @@
   left: 50%;
   margin-top: 32px;
 
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.27), 0 3px 5px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.27),
+    0 3px 5px rgba(0, 0, 0, 0.12);
 }
 
 .alert-banner.hidden {

app/auth/auth_service.ts

@@ -98,10 +98,13 @@ export class AuthService {
     const sessionDuration = Number(this.getCookie("Session-Duration-Seconds") || 0);
     const refreshFrequencySeconds = sessionDuration ? sessionDuration / 2 : TOKEN_REFRESH_INTERVAL_SECONDS;
     console.info(`Refreshing access token every ${refreshFrequencySeconds} seconds.`);
-    setInterval(() => {
-      if (this.user) this.refreshToken();
-      // Calling setInterval with a number larger than a 32 bit int causes refresh spamming
-    }, Math.min(refreshFrequencySeconds * 1000, 86400000)); // One day in ms
+    setInterval(
+      () => {
+        if (this.user) this.refreshToken();
+        // Calling setInterval with a number larger than a 32 bit int causes refresh spamming
+      },
+      Math.min(refreshFrequencySeconds * 1000, 86400000)
+    ); // One day in ms
   }
 
   refreshToken() {

app/components/dialog/dialog.css

@@ -13,7 +13,9 @@
   width: 640px;
   background: white;
   border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.27), 0 3px 5px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.27),
+    0 3px 5px rgba(0, 0, 0, 0.12);
 
   padding: 16px 0;
   --dialog-side-padding: 24px;

app/components/popup/popup.css

@@ -16,7 +16,9 @@
 
   border-radius: 4px;
   background: white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.27), 0 3px 5px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.27),
+    0 3px 5px rgba(0, 0, 0, 0.12);
 }
 
 .popup.anchor-right {

app/components/search_bar/search_bar.css

@@ -19,7 +19,9 @@
 .search-bar-container.focused .search-bar {
   background-color: #fff;
   border: 1px solid #e5e7eb;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
 .search-bar-results {

app/invocation/invocation.css

@@ -1140,11 +1140,15 @@
 .invocation-query-graph-card {
   padding: 0;
   background: #fafafa;
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2), 0px 1px 6px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 1px 4px rgba(0, 0, 0, 0.2),
+    0px 1px 6px rgba(0, 0, 0, 0.1);
 }
 
 .invocation-query-graph-card:hover {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2), 0px 1px 10px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 2px 6px rgba(0, 0, 0, 0.2),
+    0px 1px 10px rgba(0, 0, 0, 0.1);
 }
 
 svg.invocation-query-graph {

app/invocation/invocation.tsx

@@ -399,7 +399,7 @@ export default class InvocationComponent extends React.Component<Props, State> {
         model={this.state.model}
         invocationId={this.props.invocationId}
         tab={this.props.tab}
-        files={completed?.buildEvent ? this.state.model.getFiles(completed.buildEvent) ?? [] : []}
+        files={completed?.buildEvent ? (this.state.model.getFiles(completed.buildEvent) ?? []) : []}
         configuredEvent={this.state.model.configuredMap.get(targetLabel)}
         skippedEvent={this.state.model.skippedMap.get(targetLabel)}
         completedEvent={completed}

app/invocation/invocation_action_card.tsx

@@ -900,8 +900,8 @@ export default class InvocationActionCardComponent extends React.Component<Props
                         {this.state.executeResponse
                           ? "Completed"
                           : this.state.lastOperation
-                          ? executionStatusLabel(this.state.lastOperation)
-                          : "Unknown"}
+                            ? executionStatusLabel(this.state.lastOperation)
+                            : "Unknown"}
                       </div>
                     </div>
                     {this.state.executeResponse && (

app/invocation/invocation_action_tree_node.tsx

@@ -77,15 +77,17 @@ export default class TreeNodeComponent extends React.Component<Props, State> {
         </div>
         {expanded && (
           <div className="input-tree-node-children">
-            {this.props.treeShaToChildrenMap.get(digestString)?.map((child: TreeNode) => (
-              <TreeNodeComponent
-                node={child}
-                treeShaToExpanded={this.props.treeShaToExpanded}
-                treeShaToChildrenMap={this.props.treeShaToChildrenMap}
-                treeShaToTotalSizeMap={this.props.treeShaToTotalSizeMap}
-                handleFileClicked={this.props.handleFileClicked}
-              />
-            ))}
+            {this.props.treeShaToChildrenMap
+              .get(digestString)
+              ?.map((child: TreeNode) => (
+                <TreeNodeComponent
+                  node={child}
+                  treeShaToExpanded={this.props.treeShaToExpanded}
+                  treeShaToChildrenMap={this.props.treeShaToChildrenMap}
+                  treeShaToTotalSizeMap={this.props.treeShaToTotalSizeMap}
+                  handleFileClicked={this.props.handleFileClicked}
+                />
+              ))}
           </div>
         )}
       </div>

app/invocation/invocation_cache_card.tsx

@@ -309,9 +309,7 @@ function renderBreakdown(data: any[] | undefined, title: string, subtitle: strin
         <ResponsiveContainer width={80} height={80}>
           <PieChart>
             <Pie data={data} dataKey="value" outerRadius={40} innerRadius={20}>
-              {data?.map((_, index) => (
-                <Cell key={`cell-${index}`} fill={getChartColor(index)} />
-              ))}
+              {data?.map((_, index) => <Cell key={`cell-${index}`} fill={getChartColor(index)} />)}
             </Pie>
           </PieChart>
         </ResponsiveContainer>

app/invocation/invocation_targets_card.tsx

@@ -97,11 +97,13 @@ export default class TargetsCardComponent extends React.Component<Props, State>
                 ))}
             </div>
           </div>
-          {this.props.pageSize && events.length > this.props.pageSize * this.state.numPages && !!this.state.numPages && (
-            <div className="more" onClick={this.handleMoreClicked.bind(this)}>
-              See more {this.props.presentVerb}
-            </div>
-          )}
+          {this.props.pageSize &&
+            events.length > this.props.pageSize * this.state.numPages &&
+            !!this.state.numPages && (
+              <div className="more" onClick={this.handleMoreClicked.bind(this)}>
+                See more {this.props.presentVerb}
+              </div>
+            )}
         </div>
       </div>
     );

app/picker/picker.css

@@ -3,7 +3,9 @@
 }
 
 .picker {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
   background-color: #fff;
   max-width: 450px;
   width: 80vw;

app/root/root.css

@@ -1725,7 +1725,9 @@ code .comment {
   margin-top: 4px;
   border-radius: 8px;
   border-top: 0;
-  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1), 0px 1px 6px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0px 1px 4px rgba(0, 0, 0, 0.1),
+    0px 1px 6px rgba(0, 0, 0, 0.05);
 }
 
 .dense .card .details {

app/service/rpc_service.ts

@@ -563,28 +563,24 @@ type RpcMethodNames<Service extends protobufjs.rpc.Service> = keyof Omit<Service
  * `CancelablePromise` is returned from all unary RPC methods instead of
  * `Promise`.
  */
-type CancelableService<Service extends protobufjs.rpc.Service> = protobufjs.rpc.Service &
-  {
-    // Loop over all methods in the service, except for the ones inherited from the base
-    // service (we don't want to modify those at all).
-    [MethodName in RpcMethodNames<Service>]: Service[MethodName] extends BaseUnaryRpcMethod<
-      infer Request,
-      infer Response
-    >
-      ? /* Unary RPC: transform the generated method's return type from Promise to CancelablePromise. */
-        UnaryRpcMethod<Request, Response>
-      : /* Server-streaming RPC: keep the original method as-is. */
-        Service[MethodName];
-  };
+type CancelableService<Service extends protobufjs.rpc.Service> = protobufjs.rpc.Service & {
+  // Loop over all methods in the service, except for the ones inherited from the base
+  // service (we don't want to modify those at all).
+  [MethodName in RpcMethodNames<Service>]: Service[MethodName] extends BaseUnaryRpcMethod<infer Request, infer Response>
+    ? /* Unary RPC: transform the generated method's return type from Promise to CancelablePromise. */
+      UnaryRpcMethod<Request, Response>
+    : /* Server-streaming RPC: keep the original method as-is. */
+      Service[MethodName];
+};
 
 type FetchPromiseType<T extends FetchResponseType> = T extends ""
   ? string
   : T extends "text"
-  ? string
-  : T extends "arraybuffer"
-  ? ArrayBuffer
-  : T extends "stream"
-  ? Response
-  : never;
+    ? string
+    : T extends "arraybuffer"
+      ? ArrayBuffer
+      : T extends "stream"
+        ? Response
+        : never;
 
 export default new RpcService();

app/target/action_card.tsx

@@ -199,9 +199,7 @@ export default class ActionCardComponent extends React.Component<Props, State> {
               {action?.type} command exited with code {action?.exitCode}
             </div>
             <div>
-              {action?.commandLine.map((commandLineArg) => (
-                <div className="command-line-arg">{commandLineArg}</div>
-              ))}
+              {action?.commandLine.map((commandLineArg) => <div className="command-line-arg">{commandLineArg}</div>)}
             </div>
           </div>
         </div>

app/target/target_test_document_card.tsx

@@ -34,8 +34,9 @@ export default class TargetTestDocumentCardComponent extends React.Component<Pro
   }
 
   fetchTestXML() {
-    let testXMLUrl = this.props.buildEvent?.testResult?.testActionOutput.find((log: any) => log.name == "test.xml")
-      ?.uri;
+    let testXMLUrl = this.props.buildEvent?.testResult?.testActionOutput.find(
+      (log: any) => log.name == "test.xml"
+    )?.uri;
 
     if (!testXMLUrl) {
       this.setState({ testDocument: undefined });

app/target/target_test_log_card.tsx

@@ -89,8 +89,9 @@ export default class TargetTestLogCardComponent extends React.Component<Props, S
   }
 
   fetchTestLog() {
-    let testLogUrl = this.props.buildEvent?.testResult?.testActionOutput.find((log: any) => log.name == "test.log")
-      ?.uri;
+    let testLogUrl = this.props.buildEvent?.testResult?.testActionOutput.find(
+      (log: any) => log.name == "test.log"
+    )?.uri;
 
     if (!testLogUrl) {
       return;

app/terminal/ansi.tsx

@@ -153,7 +153,8 @@ export default function parseAnsi(text: string): AnsiTextSpan[] {
   return linkSpans;
 }
 
-const LINK_REGEX = /(http(s)?:\/\/)(www\.)?([-a-zA-Z0-9@:%._\+~#=]{2,256})(\.[a-z]{2,6}|:[0-9]+)\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
+const LINK_REGEX =
+  /(http(s)?:\/\/)(www\.)?([-a-zA-Z0-9@:%._\+~#=]{2,256})(\.[a-z]{2,6}|:[0-9]+)\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
 
 function parseLinks(span: AnsiTextSpan): AnsiTextSpan[] {
   let matches = [...span.text.matchAll(LINK_REGEX)];

app/trace/trace_viewer_panel.ts

@@ -34,7 +34,11 @@ export default class Panel {
 
   filter = "";
 
-  constructor(readonly model: PanelModel, readonly canvas: HTMLCanvasElement, private fontFamily: string) {
+  constructor(
+    readonly model: PanelModel,
+    readonly canvas: HTMLCanvasElement,
+    private fontFamily: string
+  ) {
     this.ctx = canvas.getContext("2d")!;
     this.container = canvas.parentElement!;
   }

app/util/animation_loop.ts

@@ -6,7 +6,10 @@ import { TimeDelta } from "./time_delta";
 export class AnimationLoop {
   private dt = new TimeDelta();
 
-  constructor(private callback: (dt: number) => void, private enabled_ = false) {
+  constructor(
+    private callback: (dt: number) => void,
+    private enabled_ = false
+  ) {
     if (enabled_) {
       this.start();
     }

app/util/async.ts

@@ -11,7 +11,10 @@ export class CancelablePromise<T = unknown> implements Promise<T> {
   /** The parent promise in the chain. */
   private parent: CancelablePromise | null = null;
 
-  constructor(private promise: PromiseLike<T>, { oncancelled = undefined }: { oncancelled?: () => void } = {}) {
+  constructor(
+    private promise: PromiseLike<T>,
+    { oncancelled = undefined }: { oncancelled?: () => void } = {}
+  ) {
     this.oncancelled = oncancelled;
   }
 

app/util/errors.ts

@@ -11,7 +11,10 @@ export type ErrorCode = Omit<GRPCCodeName, "OK">;
 // (app.streaming_http_enabled), remove this in favor of directly using the
 // errors returned by RPCs.
 export class BuildBuddyError extends Error {
-  constructor(public code: ErrorCode, public description: string) {
+  constructor(
+    public code: ErrorCode,
+    public description: string
+  ) {
     super(description);
   }
 

app/util/git.ts

@@ -28,7 +28,11 @@ export function normalizeRepoURL(url: string): string {
 
 /** RepoURL represents a structured git repo URL. */
 export class RepoURL {
-  constructor(public host: string, public owner: string, public repo: string) {}
+  constructor(
+    public host: string,
+    public owner: string,
+    public repo: string
+  ) {}
 
   static parse(url: string): RepoURL | undefined {
     try {

docs/cli-plugins.md

@@ -324,16 +324,16 @@ if __name__ == "__main__":
 
 The CLI exposes certain environment variables to your plugins.
 
-#### \$BUILD_WORKSPACE_DIRECTORY
+#### $BUILD_WORKSPACE_DIRECTORY
 
 This is the path to the Bazel workspace in which the CLI is run. It is the
 root path, containing the bazel `WORKSPACE`, `WORKSPACE.bazel`, `MODULE`, or `MODULE.bazel` file.
 
-#### \$PLUGIN_TEMPDIR
+#### $PLUGIN_TEMPDIR
 
 This is a temporary directory that can be used by your plugin to store temporary files. These files will be cleaned up after the invocation is complete.
 
-#### \$USER_CONFIG_DIR
+#### $USER_CONFIG_DIR
 
 This is a long-lived directory you can use to store user preferences, like whether or not a user always wants to automatically apply a particular fix.
 
@@ -343,7 +343,7 @@ config dir, if needed, using something like
 you'll need to decide how to handle differences in preferences across
 different versions of your plugin.
 
-#### \$EXEC_ARGS_FILE
+#### $EXEC_ARGS_FILE
 
 This is the path of a file that contains the args that would be passed to an
 executable built by bazel as a result of a `bazel run` command. Specifically,

enterprise/app/code/code.css

@@ -411,7 +411,11 @@
   background-color: #fff;
   padding: 8px 0;
   border-radius: 8px;
-  box-shadow: 0 0 0 1px #0000000f, 0 1px 1px -0.5px #0000000f, 0 3px 3px -1.5px #0000000f, 0 6px 6px -3px #0000000f;
+  box-shadow:
+    0 0 0 1px #0000000f,
+    0 1px 1px -0.5px #0000000f,
+    0 3px 3px -1.5px #0000000f,
+    0 6px 6px -3px #0000000f;
 }
 
 .code-editor .context-menu div {

enterprise/app/code/code_pull_request.ts

@@ -175,8 +175,8 @@ export async function createCommit(state: Required<State>, treeCreated: boolean,
   const message = treeCreated
     ? changes.commit
     : typeof changes.emptyCommit === "string"
-    ? changes.emptyCommit
-    : changes.commit;
+      ? changes.emptyCommit
+      : changes.commit;
 
   // https://developer.github.com/v3/git/commits/#create-a-commit
   const latestCommit = await rpc_service.service.createGithubCommit(