style(comments): Prefer separate-line style comments (#53818)

static/app/components/dropdownMenu/item.tsx

@@ -37,7 +37,7 @@ export interface MenuItemProps extends MenuListItemProps {
    * from the selection manager.
    */
   hidden?: boolean;
-  /*
+  /**
    * Whether this menu item is a trigger for a nested sub-menu. Only works
    * when `children` is also defined.
    */

static/app/components/dropdownMenu/list.tsx

@@ -54,7 +54,7 @@ export interface DropdownMenuListProps
    * Whether the menu should close when an item has been clicked/selected
    */
   closeOnSelect?: boolean;
-  /*
+  /**
    * Title to display on top of the menu
    */
   menuTitle?: React.ReactChild;

static/app/components/events/interfaces/exception.tsx

@@ -27,9 +27,9 @@ export function Exception({
 }: Props) {
   const eventHasThreads = !!event.entries.some(entry => entry.type === EntryType.THREADS);
 
-  /* in case there are threads in the event data, we don't render the
-   exception block.  Instead the exception is contained within the
-   thread interface. */
+  // in case there are threads in the event data, we don't render the
+  // exception block.  Instead the exception is contained within the
+  // thread interface.
   if (eventHasThreads) {
     return null;
   }

static/app/components/events/interfaces/exceptionV2.tsx

@@ -27,9 +27,9 @@ export function ExceptionV2({
 }: Props) {
   const eventHasThreads = !!event.entries.some(entry => entry.type === EntryType.THREADS);
 
-  /* in case there are threads in the event data, we don't render the
-   exception block.  Instead the exception is contained within the
-   thread interface. */
+  // in case there are threads in the event data, we don't render the
+  // exception block.  Instead the exception is contained within the
+  // thread interface.
   if (eventHasThreads) {
     return null;
   }

static/app/components/events/interfaces/frame/line/index.tsx

@@ -65,8 +65,8 @@ function Line({
   isHoverPreviewed = false,
   ...props
 }: Props) {
-  /* Prioritize the frame platform but fall back to the platform
-   of the stack trace / exception */
+  // Prioritize the frame platform but fall back to the platform
+  // of the stack trace / exception
   const platform = getPlatform(frame.platform, props.platform ?? 'other') as PlatformType;
   const leadsToApp = !frame.inApp && ((nextFrame && nextFrame.inApp) || !nextFrame);
 

static/app/components/events/interfaces/performance/spanEvidenceKeyValueList.tsx

@@ -488,15 +488,16 @@ function getSpanFieldBytes(span: Span, field: string) {
 
 type ParameterLookup = Record<string, string[]>;
 
-/** Extracts changing URL query parameters from a list of `http.client` spans.
+/**
+ * Extracts changing URL query parameters from a list of `http.client` spans.
  * e.g.,
  *
  * https://service.io/r?id=1&filter=none
  * https://service.io/r?id=2&filter=none
  * https://service.io/r?id=3&filter=none
-
-  * @returns A condensed string describing the query parameters changing
-  * between the URLs of the given span. e.g., "id:{1,2,3}"
+ *
+ * @returns A condensed string describing the query parameters changing
+ * between the URLs of the given span. e.g., "id:{1,2,3}"
  */
 function formatChangingQueryParameters(spans: Span[], baseURL?: string): string[] {
   const URLs = spans
@@ -519,10 +520,12 @@ function formatChangingQueryParameters(spans: Span[], baseURL?: string): string[
   return pairs;
 }
 
-/** Parses the span data and pulls out the URL. Accounts for different SDKs and
-     different versions of SDKs formatting and parsing the URL contents
-     differently. Mirror of `get_url_from_span`. Ideally, this should not exist,
-     and instead it should use the data provided by the backend */
+/**
+ * Parses the span data and pulls out the URL. Accounts for different SDKs and
+ * different versions of SDKs formatting and parsing the URL contents
+ * differently. Mirror of `get_url_from_span`. Ideally, this should not exist,
+ * and instead it should use the data provided by the backend
+ */
 export const extractSpanURLString = (span: Span, baseURL?: string): URL | null => {
   let URLString;
 

static/app/components/events/interfaces/spans/spanBar.tsx

@@ -621,35 +621,31 @@ export class SpanBar extends Component<SpanBarProps, SpanBarState> {
 
     this.disconnectObservers();
 
-    /**
-
-    We track intersections events between the span bar's DOM element
-    and the viewport's (root) intersection area. the intersection area is sized to
-    exclude the minimap. See below.
-
-    By default, the intersection observer's root intersection is the viewport.
-    We adjust the margins of this root intersection area to exclude the minimap's
-    height. The minimap's height is always fixed.
-
-      VIEWPORT (ancestor element used for the intersection events)
-    +--+-------------------------+--+
-    |  |                         |  |
-    |  |       MINIMAP           |  |
-    |  |                         |  |
-    |  +-------------------------+  |  ^
-    |  |                         |  |  |
-    |  |       SPANS             |  |  | ROOT
-    |  |                         |  |  | INTERSECTION
-    |  |                         |  |  | OBSERVER
-    |  |                         |  |  | HEIGHT
-    |  |                         |  |  |
-    |  |                         |  |  |
-    |  |                         |  |  |
-    |  +-------------------------+  |  |
-    |                               |  |
-    +-------------------------------+  v
-
-     */
+    // We track intersections events between the span bar's DOM element
+    // and the viewport's (root) intersection area. the intersection area is sized to
+    // exclude the minimap. See below.
+    //
+    // By default, the intersection observer's root intersection is the viewport.
+    // We adjust the margins of this root intersection area to exclude the minimap's
+    // height. The minimap's height is always fixed.
+    //
+    // VIEWPORT (ancestor element used for the intersection events)
+    // +--+-------------------------+--+
+    // |  |                         |  |
+    // |  |       MINIMAP           |  |
+    // |  |                         |  |
+    // |  +-------------------------+  |  ^
+    // |  |                         |  |  |
+    // |  |       SPANS             |  |  | ROOT
+    // |  |                         |  |  | INTERSECTION
+    // |  |                         |  |  | OBSERVER
+    // |  |                         |  |  | HEIGHT
+    // |  |                         |  |  |
+    // |  |                         |  |  |
+    // |  |                         |  |  |
+    // |  +-------------------------+  |  |
+    // |                               |  |
+    // +-------------------------------+  v
 
     this.intersectionObserver = new IntersectionObserver(
       entries =>

static/app/components/forms/fields/selectAsyncField.tsx

@@ -41,10 +41,8 @@ function SelectAsyncField({onChangeOption, ...props}: SelectAsyncFieldProps) {
         const {defaultOptions} = props;
         // We don't use defaultOptions if it is undefined or a boolean
         const options = typeof defaultOptions === 'object' ? defaultOptions : [];
-        /**
-         * The propsValue is the `id` of the object (user, team, etc), and
-         * react-select expects a full value object: {value: "id", label: "name"}
-         **/
+        // The propsValue is the `id` of the object (user, team, etc), and
+        // react-select expects a full value object: {value: "id", label: "name"}
         const resolvedValue =
           // When rendering the selected value, first look at the API results...
           results.find(({value: v}) => v === value) ??

static/app/components/gridEditable/index.tsx

@@ -323,8 +323,8 @@ class GridEditable<
             </GridHeadCellStatic>
           ))}
         {
-          /* Note that this.onResizeMouseDown assumes GridResizer is nested
-            1 levels under GridHeadCell */
+          // Note that this.onResizeMouseDown assumes GridResizer is nested
+          // 1 levels under GridHeadCell
           columnOrder.map((column, i) => (
             <GridHeadCell
               data-test-id="grid-head-cell"

static/app/components/menuListItem.tsx

@@ -41,14 +41,14 @@ export type MenuListItemProps = {
    * there are appropriate aria-labels.
    */
   label?: React.ReactNode;
-  /*
+  /**
    * Items to be added to the left of the label
    */
   leadingItems?: EdgeItems;
-  /*
-   * Whether leading items should be centered with respect to the entire
-   * height of the item. If false (default), they will be centered with
-   * respect to the first line of the label element.
+  /**
+   * Whether leading items should be centered with respect to the entire height
+   * of the item. If false (default), they will be centered with respect to the
+   * first line of the label element.
    */
   leadingItemsSpanFullHeight?: boolean;
   /**
@@ -69,14 +69,14 @@ export type MenuListItemProps = {
    * Additional props to be passed into <Tooltip />.
    */
   tooltipOptions?: Omit<TooltipProps, 'children' | 'title' | 'className'>;
-  /*
+  /**
    * Items to be added to the right of the label.
    */
   trailingItems?: EdgeItems;
-  /*
+  /**
    * Whether trailing items should be centered wrt/ the entire height of the
-   * item. If false (default), they will be centered wrt/ the first line of
-   * the label element.
+   * item. If false (default), they will be centered wrt/ the first line of the
+   * label element.
    */
   trailingItemsSpanFullHeight?: boolean;
 };