chore(icons): Add more options for iconLock (#70482)

this pr updates the options for `iconLock` so that it is never solid and
the only choice is whether it is locked. old prop is included since it
is being used in `getsentry`, will remove in future pr

<img width="38" alt="Screenshot 2024-05-07 at 3 26 56 PM"
src="https://github.com/getsentry/sentry/assets/46740234/621624aa-c5ec-432f-9513-90f8c23d90c9">
<img width="39" alt="Screenshot 2024-05-07 at 3 26 22 PM"
src="https://github.com/getsentry/sentry/assets/46740234/63fcde0d-24f2-4756-a83f-5cb6c74b3240">

static/app/components/events/interfaces/threads.tsx

@@ -64,7 +64,7 @@ export function getThreadStateIcon(state: ThreadStates | undefined) {
   }
   switch (state) {
     case ThreadStates.BLOCKED:
-      return <IconLock isSolid />;
+      return <IconLock locked />;
     case ThreadStates.TIMED_WAITING:
       return <IconTimer />;
     case ThreadStates.WAITING:

static/app/components/onboardingWizard/task.tsx

@@ -129,7 +129,7 @@ function Task(props: Props) {
         requisite: task.requisiteTasks[0].title,
       })}
     >
-      <IconLock color="pink400" isSolid />
+      <IconLock color="pink400" locked />
     </Tooltip>
   );
 

static/app/components/organizations/headerItem.tsx

@@ -89,7 +89,7 @@ function HeaderItem({
       )}
       {locked && (
         <Tooltip title={lockedMessage || t('This selection is locked')} position="bottom">
-          <StyledLock color="gray300" isSolid />
+          <StyledLock color="gray300" locked />
         </Tooltip>
       )}
     </StyledHeaderItem>

static/app/components/organizations/pageFilters/pageFilterPinButton.tsx

