ref(issues) cmdk actions

JonasBa · JonasBa · commit 6e5e899d02f2 · 2026-04-09T08:28:42.000+02:00
diff --git a/static/app/components/commandPalette/ui/commandPalette.tsx b/static/app/components/commandPalette/ui/commandPalette.tsx
@@ -30,7 +30,7 @@ import {
 import {useCommandPaletteAnalytics} from 'sentry/components/commandPalette/useCommandPaletteAnalytics';
 import {FeedbackButton} from 'sentry/components/feedbackButton/feedbackButton';
 import {LoadingIndicator} from 'sentry/components/loadingIndicator';
-import {IconArrow, IconClose, IconLink, IconSearch} from 'sentry/icons';
+import {IconArrow, IconClose, IconLink, IconOpen, IconSearch} from 'sentry/icons';
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 import {t} from 'sentry/locale';
 import {fzf} from 'sentry/utils/search/fzf';
@@ -249,6 +249,12 @@ export function CommandPalette(props: CommandPaletteProps) {
 
   const resultsListRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (resultsListRef.current) {
+      resultsListRef.current.scrollTop = 0;
+    }
+  }, [state.action, state.query]);
+
   // Track whether Shift is held so that actions with `to` can be opened in a
   // new tab. Using a ref (instead of state) avoids re-renders on every keypress.
   const shiftHeldRef = useRef(false);
@@ -331,9 +337,6 @@ export function CommandPalette(props: CommandPaletteProps) {
                     onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
                       dispatch({type: 'set query', query: e.target.value});
                       treeState.selectionManager.setFocusedKey(null);
-                      if (resultsListRef.current) {
-                        resultsListRef.current.scrollTop = 0;
-                      }
                     },
                     onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
                       if (e.key === 'Backspace' && state.query.length === 0) {
@@ -622,7 +625,15 @@ function makeMenuItemFromAction(action: CMDKFlatItem): CommandPaletteActionMenuI
         <IconDefaultsProvider size="sm">{action.display.icon}</IconDefaultsProvider>
       </Flex>
     ),
-    trailingItems: 'to' in action ? <IconLink size="xs" variant="muted" /> : undefined,
+    trailingItems:
+      'to' in action ? (
+        typeof action.to === 'string' &&
+        (action.to.startsWith('http://') || action.to.startsWith('https://')) ? (
+          <IconOpen size="xs" variant="muted" />
+        ) : (
+          <IconLink size="xs" variant="muted" />
+        )
+      ) : undefined,
     children: [],
     hideCheck: true,
   };
