Merge branch 'dev' into fix/a11y-30710

Mnickii · web-flow · commit b2f06e57fe4b · 2025-04-23T16:55:12.000+03:00
diff --git a/.github/policies/resourceManagement.yml b/.github/policies/resourceManagement.yml
@@ -89,7 +89,6 @@ configuration:
           - isOpen
           - not:
               and:
-                - isAssignedToSomeone
                 - isLabeled
       then:
         - addLabel:
@@ -98,7 +97,17 @@ configuration:
       - payloadType: Issues
       - and:
           - isOpen
-          - isAssignedToSomeone
+          - isLabeled
+          - not:
+              and:
+                - isAssignedToSomeone
+      then:
+        - addLabel:
+            label: 'Triaged-Unassigned'
+    - if:
+      - payloadType: Issues
+      - and:
+          - isOpen
           - isLabeled
       then:
         - removeLabel:
diff --git a/src/app/services/actions/autocomplete-action-creators.spec.ts b/src/app/services/actions/autocomplete-action-creators.spec.ts
@@ -47,7 +47,8 @@ const mockState: ApplicationState = {
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   },
   scopes: {
     pending: { isSpecificPermissions: false, isFullPermissions: false },
@@ -123,7 +124,8 @@ store.getState = () => ({
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   }
 })
 