@@ -38,7 +38,7 @@ function PageFilterPinButton({organization, filter, size, className}: Props) {
       size={size}
       pinned={pinned}
       borderless={size === 'zero'}
-      icon={<IconLock isSolid={pinned} size="xs" />}
+      icon={<IconLock locked={pinned} size="xs" />}
       title={t("Once locked, Sentry will remember this filter's value across pages.")}
       tooltipProps={{delay: 500}}
     >

static/app/components/organizations/pageFilters/pageFilterPinIndicator.tsx

@@ -20,7 +20,7 @@ function PageFilterPinIndicator({children, filter}: Props) {
       {children}
       {pinned && (
         <IndicatorWrap aria-label={t('Filter applied across pages')}>
-          <StyledIconLock size="xs" isSolid />
+          <StyledIconLock size="xs" locked />
         </IndicatorWrap>
       )}
     </Wrap>

static/app/icons/iconLock.tsx

@@ -5,26 +5,30 @@ import {SvgIcon} from './svgIcon';
 
 interface Props extends SVGIconProps {
   isSolid?: boolean;
+  locked?: boolean;
 }
 
-const IconLock = forwardRef<SVGSVGElement, Props>(({isSolid = false, ...props}, ref) => {
-  return (
-    <SvgIcon {...props} ref={ref}>
-      {isSolid ? (
-        <Fragment>
-          <path d="M11.67,7.94a.75.75,0,0,1-.75-.75V4.34a2.84,2.84,0,1,0-5.67,0V7.19a.75.75,0,1,1-1.5,0V4.34a4.34,4.34,0,1,1,8.67,0V7.19A.76.76,0,0,1,11.67,7.94Z" />
-          <path d="M14.72,6.44H1.44a.75.75,0,0,0-.75.75v8.06a.76.76,0,0,0,.75.75H14.72a.76.76,0,0,0,.75-.75V7.19A.75.75,0,0,0,14.72,6.44ZM8.83,12.19a.75.75,0,0,1-1.5,0V10.05a.75.75,0,0,1,1.5,0Z" />
-        </Fragment>
-      ) : (
-        <Fragment>
-          <path d="M4.5,7.94a.75.75,0,0,1-.75-.75V4.34a4.34,4.34,0,0,1,8.5-1.21.76.76,0,0,1-.52.93.74.74,0,0,1-.92-.51,2.84,2.84,0,0,0-5.56.79V7.19A.76.76,0,0,1,4.5,7.94Z" />
-          <path d="M14.72,16H1.44a.76.76,0,0,1-.75-.75V7.19a.75.75,0,0,1,.75-.75H14.72a.75.75,0,0,1,.75.75v8.06A.76.76,0,0,1,14.72,16ZM2.19,14.5H14V7.94H2.19Z" />
-          <path d="M8.08,12.94a.76.76,0,0,1-.75-.75V10.05a.75.75,0,0,1,1.5,0v2.14A.75.75,0,0,1,8.08,12.94Z" />
-        </Fragment>
-      )}
-    </SvgIcon>
-  );
-});
+const IconLock = forwardRef<SVGSVGElement, Props>(
+  ({locked = false, isSolid = false, ...props}, ref) => {
+    return (
+      <SvgIcon {...props} ref={ref}>
+        {locked || isSolid ? (
+          <Fragment>
+            <path d="M11.67,7.94a.75.75,0,0,1-.75-.75V4.34a2.84,2.84,0,1,0-5.67,0V7.19a.75.75,0,1,1-1.5,0V4.34a4.34,4.34,0,1,1,8.67,0V7.19A.76.76,0,0,1,11.67,7.94" />
+            <path d="M14.72,16H1.44a.76.76,0,0,1-.75-.75V7.19a.75.75,0,0,1,.75-.75H14.72a.75.75,0,0,1,.75.75v8.06A.76.76,0,0,1,14.72,16ZM2.19,14.5H14V7.94H2.19Z" />
+            <path d="M8.08,12.94a.76.76,0,0,1-.75-.75V10.05a.75.75,0,0,1,1.5,0v2.14A.75.75,0,0,1,8.08,12.94Z" />
+          </Fragment>
+        ) : (
+          <Fragment>
+            <path d="M4.5,7.94a.75.75,0,0,1-.75-.75V4.34a4.34,4.34,0,0,1,8.5-1.21.76.76,0,0,1-.52.93.74.74,0,0,1-.92-.51,2.84,2.84,0,0,0-5.56.79V7.19A.76.76,0,0,1,4.5,7.94Z" />
+            <path d="M14.72,16H1.44a.76.76,0,0,1-.75-.75V7.19a.75.75,0,0,1,.75-.75H14.72a.75.75,0,0,1,.75.75v8.06A.76.76,0,0,1,14.72,16ZM2.19,14.5H14V7.94H2.19Z" />
+            <path d="M8.08,12.94a.76.76,0,0,1-.75-.75V10.05a.75.75,0,0,1,1.5,0v2.14A.75.75,0,0,1,8.08,12.94Z" />
+          </Fragment>
+        )}
+      </SvgIcon>
+    );
+  }
+);
 
 IconLock.displayName = 'IconLock';
 

static/app/views/settings/organizationAuth/providerItem.tsx

@@ -196,7 +196,7 @@ function LockedFeature({provider, features, className}: LockedFeatureProps) {
         />
       }
     >
-      <Tag role="status" icon={<IconLock isSolid />}>
+      <Tag role="status" icon={<IconLock locked />}>
         {t('disabled')}
       </Tag>
     </DisabledHovercard>

static/app/views/settings/organizationGeneralSettings/organizationSettingsForm.tsx

@@ -71,7 +71,7 @@ function OrganizationSettingsForm({initialData, onSave}: Props) {
                     />
                   }
                 >
-                  <Tag role="status" icon={<IconLock isSolid />}>
+                  <Tag role="status" icon={<IconLock locked />}>
                     {t('disabled')}
                   </Tag>
                 </Hovercard>

static/app/views/settings/settingsIndex.tsx

@@ -210,7 +210,7 @@ function SettingsIndex({organization, ...props}: SettingsIndexProps) {
       <HomePanelHeader>
         <HomeLinkIcon to={LINKS.API}>
           <HomeIconContainer>
-            <IconLock size="lg" isSolid />
+            <IconLock size="lg" locked />
           </HomeIconContainer>
           {t('API Keys')}
         </HomeLinkIcon>