Add method scope

Author: kshmidt-digma

.github/copilot-instructions.md

@@ -0,0 +1,109 @@
+# Copilot Instructions
+
+Digma UI is a React-based frontend for the Digma continuous feedback platform, designed to help developers analyze and improve code quality and runtime behavior. The project is a monorepo for multiple React applications and provides the distributions for different platforms: Web and IDEs (JetBrains, Visual Studio and VS Code)
+
+Tech stack: TypeScript, React, React Router, Tanstack Table, React Hook Form, Recharts, styled-components, RTK Query, zustand (deprecated), axios, Storybook, Jest, Webpack, ESLint.
+
+## Project Structure
+
+- **.github/**  
+  GitHub-specific files such as workflows
+
+- **scripts/**  
+  Utility scripts for development, build, and CI/CD automation.
+
+- **.husky/**  
+  Git hooks managed by Husky for enforcing code quality and workflow automation.
+
+- **.storybook/**  
+  Storybook configuration files for UI component development and documentation.
+
+- **.vscode/**  
+  Visual Studio Code workspace settings and recommended extensions.
+
+- **src/**  
+   Main source code for the Digma UI applications, including all React components, features, hooks, utilities, and configuration.
+
+- **src/components/**  
+  Shared, reusable React components used across features and apps.
+
+- **src/api/**  
+  Contains custom message API-related code, including service definitions, types, and API clients for communicating with backend services.
+
+- **src/containers/**  
+  Entry points for React applications.
+
+- **src/history/**  
+  Custom container for application history state management.
+
+- **src/hooks/**  
+  Custom React hooks for shared logic across the applications.
+
+- **src/logging/**  
+  Logger for application events and errors.
+
+- **src/redux/**  
+  Redux store configuration, slices, and RTK Query services.
+
+- **src/store/**  
+  Zustand stores and state management logic (deprecated).
+
+- **src/stories/**  
+  Storybook stories for UI components.
+
+- **src/typeGuards/**  
+  TypeScript type guard functions for runtime type checking.
+
+- **src/utils/**  
+  General utility functions and helpers used throughout the project.
+
+- **public/**  
+  Static assets served by the app (e.g., images, fonts).
+
+- **apps.ts**  
+  Entry points and configuration for each distributive.
+
+## Code Style
+
+### JavaScript/TypeScript
+
+- Use Boolean() constructor instead of !! operator for boolean casting.
+- Follow the ESLint rules from `eslint.config.mjs`.
+
+### TypeScript
+
+- Use `import type` for all type-only imports.
+- Define all type definitions and props in a `types.ts` file.
+
+### React
+
+- Each React component should reside in its own folder under the relevant feature/component directory.
+- The main component file must be named `[Component]/index.tsx`.
+- Do not import React at the top of files for JSX usage (React 18+).
+- Do not import the React namespace unless it is actually needed (e.g., for types or APIs not available via direct import).
+- Use implicit return for functional components when possible.
+- Destructure component props in the function signature.
+
+### Styles
+
+- Import styles as: `import * as s from "./styles"`.
+- Use a `styles.ts` file for styled-components definitions.
+- The top-level styled component should be named `Container`.
+- Do not use inline styles; use props with semantic names instead.
+- Do not use the `font-family` CSS rule for `SF Pro Text` (treat as the default OS font). Only specify `font-family` if a non-default font is required.
+- Use semantic color tokens from the theme (e.g., `theme.colors.v3.surface.primary`) instead of hardcoded color values or direct palette imports.
+- Use typography mixins from `typographies.ts` wherever Figma specifies a typography variable. Do not hardcode font-size, font-weight, or line-height if a corresponding typography token exists.
+- Avoid hardcoded colors, font sizes, and font weights if a semantic or design token exists.
+- All styled-components should use theme values via the `theme` prop for colors and typography, ensuring support for both dark and light themes.
+- Do not use inline types for styled-components. Always create and import interfaces for props used in styled-components from the component's `types.ts` file.
+- Do not use className prop without the need
+- Follow Stylelint rules for all CSS/styled-components code from `stylelint.config.js`.
+
+### Images
+
+- Use standard `<img>` tags for images, styled via styled-components if needed.
+
+### Storybook & Tests
+
+- Create a Storybook file named `[Component].stories.tsx` for stories.
+- Create a test file named `[Component].test.tsx` for tests.

.github/prompts/create-app.prompt.md

@@ -0,0 +1,8 @@
+---
+mode: "agent"
+tools: []
+---
+
+Add the infrastructure for a new app called "<app-name>" for the "<platform>" platform.
+Take an existing app for the same platform as an example, but do not add any business logic yet—just the necessary boilerplate and wiring.
+Update all relevant files (such as apps.ts, containers, and routing) to register the new app and ensure it builds and runs like the other apps for this platform.

README.md

@@ -1,5 +1,7 @@
 # Digma UI
 
+Digma UI is a React-based frontend for the Digma continuous feedback platform. The project is a monorepo for multiple React applications and provides the distributions for different platforms: Web and IDEs (JetBrains, Visual Studio and VS Code)
+
 Install dependencies:
 
 ```shell
@@ -57,7 +59,7 @@ To set environment variables use .env file
 
 ## Jaeger UI
 
-The Digma UI distributive includes a [Digma fork of Jaeger UI](https://github.com/digma-ai/jaeger-ui). You can find the linked version in the [./dependencies.json](./dependencies.json) file.
+The Digma UI distribution includes a [Digma fork of Jaeger UI](https://github.com/digma-ai/jaeger-ui). You can find the linked version in the [./dependencies.json](./dependencies.json) file.
 
 To use a custom build of Jaeger UI during development set `JAEGER_UI_PATH` environment variable.
 

scripts/get-jaeger-ui.mts

@@ -91,13 +91,13 @@ if (process.env.JAEGER_UI_PATH) {
   if (!fs.existsSync(customJaegerUIPath)) {
     // eslint-disable-next-line no-console
     console.error(
-      `Jaeger UI distributive has not been found at ${customJaegerUIPath}`
+      `Jaeger UI distribution has not been found at ${customJaegerUIPath}`
     );
     process.exit(1);
   }
 
   // eslint-disable-next-line no-console
-  console.log(`Using Jaeger UI distributive from ${customJaegerUIPath}`);
+  console.log(`Using Jaeger UI distribution from ${customJaegerUIPath}`);
 
   fs.copySync(customJaegerUIPath, extractPath);
 

src/api/index.ts

@@ -65,8 +65,6 @@ export const initializeDigmaMessageListener = (
       break;
   }
 
-  window.addEventListener("message", handleDigmaMessage);
-
   return () => {
     switch (platform) {
       case "Visual Studio":

src/components/Admin/index.tsx

@@ -32,7 +32,7 @@ export const Admin = () => {
     FeatureFlag.IsUserIdEnabled
   );
 
-  // Clear issues report state when user changes
+  // Clear state when user changes
   useEffect(() => {
     if (isUserIdEnabled && userProfile) {
       if (currentUser?.uid !== userProfile?.uid) {

src/components/Main/index.tsx

@@ -41,7 +41,7 @@ const getURLToNavigateOnCodeLensClick = (scope: Scope): string | undefined => {
   }
 
   const codeLens = scope.context.payload.codeLens;
-  if (!codeLens.scopeCodeObjectId.startsWith("span:")) {
+  if (!codeLens.scopeCodeObjectId?.startsWith("span:")) {
     return;
   }
 

src/components/common/App/index.tsx

@@ -332,7 +332,9 @@ export const App = ({ theme, children, id }: AppProps) => {
           };
           scope = newScope;
 
-          setGlobalErrorsSearch(newScope.context.payload.codeLens.codeMethod);
+          if (newScope.method?.methodId) {
+            setGlobalErrorsSearch(newScope.method?.methodId);
+          }
         }
 
         setScope(scope);

src/components/common/App/types.ts

@@ -57,8 +57,14 @@ export interface ScopeSpan {
   role: ScopeSpanRole | null;
 }
 
+export interface MethodScope {
+  methodId: string;
+  displayName: string | null;
+}
+
 export interface Scope {
   span: ScopeSpan | null;
+  method?: MethodScope;
   code: {
     relatedCodeDetailsList: CodeDetails[];
     codeDetailsList: CodeDetails[];
@@ -77,7 +83,7 @@ export interface Scope {
 export interface CodeLens {
   id: string;
   codeMethod: string;
-  scopeCodeObjectId: string;
+  scopeCodeObjectId?: string;
   lensTitle: string;
   importance: number;
 }

src/components/common/IssuesReport/Header/styles.ts

@@ -54,7 +54,7 @@ export const Filters = styled(Row)`
 
 const StyledToggle = styled(Toggle)`
   align-items: center;
-  background-color: transparent;
+  background: transparent;
   border-radius: 8px;
   border-color: ${({ theme }) => theme.colors.v3.stroke.primaryLight};
 `;