diff --git a/src/app/services/actions/permissions-action-creator.spec.ts b/src/app/services/actions/permissions-action-creator.spec.ts
@@ -68,7 +68,8 @@ const mockState: ApplicationState = {
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   },
   scopes: {
     pending: { isSpecificPermissions: false, isFullPermissions: false },
diff --git a/src/app/services/actions/resource-explorer-action-creators.spec.ts b/src/app/services/actions/resource-explorer-action-creators.spec.ts
@@ -43,7 +43,8 @@ const mockState: ApplicationState = {
   samples: {
     queries: [],
     pending: false,
-    error: null
+    error: null,
+    hasAutoSelectedDefault: false
   },
   permissionGrants: {
     permissions: [],
diff --git a/src/app/services/slices/samples.slice.ts b/src/app/services/slices/samples.slice.ts
@@ -9,12 +9,14 @@ interface SamplesState {
   queries: ISampleQuery[];
   pending: boolean;
   error: object | null | string;
+  hasAutoSelectedDefault: boolean;
 }
 
 const initialState: SamplesState = {
   queries: [],
   pending: false,
-  error: null
+  error: null,
+  hasAutoSelectedDefault: false
 };
 
 export const fetchSamples = createAsyncThunk<ISampleQuery[], void, { rejectValue: ISampleQuery[] }>(
@@ -52,7 +54,11 @@ export const fetchSamples = createAsyncThunk<ISampleQuery[], void, { rejectValue
 const samplesSlice = createSlice({
   name: 'samples',
   initialState,
-  reducers: {},
+  reducers: {
+    setHasAutoSelectedDefault: (state, action) => {
+      state.hasAutoSelectedDefault = action.payload;
+    }
+  },
   extraReducers: (builder) => {
     builder
       .addCase(fetchSamples.pending, (state) => {
@@ -73,4 +79,5 @@ const samplesSlice = createSlice({
   }
 });
 
+export const { setHasAutoSelectedDefault } = samplesSlice.actions;
 export default samplesSlice.reducer;
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -1,6 +1,5 @@
 import {
   FluentProvider,
-  teamsHighContrastTheme,
   Theme,
   webDarkTheme,
   webLightTheme
@@ -256,8 +255,7 @@ class App extends Component<IAppProps, IAppState> {
   public render() {
     const fluentV9Themes: Record<string, Theme> = {
       light: webLightTheme,
-      dark: webDarkTheme,
-      'high-contrast': teamsHighContrastTheme
+      dark: webDarkTheme
     };
     return (
       <FluentProvider theme={fluentV9Themes[this.props.appTheme]}>
diff --git a/src/app/views/layout/LayoutStyles.tsx b/src/app/views/layout/LayoutStyles.tsx
@@ -4,20 +4,20 @@ export const SIDEBAR_SIZE_CSS_VAR = '--sidebar-size';
 
 export const useLayoutResizeStyles = makeResetStyles({
   [SIDEBAR_SIZE_CSS_VAR]: '23%'
-})
+});
 
 export const useLayoutStyles = makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'column',
-    padding: tokens.spacingHorizontalS,
-    height: 'clamp(100vh, auto, 200vh)',
-    overflow: 'hidden'
+    height: '100vh',
+    overflow: 'hidden',
+    padding: tokens.spacingHorizontalS
   },
   content: {
     display: 'flex',
     flex: 1,
-    overflowY: 'hidden',
+    overflow: 'hidden',
     minWidth: 0
   },
   sidebar: {
@@ -43,36 +43,27 @@ export const useLayoutStyles = makeStyles({
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    minWidth: '300px',
-    minHeight: 'calc(100vh - 98px)',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    minWidth: 0,
+    minHeight: 0
   },
   requestResponseArea: {
-    flex: '1 1 auto',
+    flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    height: '60vh',
-    minHeight: '550px',
-    overflow: 'hidden'
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden'
   },
-  responseArea: {
-    flex: '1 1 auto',
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '300px',
-    height: 'auto',
-    maxHeight: '100%',
+  requestArea: {
+    flex: 1,
+    minHeight: '200px',
     overflow: 'auto',
     borderRadius: tokens.borderRadiusMedium,
     padding: tokens.spacingHorizontalS
   },
-  requestArea: {
-    flex: '1 1 40%',
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: '200px',
-    height:'auto',
-    maxHeight: '40%',
+  responseArea: {
+    flex: 1,
     overflow: 'auto',
     borderRadius: tokens.borderRadiusMedium,
     padding: tokens.spacingHorizontalS
diff --git a/src/app/views/main-header/settings/ThemeChooser.tsx b/src/app/views/main-header/settings/ThemeChooser.tsx
@@ -6,7 +6,7 @@ import { PopupsComponent } from '../../../services/context/popups-context';
 import { changeTheme } from '../../../services/slices/theme.slice';
 import { translateMessage } from '../../../utils/translate-messages';
 import { useIconOptionStyles, useRadioGroupStyles } from './ThemeChooser.styles';
-import { BrightnessHigh24Regular, WeatherMoon24Regular, DarkTheme24Regular} from '@fluentui/react-icons';
+import { BrightnessHigh24Regular, WeatherMoon24Regular} from '@fluentui/react-icons';
 
 const availableThemes = [
   {
@@ -18,11 +18,6 @@ const availableThemes = [
     key: 'dark',
     displayName: 'Dark',
     icon: <WeatherMoon24Regular />
-  },
-  {
-    key: 'high-contrast',
-    displayName: 'High Contrast',
-    icon: <DarkTheme24Regular />
   }
 ];
 
diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
@@ -38,14 +38,15 @@ interface IRequestProps {
 
 const useStyles = makeStyles({
   container: {
-    height: '-webkit-fill-available',
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden'
   },
   tabContainer: {
     display: 'flex',
-    flexShrink: 0,
-    overflowX: 'hidden'
+    flexShrink: 0
   },
   tabList: {
     padding: '5px 5px'
@@ -60,7 +61,7 @@ const useStyles = makeStyles({
     marginTop: tokens.spacingHorizontalS,
     backgroundColor: tokens.colorNeutralBackground1,
     minHeight: '0',
-    overflow: 'auto'
+    overflow: 'hidden'
   },
   menuButton: {
     alignSelf: 'center'
diff --git a/src/app/views/sidebar/Sidebar.styles.tsx b/src/app/views/sidebar/Sidebar.styles.tsx
@@ -29,6 +29,15 @@ export const useSidebarStyles = makeStyles({
     maxWidth: '100%'
   },
   activeLeaf: {
-    backgroundColor: tokens.colorNeutralBackground3Hover
+    backgroundColor: tokens.colorNeutralBackground3Hover,
+    '@media (forced-colors: active)': {
+      backgroundColor: 'Highlight',
+      color: 'HighlightText',
+      forcedColorAdjust: 'none',
+      // Adding border for better visibility in high contrast mode
+      outlineWidth: '2px',
+      outlineStyle: 'solid',
+      outlineColor: 'ButtonText'
+    }
   }
 })
diff --git a/src/app/views/sidebar/history/History.styles.ts b/src/app/views/sidebar/history/History.styles.ts
@@ -9,6 +9,9 @@ export const useHistoryStyles = makeStyles({
     alignItems: 'center',
     gap: '2px'
   },
+  button: {
+    border: 'none'
+  },
   badgeContainer: {
     minWidth: '50px',
     display: 'inline-flex'
diff --git a/src/app/views/sidebar/history/History.tsx b/src/app/views/sidebar/history/History.tsx
@@ -34,9 +34,9 @@ import {
 } from '@fluentui/react-components';
 import {
   AddSquare20Regular,
-  ArrowDownloadRegular,
-  DeleteRegular,
-  MoreHorizontalRegular,
+  ArrowDownload20Regular,
+  Delete20Regular,
+  MoreHorizontal20Regular,
   SubtractSquare20Regular
 } from '@fluentui/react-icons';
 import React, { useEffect, useRef, useState } from 'react';
@@ -143,14 +143,15 @@ const GroupIcons = (props: AsideGroupIconsProps)=>{
     <Tooltip withArrow relationship="label" content={`${translateMessage('Export')} ${groupName} queries`}>
       <Button onClick={
         (e) => handleDownloadHistoryGroup(e,groupName, historyItems )}
-      appearance="subtle" icon={<ArrowDownloadRegular/>}></Button>
+      appearance="subtle" icon={<ArrowDownload20Regular/>} className={styles.button}></Button>
     </Tooltip>
     <Dialog open={open} onOpenChange={(_event, data) => setOpen(data.open)}>
       <DialogTrigger disableButtonEnhancement>
         <Tooltip withArrow relationship="label" content={`${translateMessage('Delete')} ${groupName} queries`}>
           <Button
             appearance="subtle"
-            icon={<DeleteRegular/>}
+            icon={<Delete20Regular/>}
+            className={styles.button}
             onClick={(e) => {
               e.stopPropagation();
               setOpen(true);
@@ -198,6 +199,7 @@ interface HistoryProps {
 const HistoryItems = (props: HistoryProps)=>{
   const dispatch = useAppDispatch();
   const sidebarStyles = useSidebarStyles();
+  const historyStyles = useHistoryStyles();
   const {groups, history} = props
   const shouldGenerateGroups = useRef(true);
   const [selectedItemKey, setSelectedItemKey] = useState<string | null>(null);
@@ -348,6 +350,7 @@ const HistoryItems = (props: HistoryProps)=>{
                             aria-label={translateMessage('Remove from collection')}
                             appearance='transparent'
                             icon={<SubtractSquare20Regular />}
+                            className={historyStyles.button}
                             onClick={ (e: React.MouseEvent<HTMLButtonElement>) => {
                               e.stopPropagation();
                               handleRemoveFromCollection(h);
@@ -365,6 +368,7 @@ const HistoryItems = (props: HistoryProps)=>{
                             aria-label={translateMessage('Add to collection')}
                             appearance='transparent'
                             icon={<AddSquare20Regular />}
+                            className={historyStyles.button}
                             onClick={(e:  React.MouseEvent<HTMLButtonElement>) => {
                               e.stopPropagation();
                               handleAddToCollection(h);
@@ -432,6 +436,7 @@ interface HistoryItemActionMenuProps {
 
 const HistoryItemActionMenu = (props: HistoryItemActionMenuProps)=>{
   const dispatch = useAppDispatch()
+  const historyStyles = useHistoryStyles()
   const {item} = props
 
   const handleExportQuery = (query: IHistoryItem)=>{
@@ -457,21 +462,28 @@ const HistoryItemActionMenu = (props: HistoryItemActionMenuProps)=>{
   }
   return <Menu>
     <MenuTrigger disableButtonEnhancement>
-      <Button  tabIndex={0} appearance='subtle' icon={<MoreHorizontalRegular/>}></Button>
+      <Button
+        tabIndex={0}
+        appearance='subtle'
+        icon={<MoreHorizontal20Regular />}
+        className={historyStyles.button}
+      ></Button>
     </MenuTrigger>
 
     <MenuPopover>
       <MenuList>
         <MenuGroup>
           <MenuGroupHeader>{translateMessage('actions')}</MenuGroupHeader>
-          <MenuItem icon={<ArrowDownloadRegular/>}
+          <MenuItem icon={<ArrowDownload20Regular/>}
+            className={historyStyles.button}
             onClick={(e) => {
               e.stopPropagation();
               handleExportQuery(item);
             }}>
             {translateMessage('Export')}
           </MenuItem>
-          <MenuItem icon={<DeleteRegular/>}
+          <MenuItem icon={<Delete20Regular/>}
+            className={historyStyles.button}
             onClick={(e) => {
               e.stopPropagation();
               handleDeleteQuery(item);
diff --git a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
@@ -191,6 +191,7 @@ const ResourceExplorer = () => {
               <Button
                 aria-label={translateMessage('Remove from collection')}
                 appearance='transparent'
+                className={resourceExplorerStyles.button}
                 icon={<SubtractSquare20Regular />}
                 onClick={handleRemoveFromCollection}
               />
@@ -205,6 +206,7 @@ const ResourceExplorer = () => {
                 aria-label={translateMessage('Add to collection')}
                 appearance='transparent'
                 aria-describedby='tooltip'
+                className={resourceExplorerStyles.button}
                 icon={<AddSquare20Regular />}
                 onClick={handleAddToCollection}
               />
diff --git a/src/app/views/sidebar/resource-explorer/resourceExplorerStyles.ts b/src/app/views/sidebar/resource-explorer/resourceExplorerStyles.ts
diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.styles.ts b/src/app/views/sidebar/sample-queries/SampleQueries.styles.ts
diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
diff --git a/src/index.tsx b/src/index.tsx
diff --git a/src/types/enums.ts b/src/types/enums.ts
diff --git a/src/types/query-runner.ts b/src/types/query-runner.ts
