kitzy
5fa8a0a9ea
**Related issue:** Resolves #50360 Adds Microsoft .NET Desktop Runtime 10 as a Windows Fleet-maintained app, from winget `Microsoft.DotNet.DesktopRuntime.10` (10.0.10, WiX burn bundle, x64). This closes the gap opened by HandBrake (#50323 / #50352). HandBrake requires the .NET **Desktop** Runtime and its install script now hard-fails without it, but Fleet had no FMA that could satisfy that — we ship `microsoft-dotnet-runtime-8`/`-10`, which are the *base* runtime, a different package with its own Add/Remove Programs entry. The customer's ManageEngine catalog also deploys the Desktop Runtime directly. ## Verification The winget manifest supplies `AppsAndFeaturesEntries`, and I confirmed each value against the real installer by extracting the burn bundle's registration data: ``` Microsoft Windows Desktop Runtime 10.0.10 (x64) Publisher="Microsoft Corporation" Version="10.0.10.50000" ``` - Installer SHA confirmed against a local download (`e82fc901…84d1`). - The `DisplayName` carries both version and architecture, so the exists query uses the same `LIKE 'Microsoft Windows Desktop Runtime 10.%' AND name LIKE '%(x64)'` shape as the existing base-runtime FMAs. - The bundle exposes several ProductCodes (the bundle plus its MSI components), which is exactly the shape the existing uninstall script already documents and handles. **`use_display_version_for_patch` is required here.** The registry `DisplayVersion` is `10.0.10.50000` but the winget package version is `10.0.10`. Without the flag the patch policy would compare against the marketing version and mis-order against what osquery reports. The generated patched query correctly compares against `10.0.10.50000`. ## Reuse rather than duplication - **Scripts:** this reuses `microsoft_dotnet_runtime_install.ps1` / `_uninstall.ps1` unchanged. The Desktop Runtime is the same burn bundle shape, and the uninstaller already resolves the bundle from the injected `$PACKAGE_ID` with a Package Cache fallback. Those scripts are already shared by the two base-runtime FMAs, so this follows the existing pattern rather than adding a near-identical copy. - **Icon:** reuses the existing `MicrosoftDotnetRuntime` component and its `.NET` artwork. The burn bundle only carries a 32×32 icon, so extracting one would have meant shipping a blurry upscale of the same logo. The new map key is `"microsoft .net desktop runtime"` (no version). Icon lookup is a loose *prefix* match — `s === key || s.startsWith(key + " ")` — so one key covers 10 and any future major, mirroring how `"microsoft .net runtime"` already serves both base-runtime FMAs. It is longer than that key, and lookup sorts longest-first, so the desktop runtime cannot be mis-matched to the base runtime icon. # Checklist for submitter - [x] QA'd all new/changed functionality manually <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Microsoft .NET Desktop Runtime 10 to the Windows software catalog. * Added support for installing and uninstalling the x64 desktop runtime, including version detection and reboot handling. * Added a dedicated Microsoft .NET Runtime icon for the software listing. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fleet frontend
The Fleet frontend is a Single Page Application using React with Typescript and Hooks.
Table of contents
Running the Fleet web app
For details instruction on building and serving the Fleet web application consult the Contributing documentation.
Testing
Visit the overview of Fleet UI testing for more information on our testing strategy, philosophies, and tools.
To run unit or integration tests in ComponentName.tests.tsx, run yarn test -- ComponentName.tests.tsx. To test all Javascript components run yarn test.
QA Wolf manages our E2E test and will maintain the tests as well as raise any issues found from these tests. Engineers should not have to worry about working with E2E testing code or raising issues themselves.
For more information on how our front-end tests work, visit our frontend test directory.
Directory structure
Component directories in the Fleet front-end application encapsulate the entire component, including files for the component and its styles. The typical directory structure for a component is as follows:
└── ComponentName
├── _styles.scss
├── ComponentName.tsx
|-- ComponentName.tests.tsx
├── index.ts
_styles.scss: The component css stylesComponentName.tsx: The React componentComponentName.tests.tsx: The React component unit/integration testsindex.ts: Exports the React component- This file is helpful as it allows other components to import the component
by it's directory name. Without this file the component name would have to
be duplicated during imports (
components/ComponentNamevs.components/ComponentName/ComponentName).
- This file is helpful as it allows other components to import the component
by it's directory name. Without this file the component name would have to
be duplicated during imports (
components
The component directory contains global React components rendered by pages, receiving props from their parent components to render data and handle user interactions.
context
The context directory contains the React Context API pattern for various entities.
Only entities that are needed across the app has a global context. For example,
the logged in user (currentUser) has multiple pages and components
where its information is pulled.
interfaces
Files in the interfaces directory are used to specify the Typescript interface for a reusable Fleet entity. This is designed to DRY up the code and increase re-usability. These interfaces are imported in to component files and implemented when defining the component's props.
Additionally, local interfaces are used for props of local components.
layouts
The Fleet application has only 1 layout, the Core Layout. The Layout is rendered from the router and are used to set up the general app UI (header, sidebar) and render child components. The child components rendered by the layout are typically page components.
pages
Page components are React components typically rendered from the router.
React Router passed props to these pages in case they are needed. Examples include
the router, location, and params objects.
router
The router directory is where the react router lives. The router decides which
component will render at a given URL. Components rendered from the router are
typically located in the pages directory. The router directory also holds a paths
file which holds the application paths as string constants for reference
throughout the app. These paths are typically referenced from the App
Constants object.
services
CRUD functions for all Fleet entities (e.g. report) that link directly to the Fleet API.
styles
The styles directory contains the general app style setup and variables. It includes variables for the app color hex codes, fonts (families, weights and sizes), and padding.
templates
The templates directory contains the HTML file that renders the React application via including the bundle.js
and bundle.css files. The HTML page also includes the HTML element in which the React application is mounted.
test
The test directory includes test helpers, API request mocks, and stubbed data entities for use in test files. See the UI testing documentation for more on test helpers, stubs, and request mocks.
utilities
The utilities directory contains re-usable functions and constants for use throughout the application. The functions include helpers to convert an array of objects to CSV, debounce functions to prevent multiple form submissions, format API errors, etc.
Patterns
The list of patterns used in the Fleet UI codebase can be found in patterns.md.
Storybook
Storybook is a tool to document and visualize components, and we
use it to capture our global components used across Fleet. Storybook is key when developing new
features and testing components before release. It runs a separate server exposed on port 6006.
To run this server, do the following:
- Go to your root fleet project directory
- Run
make deps - Run
yarn storybook
The URL localhost:6006 should automatically show in your browser. If not, visit it manually.
Running Storybook before implementing new UI elements can clarify if new components need to be created or already exist. When creating a component, you can create a new file, component.stories.tsx, within its directory. Then, fill it with the appropriate Storybook code to create a new Storybook entry. You will be able to visualize the component within Storybook to determine if it looks and behaves as expected.