diff --git a/static/app/components/commandPalette/ui/commandPaletteGlobalActions.tsx b/static/app/components/commandPalette/ui/commandPaletteGlobalActions.tsx
@@ -4,7 +4,6 @@ import DOMPurify from 'dompurify';
 import {ProjectAvatar} from '@sentry/scraps/avatar';
 
 import {addLoadingMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
-import {openInviteMembersModal} from 'sentry/actionCreators/modal';
 import {openSudo} from 'sentry/actionCreators/sudoModal';
 import type {
   CMDKQueryOptions,
@@ -30,7 +29,6 @@ import {
   IconSearch,
   IconSettings,
   IconStar,
-  IconUser,
 } from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {apiOptions} from 'sentry/utils/api/apiOptions';
@@ -276,11 +274,6 @@ export function GlobalCommandPaletteActions() {
           keywords={[t('add project')]}
           to={`${prefix}/projects/new/`}
         />
-        <CMDKAction
-          display={{label: t('Invite Members'), icon: <IconUser />}}
-          keywords={[t('team invite')]}
-          onAction={openInviteMembersModal}
-        />
       </CMDKAction>
 
       <CMDKAction display={{label: t('DSN')}} keywords={[t('client keys')]}>
@@ -343,25 +336,19 @@ export function GlobalCommandPaletteActions() {
       <CMDKAction display={{label: t('Help')}}>
         <CMDKAction
           display={{label: t('Open Documentation'), icon: <IconDocs />}}
-          onAction={() => window.open('https://docs.sentry.io', '_blank', 'noreferrer')}
+          to="https://docs.sentry.io"
         />
         <CMDKAction
           display={{label: t('Join Discord'), icon: <IconDiscord />}}
-          onAction={() =>
-            window.open('https://discord.gg/sentry', '_blank', 'noreferrer')
-          }
+          to="https://discord.gg/sentry"
         />
         <CMDKAction
           display={{label: t('Open GitHub Repository'), icon: <IconGithub />}}
-          onAction={() =>
-            window.open('https://github.com/getsentry/sentry', '_blank', 'noreferrer')
-          }
+          to="https://github.com/getsentry/sentry"
         />
         <CMDKAction
-          display={{label: t('View Changelog'), icon: <IconOpen />}}
-          onAction={() =>
-            window.open('https://sentry.io/changelog/', '_blank', 'noreferrer')
-          }
+          display={{label: t('View Changelog')}}
+          to="https://sentry.io/changelog/"
         />
         <CMDKAction
           display={{label: t('Search Results')}}
@@ -406,7 +393,7 @@ export function GlobalCommandPaletteActions() {
       </CMDKAction>
 
       <CMDKAction display={{label: t('Interface')}}>
-        <CMDKAction display={{label: t('Change Color Theme'), icon: <IconSettings />}}>
+        <CMDKAction display={{label: t('Change Color Theme')}}>
           <CMDKAction
             display={{label: t('System')}}
             onAction={async () => {
diff --git a/static/app/components/commandPalette/ui/modal.tsx b/static/app/components/commandPalette/ui/modal.tsx
@@ -25,13 +25,18 @@ export default function CommandPaletteModal({Body, closeModal}: ModalRenderProps
   const handleSelect = useCallback(
     (action: CollectionTreeNode<CMDKActionData>, modifierKeys: CMDKModifierKeys) => {
       if ('to' in action) {
-        if (modifierKeys.shift) {
+        const href = locationToString(action.to);
+        const isExternal = href.startsWith('http://') || href.startsWith('https://');
+        if (isExternal) {
+          window.open(href, '_blank', 'noreferrer');
+        } else if (modifierKeys.shift) {
           // Open in a new tab and leave the palette open so the user can
           // continue selecting more items.
           window.open(locationToString(normalizeUrl(action.to)), '_blank');
           return;
+        } else {
+          navigate(normalizeUrl(action.to));
         }
-        navigate(normalizeUrl(action.to));
       } else if ('onAction' in action) {
         action.onAction();
         // When the action has children, the palette will push into them so the
diff --git a/static/app/views/issueList/actions/index.tsx b/static/app/views/issueList/actions/index.tsx
@@ -27,6 +27,7 @@ import {
   IconMerge,
   IconMute,
   IconSliders,
+  IconSort,
   IconStack,
 } from 'sentry/icons';
 import {t, tct, tn} from 'sentry/locale';
@@ -39,16 +40,25 @@ import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {uniq} from 'sentry/utils/array/uniq';
 import {useQueryClient} from 'sentry/utils/queryClient';
+import {decodeScalar} from 'sentry/utils/queryString';
 import {useApi} from 'sentry/utils/useApi';
+import {useLocation} from 'sentry/utils/useLocation';
 import {useMedia} from 'sentry/utils/useMedia';
+import {useNavigate} from 'sentry/utils/useNavigate';
 import {useOrganization} from 'sentry/utils/useOrganization';
 import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
 import {
   useIssueSelectionActions,
   useIssueSelectionSummary,
 } from 'sentry/views/issueList/issueSelectionContext';
 import type {IssueUpdateData} from 'sentry/views/issueList/types';
-import {SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY} from 'sentry/views/issueList/utils';
+import {
+  DEFAULT_ISSUE_STREAM_SORT,
+  FOR_REVIEW_QUERIES,
+  getSortLabel,
+  IssueSortOptions,
+  SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY,
+} from 'sentry/views/issueList/utils';
 
 import {ActionSet} from './actionSet';
 import {Headers} from './headers';
@@ -182,6 +192,12 @@ export function IssueListActions({
   const api = useApi();
   const queryClient = useQueryClient();
   const organization = useOrganization();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const sort = decodeScalar(
+    location.query.sort,
+    DEFAULT_ISSUE_STREAM_SORT
+  ) as IssueSortOptions;
   const {setAllInQuerySelected, deselectAll, toggleSelectAllVisible} =
     useIssueSelectionActions();
   const {pageSelected, multiSelected, anySelected, allInQuerySelected, selectedIdsSet} =
@@ -473,6 +489,33 @@ export function IssueListActions({
               />
             )}
           </CMDKAction>
+          <CMDKAction display={{label: t('Sort by'), icon: <IconSort />}}>
+            {[
+              ...(FOR_REVIEW_QUERIES.includes(query || '')
+                ? [IssueSortOptions.INBOX]
+                : []),
+              IssueSortOptions.DATE,
+              IssueSortOptions.NEW,
+              IssueSortOptions.TRENDS,
+              IssueSortOptions.FREQ,
+              IssueSortOptions.USER,
+            ].map(sortOption => (
+              <CMDKAction
+                key={sortOption}
+                display={{
+                  label: getSortLabel(sortOption),
+                  icon: sortOption === sort ? <IconCheckmark /> : undefined,
+                }}
+                onAction={() => {
+                  trackAnalytics('issues_stream.sort_changed', {
+                    organization,
+                    sort: sortOption,
+                  });
+                  navigate({...location, query: {...location.query, sort: sortOption}});
+                }}
+              />
+            ))}
+          </CMDKAction>
           {groupIds.map(id => {
             const group = GroupStore.get(id);
             if (!group) return null;
