fix(releases-widget): add hardcoded css classNames(#3181)

packages/widgets/src/releases/component.tsx

@@ -129,7 +129,7 @@ export default function ReleasesWidget({ options }: WidgetComponentProps<"releas
   );
 
   return (
-    <Stack gap={0}>
+    <Stack gap={0} className="releases">
       {repositories.map((repository: ReleasesRepositoryResponse) => {
         const isActive =
           expandedRepository.providerKey === repository.providerKey &&
@@ -139,17 +139,23 @@ export default function ReleasesWidget({ options }: WidgetComponentProps<"releas
         return (
           <Stack
             key={`${repository.providerKey}.${repository.identifier}`}
-            className={classes.releasesRepository}
+            className={combineClasses(
+              "releases-repository",
+              // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+              `releases-repository-${repository.providerKey}-${repository.name || repository.identifier.replace(/[^a-zA-Z0-9]/g, "_")}`,
+              classes.releasesRepository,
+            )}
             gap={0}
           >
             <Group
-              className={combineClasses(classes.releasesRepositoryHeader, {
+              className={combineClasses("releases-repository-header", classes.releasesRepositoryHeader, {
                 [classes.active ?? ""]: isActive,
               })}
               p="xs"
               onClick={() => toggleExpandedRepository(repository)}
             >
               <MaskedOrNormalImage
+                className="releases-repository-header-icon"
                 imageUrl={repository.iconUrl ?? Providers[repository.providerKey]?.iconUrl}
                 hasColor={hasIconColor}
                 style={{
@@ -158,24 +164,40 @@ export default function ReleasesWidget({ options }: WidgetComponentProps<"releas
                 }}
               />
 
-              <Group gap={5} justify="space-between" style={{ flex: 1 }}>
+              <Group
-                {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                className="releases-repository-header-nameVersion-wrapper"
-                <Text size="xs">{repository.name || repository.identifier}</Text>
+                gap={5}
+                justify="space-between"
+                style={{ flex: 1 }}
+              >
+                <Text className="releases-repository-header-name" size="xs">
+                  {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                  {repository.name || repository.identifier}
+                </Text>
 
                 <Tooltip
+                  className="releases-repository-header-version-tooltip"
                   withArrow
                   arrowSize={5}
                   label={repository.latestRelease}
                   events={{ hover: repository.latestRelease !== undefined, focus: false, touch: false }}
                 >
-                  <Text size="xs" fw={700} truncate="end" c={hasError ? "red" : "text"} style={{ flexShrink: 1 }}>
+                  <Text
+                    className="releases-repository-header-version"
+                    size="xs"
+                    fw={700}
+                    truncate="end"
+                    c={hasError ? "red" : "text"}
+                    style={{ flexShrink: 1 }}
+                  >
                     {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
                   </Text>
                 </Tooltip>
               </Group>
 
-              <Group gap={5}>
+              <Group className="releases-repository-header-releaseDate-wrapper" gap={5}>
                 <Text
+                  className="releases-repository-header-releaseDate"
                   size="xs"
                   c={repository.isNewRelease ? "primaryColor" : repository.isStaleRelease ? "secondaryColor" : "dimmed"}
                 >
@@ -189,6 +211,7 @@ export default function ReleasesWidget({ options }: WidgetComponentProps<"releas
                 {!hasError ? (
                   (repository.isNewRelease || repository.isStaleRelease) && (
                     <IconCircleFilled
+                      className="releases-repository-header-releaseDate-marker"
                       size={10}
                       color={
                         repository.isNewRelease
@@ -198,7 +221,11 @@ export default function ReleasesWidget({ options }: WidgetComponentProps<"releas
                     />
                   )
                 ) : (
-                  <IconTriangleFilled size={10} color={"var(--mantine-color-red-filled)"} />
+                  <IconTriangleFilled
+                    className="releases-repository-header-releaseDate-error"
+                    size={10}
+                    color={"var(--mantine-color-red-filled)"}
+                  />
                 )}
               </Group>
             </Group>
@@ -206,7 +233,7 @@ export default function ReleasesWidget({ options }: WidgetComponentProps<"releas
               <DetailsDisplay repository={repository} toggleExpandedRepository={toggleExpandedRepository} />
             )}
             {isActive && <ExpandedDisplay repository={repository} hasIconColor={hasIconColor} />}
-            <Divider />
+            <Divider className="releases-repository-divider" />
           </Stack>
         );
       })}
@@ -225,16 +252,28 @@ const DetailsDisplay = ({ repository, toggleExpandedRepository }: DetailsDisplay
 
   return (
     <>
-      <Divider onClick={() => toggleExpandedRepository(repository)} />
+      <Divider className="releases-repository-details-divider" onClick={() => toggleExpandedRepository(repository)} />
       <Group
-        className={classes.releasesRepositoryDetails}
+        className={combineClasses("releases-repository-details", classes.releasesRepositoryDetails)}
         justify="space-between"
         p={5}
         onClick={() => toggleExpandedRepository(repository)}
       >
-        <Group>
+        <Group className="releases-repository-details-icon-wrapper">
-          <Tooltip label={t("pre-release")} withArrow arrowSize={5}>
+          <Tooltip
+            className={combineClasses(
+              "releases-repository-details-icon-tooltip",
+              "releases-repository-details-icon-preRelease-tooltip",
+            )}
+            label={t("pre-release")}
+            withArrow
+            arrowSize={5}
+          >
             <IconProgressCheck
+              className={combineClasses(
+                "releases-repository-details-icon",
+                "releases-repository-details-icon-preRelease",
+              )}
               size={13}
               color={
                 repository.isPreRelease ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"
@@ -242,28 +281,74 @@ const DetailsDisplay = ({ repository, toggleExpandedRepository }: DetailsDisplay
             />
           </Tooltip>
 
-          <Tooltip label={t("archived")} withArrow arrowSize={5}>
+          <Tooltip
+            className={combineClasses(
+              "releases-repository-details-icon-tooltip",
+              "releases-repository-details-icon-archived-tooltip",
+            )}
+            label={t("archived")}
+            withArrow
+            arrowSize={5}
+          >
             <IconArchive
+              className={combineClasses(
+                "releases-repository-details-icon",
+                "releases-repository-details-icon-archived",
+              )}
               size={13}
               color={repository.isArchived ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
             />
           </Tooltip>
 
-          <Tooltip label={t("forked")} withArrow arrowSize={5}>
+          <Tooltip
+            className={combineClasses(
+              "releases-repository-details-icon-tooltip",
+              "releases-repository-details-icon-forked-tooltip",
+            )}
+            label={t("forked")}
+            withArrow
+            arrowSize={5}
+          >
             <IconGitFork
+              className={combineClasses("releases-repository-details-icon", "releases-repository-details-icon-forked")}
               size={13}
               color={repository.isFork ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
             />
           </Tooltip>
         </Group>
-        <Group>
+        <Group className="releases-repository-details-stats">
-          <Tooltip label={t("starsCount")} withArrow arrowSize={5}>
+          <Tooltip
-            <Group gap={5}>
+            className={combineClasses(
+              "releases-repository-details-stats-tooltip",
+              "releases-repository-details-stats-stars-tooltip",
+            )}
+            label={t("starsCount")}
+            withArrow
+            arrowSize={5}
+          >
+            <Group
+              className={combineClasses(
+                "releases-repository-details-stats-wrapper",
+                "releases-repository-details-stats-stars-wrapper",
+              )}
+              gap={5}
+            >
               <IconStar
+                className={combineClasses(
+                  "releases-repository-details-stats-icon",
+                  "releases-repository-details-stats-stars-icon",
+                )}
                 size={12}
                 color={!repository.starsCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
               />
-              <Text size="xs" c={!repository.starsCount ? "dimmed" : ""}>
+              <Text
+                className={combineClasses(
+                  "releases-repository-details-stats-text",
+                  "releases-repository-details-stats-stars-text",
+                )}
+                size="xs"
+                c={!repository.starsCount ? "dimmed" : ""}
+              >
                 {!repository.starsCount
                   ? "-"
                   : formatter.number(repository.starsCount, {
@@ -274,13 +359,38 @@ const DetailsDisplay = ({ repository, toggleExpandedRepository }: DetailsDisplay
             </Group>
           </Tooltip>
 
-          <Tooltip label={t("forksCount")} withArrow arrowSize={5}>
+          <Tooltip
-            <Group gap={5}>
+            className={combineClasses(
+              "releases-repository-details-stats-tooltip",
+              "releases-repository-details-stats-forks-tooltip",
+            )}
+            label={t("forksCount")}
+            withArrow
+            arrowSize={5}
+          >
+            <Group
+              className={combineClasses(
+                "releases-repository-details-stats-wrapper",
+                "releases-repository-details-stats-forks-wrapper",
+              )}
+              gap={5}
+            >
               <IconGitFork
+                className={combineClasses(
+                  "releases-repository-details-stats-icon",
+                  "releases-repository-details-stats-forks-icon",
+                )}
                 size={12}
                 color={!repository.forksCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
               />
-              <Text size="xs" c={!repository.forksCount ? "dimmed" : ""}>
+              <Text
+                className={combineClasses(
+                  "releases-repository-details-stats-text",
+                  "releases-repository-details-stats-forks-text",
+                )}
+                size="xs"
+                c={!repository.forksCount ? "dimmed" : ""}
+              >
                 {!repository.forksCount
                   ? "-"
                   : formatter.number(repository.forksCount, {
@@ -291,13 +401,38 @@ const DetailsDisplay = ({ repository, toggleExpandedRepository }: DetailsDisplay
             </Group>
           </Tooltip>
 
-          <Tooltip label={t("issuesCount")} withArrow arrowSize={5}>
+          <Tooltip
-            <Group gap={5}>
+            className={combineClasses(
+              "releases-repository-details-stats-tooltip",
+              "releases-repository-details-stats-issues-tooltip",
+            )}
+            label={t("issuesCount")}
+            withArrow
+            arrowSize={5}
+          >
+            <Group
+              className={combineClasses(
+                "releases-repository-details-stats-wrapper",
+                "releases-repository-details-stats-issues-wrapper",
+              )}
+              gap={5}
+            >
               <IconCircleDot
+                className={combineClasses(
+                  "releases-repository-details-stats-icon",
+                  "releases-repository-details-stats-issues-icon",
+                )}
                 size={12}
                 color={!repository.openIssues ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
               />
-              <Text size="xs" c={!repository.openIssues ? "dimmed" : ""}>
+              <Text
+                className={combineClasses(
+                  "releases-repository-details-stats-text",
+                  "releases-repository-details-stats-issues-text",
+                )}
+                size="xs"
+                c={!repository.openIssues ? "dimmed" : ""}
+              >
                 {!repository.openIssues
                   ? "-"
                   : formatter.number(repository.openIssues, {
@@ -325,11 +460,20 @@ const ExpandedDisplay = ({ repository, hasIconColor }: ExtendedDisplayProps) =>
 
   return (
     <>
-      <Divider mx={5} />
+      <Divider className="releases-repository-expanded-divider" mx={5} />
-      <Stack className={classes.releasesRepositoryExpanded} gap={0} p={10}>
+      <Stack
-        <Group justify="space-between" align="center">
+        className={combineClasses("releases-repository-expanded", classes.releasesRepositoryExpanded)}
-          <Group gap={5} align="center">
+        gap="xs"
+        p={10}
+      >
+        <Group className="releases-repository-expanded-header" justify="space-between" align="center" gap="xs">
+          <Text className="releases-repository-expanded-header-identifier" size="xs" c="iconColor" ff="monospace">
+            {repository.identifier}
+          </Text>
+
+          <Group className="releases-repository-expanded-header-provider-wrapper" gap={5} align="center">
             <MaskedOrNormalImage
+              className="releases-repository-expanded-header-provider-icon"
               imageUrl={Providers[repository.providerKey]?.iconUrl}
               hasColor={hasIconColor}
               style={{
@@ -337,61 +481,72 @@ const ExpandedDisplay = ({ repository, hasIconColor }: ExtendedDisplayProps) =>
                 aspectRatio: "1/1",
               }}
             />
-            <Text size="xs" c="iconColor" ff="monospace">
+            <Text className="releases-repository-expanded-header-provider-name" size="xs" c="iconColor" ff="monospace">
               {Providers[repository.providerKey]?.name}
             </Text>
           </Group>
-          {repository.createdAt && (
-            <Text size="xs" c="dimmed" ff="monospace">
-              <Text span>{t("created")}</Text>
-              <Text span> | </Text>
-              <Text span fw={700}>
-                {formatter.relativeTime(repository.createdAt, {
-                  now,
-                  style: "narrow",
-                })}
-              </Text>
-            </Text>
-          )}
         </Group>
 
-        <Text size="xs" c="iconColor" ff="monospace">
+        {repository.createdAt && (
-          {repository.identifier}
+          <Text className="releases-repository-expanded-createdAt" size="xs" c="dimmed" ff="monospace">
-        </Text>
+            <Text className="releases-repository-expanded-createdAt-label" span>
-
+              {`${t("created")} | `}
+            </Text>
+            <Text className="releases-repository-expanded-createdAt-date" span fw={700}>
+              {formatter.relativeTime(repository.createdAt, {
+                now,
+                style: "narrow",
+              })}
+            </Text>
+          </Text>
+        )}
         {(repository.releaseUrl ?? repository.projectUrl) && (
           <>
-            <Divider my={10} mx="30%" />
+            <Divider className="releases-repository-expanded-openButton-divider" mx="30%" />
             <Button
+              className="releases-repository-expanded-openButton"
               variant="light"
               component="a"
               href={repository.releaseUrl ?? repository.projectUrl}
               target="_blank"
               rel="noreferrer"
             >
-              <IconExternalLink />
+              <IconExternalLink className="releases-repository-expanded-openButton-icon" />
-              {repository.releaseUrl ? t("openReleasePage") : t("openProjectPage")}
+              <Text className="releases-repository-expanded-openButton-text">
+                {repository.releaseUrl ? t("openReleasePage") : t("openProjectPage")}
+              </Text>
             </Button>
           </>
         )}
         {repository.error && (
           <>
-            <Divider my={10} mx="30%" />
+            <Divider className="releases-repository-expanded-error-divider" mx="30%" />
-            <Title order={4} ta="center">
+            <Title className="releases-repository-expanded-error-title" order={4} ta="center">
               {t("error.label")}
             </Title>
-            <Text size="xs" ff="monospace" c="red" style={{ whiteSpace: "pre-wrap" }}>
+            <Text
+              className="releases-repository-expanded-error-text"
+              size="xs"
+              ff="monospace"
+              c="red"
+              style={{ whiteSpace: "pre-wrap" }}
+            >
               {repository.error.code ? t(`error.options.${repository.error.code}` as never) : repository.error.message}
             </Text>
           </>
         )}
         {repository.releaseDescription && (
           <>
-            <Divider my={10} mx="30%" />
+            <Divider className="releases-repository-expanded-description-divider" my={10} mx="30%" />
-            <Title order={4} ta="center">
+            <Title className="releases-repository-expanded-description-title" order={4} ta="center">
               {t("releaseDescription")}
             </Title>
-            <Text component="div" size="xs" ff="monospace" className={classes.releasesDescription}>
+            <Text
+              className={combineClasses("releases-repository-expanded-description-text", classes.releasesDescription)}
+              component="div"
+              size="xs"
+              ff="monospace"
+            >
               <ReactMarkdown skipHtml>{repository.releaseDescription}</ReactMarkdown>
             </Text>
           </>