ref: fix typos of its (#71844)

<!-- Describe your PR here. -->

static/app/components/carousel.spec.tsx

@@ -66,7 +66,7 @@ describe('Carousel', function () {
     const rightButton = screen.getByRole('button', {name: 'Scroll right'});
     expect(screen.queryByRole('button', {name: 'Scroll left'})).not.toBeInTheDocument();
 
-    // Test scroll into view, the 2nd element should have it's 'scrollIntoView' called
+    // Test scroll into view, the 2nd element should have its 'scrollIntoView' called
     elements[1].scrollIntoView = jest.fn();
     await userEvent.click(rightButton);
     expect(elements[1].scrollIntoView).toHaveBeenCalled();
@@ -99,7 +99,7 @@ describe('Carousel', function () {
     const leftButton = screen.getByRole('button', {name: 'Scroll left'});
     expect(screen.queryByRole('button', {name: 'Scroll right'})).not.toBeInTheDocument();
 
-    // Test scroll into view, the 1st element should have it's 'scrollIntoView' called
+    // Test scroll into view, the 1st element should have its 'scrollIntoView' called
     elements[0].scrollIntoView = jest.fn();
     await userEvent.click(leftButton);
     expect(elements[0].scrollIntoView).toHaveBeenCalled();
@@ -132,7 +132,7 @@ describe('Carousel', function () {
     const rightButton = screen.getByRole('button', {name: 'Scroll right'});
     expect(screen.queryByRole('button', {name: 'Scroll left'})).not.toBeInTheDocument();
 
-    // Test scroll into view, the 2nd element should have it's 'scrollIntoView' called
+    // Test scroll into view, the 2nd element should have its 'scrollIntoView' called
     elements[2].scrollIntoView = jest.fn();
     await userEvent.click(rightButton);
     expect(elements[2].scrollIntoView).toHaveBeenCalled();

static/app/components/deprecatedAsyncComponent.tsx

@@ -118,7 +118,7 @@ class DeprecatedAsyncComponent<
       return;
     }
 
-    // Take a measurement from when this component is initially created until it finishes it's first
+    // Take a measurement from when this component is initially created until it finishes its first
     // set of API requests
     if (
       !this._measurement.hasMeasured &&

static/app/components/dropdownMenu/index.spec.tsx

@@ -147,7 +147,7 @@ describe('DropdownMenu', function () {
 
     await userEvent.click(screen.getByRole('button', {name: 'Menu'}));
 
-    // Sub item won't be visible until we hover over it's parent
+    // Sub item won't be visible until we hover over its parent
     expect(
       screen.queryByRole('menuitemradio', {name: 'Sub Item'})
     ).not.toBeInTheDocument();

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

@@ -125,7 +125,7 @@ export class NewTraceDetailsSpanBar extends Component<
     this.updateHighlightedState();
     this.connectObservers();
 
-    // If span is anchored scroll to span bar and open it's detail panel
+    // If span is anchored scroll to span bar and open its detail panel
     if (this.isHighlighted && this.props.onRowClick) {
       this.props.onRowClick(undefined);
 
@@ -577,7 +577,7 @@ export class NewTraceDetailsSpanBar extends Component<
     const observer = new IntersectionObserver(([entry]) =>
       this.setState({isIntersecting: entry.isIntersecting}, () => {
         // Scrolls the next(invisible) bar from the virtualized list,
-        // by it's height. Allows us to look for anchored span bars occuring
+        // by its height. Allows us to look for anchored span bars occuring
         // at the bottom of the span tree.
         if (
           this.hashSpanId &&

static/app/components/externalIssues/abstractExternalIssueForm.tsx

@@ -168,7 +168,7 @@ export default class AbstractExternalIssueForm<
    * searching in an async select field without selecting one of the returned choices will
    * result in a value saved to the form, and no associated label; appearing empty.
    * @param field The field being examined
-   * @param result The result from it's asynchronous query
+   * @param result The result from its asynchronous query
    * @returns The result with a tooltip attached to the current option
    */
   ensureCurrentOption = (

static/app/components/onboardingWizard/taskConfig.tsx

@@ -358,7 +358,7 @@ export function getOnboardingTasks({
       task: OnboardingTaskKey.SOURCEMAPS,
       title: t('Upload source maps'),
       description: t(
-        "Deminify Javascript source code to debug with context. Seeing code in it's original form will help you debunk the ghosts of errors past."
+        'Deminify Javascript source code to debug with context. Seeing code in its original form will help you debunk the ghosts of errors past.'
       ),
       skippable: true,
       requisites: [OnboardingTaskKey.FIRST_PROJECT, OnboardingTaskKey.FIRST_EVENT],

static/app/components/organizations/hybridFilter.tsx

@@ -71,7 +71,7 @@ export interface HybridFilterProps<Value extends SelectKey>
 /**
  * A special filter component with "hybrid" (both single and multiple) selection, made
  * specifically for page filters. Clicking on an option will select only that option
- * (single selection). Command/ctrl-clicking on an option or clicking on it's checkbox
+ * (single selection). Command/ctrl-clicking on an option or clicking on its checkbox
  * will add the option to the selection state (multiple selection).
  *
  * Note: this component is controlled only — changes must be handled via the `onChange`

static/app/components/profiling/flamegraph/flamegraph.tsx

@@ -1216,7 +1216,7 @@ function Flamegraph(): ReactElement {
     [selectedRoot, flamegraph.root]
   );
 
-  // In case a user selected root is present, we will display that root + it's entire sub tree.
+  // In case a user selected root is present, we will display that root + its entire sub tree.
   // If no root is selected, we will display the entire sub tree down from the root. We start at
   // root.children because flamegraph.root is a virtual node that we do not want to show in the table.
   const rootNodes = useMemo(() => {

static/app/components/profiling/flamegraph/flamegraphZoomView.tsx

@@ -399,7 +399,7 @@ function FlamegraphZoomView({
         if (action === 'undo') {
           const previousPosition = previousState?.position?.view;
 
-          // If previous position is empty, reset the view to it's max
+          // If previous position is empty, reset the view to its max
           if (previousPosition?.isEmpty()) {
             canvasPoolManager.dispatch('reset zoom', []);
           } else if (

static/app/components/sentryDocumentTitle.tsx

@@ -67,7 +67,7 @@ function SentryDocumentTitle({
   }, [noSuffix, pageTitle]);
 
   // NOTE: We do this OUTSIDE of a use effect so that the update order is
-  // correct, otherwsie the inner most SentryDocumentTitle will have it's
+  // correct, otherwsie the inner most SentryDocumentTitle will have its
   // useEffect called first followed by the parents, which will cause the wrong
   // title be set.
   if (document.title !== documentTitle) {