fix: unify badge-like components in activity (#2754)

tolgee · Dec 4, 2024 · 5699867 · 5699867
1 parent d2d84c3
commit 5699867
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 88 deletions.
diff --git a/webapp/src/component/activity/references/AnyReference.tsx b/webapp/src/component/activity/references/AnyReference.tsx
@@ -9,7 +9,7 @@ import { ContentStorageReference } from './ContentStorageReference';
 import { WebhookConfigReference } from './WebhookConfigReference';
 import { TaskReference } from './TaskReference';
 
-const StyledReferences = styled(Box)`
+export const StyledReferences = styled(Box)`
   display: flex;
   gap: 3px;
   white-space: nowrap;

diff --git a/webapp/src/component/activity/types/getBatchLanguageIdChange.tsx b/webapp/src/component/activity/types/getBatchLanguageIdChange.tsx
@@ -1,27 +1,7 @@
-import { DiffValue } from '../types';
-import { styled } from '@mui/material';
 import { useProjectLanguages } from 'tg.hooks/useProjectLanguages';
 import { CircledLanguageIcon } from 'tg.component/languages/CircledLanguageIcon';
-
-const StyledContainer = styled('span')`
-  display: div;
-`;
-
-const StyledLanguage = styled('span')`
-  gap: 4px;
-  background: ${({ theme }) => theme.palette.emphasis[100]};
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.palette.emphasis[200]};
-  padding: 0px 4px;
-  & + & {
-    margin-left: 4px;
-  }
-`;
-
-const StyledName = styled('span')`
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
+import { DiffValue } from '../types';
+import { StyledReferences } from '../references/AnyReference';
 
 type Props = {
   input: DiffValue<number>;
@@ -31,21 +11,14 @@ const LanguageIdsComponent: React.FC<Props> = ({ input }) => {
   const allLangs = useProjectLanguages();
   const langId = input.new;
   const language = allLangs.find((lang) => lang.id === langId);
-  if (langId) {
+  if (language) {
     return (
-      <StyledContainer>
-        <StyledLanguage key={langId}>
-          {language?.name && <StyledName>{language.name}</StyledName>}
-          <CircledLanguageIcon
-            size={14}
-            flag={language?.flagEmoji}
-            display="inline-block"
-            position="relative"
-            top="3px"
-            marginLeft="2px"
-          />
-        </StyledLanguage>
-      </StyledContainer>
+      <StyledReferences>
+        <span className="reference referenceComposed">
+          <span className="referenceText">{language.name} </span>
+          <CircledLanguageIcon flag={language?.flagEmoji} size={14} />
+        </span>
+      </StyledReferences>
     );
   } else {
     return null;

diff --git a/webapp/src/component/activity/types/getBatchLanguageIdsChange.tsx b/webapp/src/component/activity/types/getBatchLanguageIdsChange.tsx
@@ -1,27 +1,7 @@
-import { DiffValue } from '../types';
-import { styled } from '@mui/material';
 import { useProjectLanguages } from 'tg.hooks/useProjectLanguages';
 import { CircledLanguageIcon } from 'tg.component/languages/CircledLanguageIcon';
-
-const StyledContainer = styled('span')`
-  display: div;
-`;
-
-const StyledLanguage = styled('span')`
-  gap: 4px;
-  background: ${({ theme }) => theme.palette.emphasis[100]};
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.palette.emphasis[200]};
-  padding: 0px 4px;
-  & + & {
-    margin-left: 4px;
-  }
-`;
-
-const StyledName = styled('span')`
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
+import { DiffValue } from '../types';
+import { StyledReferences } from '../references/AnyReference';
 
 type Props = {
   input: DiffValue<number[]>;
@@ -32,24 +12,19 @@ const LanguageIdsComponent: React.FC<Props> = ({ input }) => {
   const newInput = input.new;
   if (newInput) {
     return (
-      <StyledContainer>
+      <StyledReferences>
         {input.new?.map((langId) => {
           const language = allLangs.find((lang) => lang.id === langId);
           return (
-            <StyledLanguage key={langId}>
-              {language?.name && <StyledName>{language.name}</StyledName>}
-              <CircledLanguageIcon
-                size={14}
-                flag={language?.flagEmoji}
-                display="inline-block"
-                position="relative"
-                top="3px"
-                marginLeft="2px"
-              />
-            </StyledLanguage>
+            <span key={langId} className="reference referenceComposed">
+              {language && (
+                <span className="referenceText">{language.name} </span>
+              )}
+              <CircledLanguageIcon flag={language?.flagEmoji} size={14} />
+            </span>
           );
         })}
-      </StyledContainer>
+      </StyledReferences>
     );
   } else {
     return null;

diff --git a/webapp/src/component/activity/types/getBatchNamespaceChange.tsx b/webapp/src/component/activity/types/getBatchNamespaceChange.tsx
@@ -1,17 +1,5 @@
+import { StyledReferences } from '../references/AnyReference';
 import { DiffValue } from '../types';
-import { styled } from '@mui/material';
-
-const StyledContainer = styled('span')`
-  word-break: break-word;
-`;
-
-const StyledNamespace = styled('span')`
-  background: ${({ theme }) => theme.palette.emphasis[100]};
-  max-height: 1.5em;
-  padding: 0px 4px;
-  border-radius: 4px;
-  border: 1px solid ${({ theme }) => theme.palette.emphasis[200]};
-`;
 
 type Props = {
   input: DiffValue<any>;
@@ -21,9 +9,9 @@ const NamespaceComponent: React.FC<Props> = ({ input }) => {
   const newInput = input.new?.data?.name || input.new;
   if (newInput) {
     return (
-      <StyledContainer>
-        <StyledNamespace>{newInput}</StyledNamespace>
-      </StyledContainer>
+      <StyledReferences>
+        <span className="reference">{newInput}</span>
+      </StyledReferences>
     );
   } else {
     return null;