Hide 'Cancel Run' Button on Runs that do not belong to the Current User (#1183)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Users will no longer see the "cancel run" button for runs that are not theirs.

NOTE: uses a test API. Api should be finalized before shipping this PR.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

Closes Shopify/oasis-frontend#274

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

![image.png](https://app.graphite.dev/user-attachments/assets/a0ee71a7-e665-4fbe-86db-4fa291a4da9b.png)

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/PipelineRun/RunDetails.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 import { Spinner } from "@/components/ui/spinner";
 import { useCheckComponentSpecFromPath } from "@/hooks/useCheckComponentSpecFromPath";
+import { useUserDetails } from "@/hooks/useUserDetails";
 import { useBackend } from "@/providers/BackendProvider";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
 import { useExecutionData } from "@/providers/ExecutionDataProvider";
@@ -33,6 +34,7 @@ export const RunDetails = () => {
     isLoading,
     error,
   } = useExecutionData();
+  const { data: currentUserDetails } = useUserDetails();
 
   const editorRoute = componentSpec.name
     ? `/editor/${encodeURIComponent(componentSpec.name)}`
@@ -45,6 +47,9 @@ export const RunDetails = () => {
 
   const [metadata, setMetadata] = useState<PipelineRun | null>(null);
 
+  const isRunCreator =
+    currentUserDetails.name && metadata?.created_by === currentUserDetails.name;
+
   useEffect(() => {
     const fetchData = async () => {
       if (!runId) {
@@ -149,7 +154,9 @@ export const RunDetails = () => {
             <InspectPipelineButton pipelineName={componentSpec.name} />
           )}
           <ClonePipelineButton componentSpec={componentSpec} />
-          {isInProgress && <CancelPipelineRunButton runId={runId} />}
+          {isInProgress && isRunCreator && (
+            <CancelPipelineRunButton runId={runId} />
+          )}
           {isComplete && <RerunPipelineButton componentSpec={componentSpec} />}
         </div>
       </div>

src/components/shared/ManageComponent/PublishComponent.tsx

@@ -5,13 +5,13 @@ import { BlockStack } from "@/components/ui/layout";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Heading, Paragraph } from "@/components/ui/typography";
+import { useUserDetails } from "@/hooks/useUserDetails";
 import type { HydratedComponentReference } from "@/utils/componentSpec";
 
 import { withSuspenseWrapper } from "../SuspenseWrapper";
 import { ComponentHistoryTimeline } from "./ComponentHistoryTimeline";
 import { ComponentSpecProperty } from "./ComponentSpecProperty";
 import { usePublishedComponentHistory } from "./hooks/usePublishedComponentHistory";
-import { useUserDetails } from "./hooks/useUserDetails";
 
 interface ComponentPublishProps {
   component: HydratedComponentReference;