Merge pull request #112 from cloudera/DSE-47182

Author: Khauneesh-AI

app/client/src/pages/DataGenerator/Finish.tsx

@@ -255,7 +255,8 @@ const Finish = () => {
             title: 'Review Dataset',
             description: 'Review your dataset to ensure it properly fits your usecase.',
             icon: <GradingIcon/>,
-            href: getFilesURL(genDatasetResp?.export_path?.local || "")
+            href: getFilesURL(genDatasetResp?.export_path?.local || ""),
+            external: true
         },
         {
             avatar: '',
@@ -278,7 +279,8 @@ const Finish = () => {
             title: 'Review Dataset',
             description: 'Once your dataset finishes generating, you can review your dataset in the workbench files',
             icon: <GradingIcon/>,
-            href: getFilesURL('')
+            href: getFilesURL(''),
+            external: true
         },
         {
             avatar: '',
@@ -361,7 +363,18 @@ const Finish = () => {
             <List
                 itemLayout="horizontal"
                 dataSource={isDemo ? nextStepsListPreview : nextStepsListNonPreview}
-                renderItem={({ title, href, icon, description}, i) => (
+                renderItem={({ title, href, icon, description, external }, i) => (
+                    external ? 
+                    <Link to={href} target="_blank" rel="noopener noreferrer">
+                        <List.Item key={`${title}-${i}`}>
+                            <List.Item.Meta
+                                avatar={<Avatar style={{ backgroundColor: '#1677ff'}} icon={icon} />}
+                                title={title}
+                                description={description}
+                            />
+                        </List.Item>
+                    </Link> : 
+
                     <Link to={href}>
                         <List.Item key={`${title}-${i}`}>
                             <List.Item.Meta

app/client/src/pages/Home/TemplateCard.tsx

@@ -132,10 +132,10 @@ const TagsContainer = styled.div`
   }
 `;
 
-const StyledTag = styled(Tag)`
-  color: ${props => props.theme.color};
-  background-color: ${props => props.theme.backgroundColor};
-  border: 1px solid ${props => props.theme.borderColor};
+const StyledTag = styled(Tag)<{ $theme: { color: string; backgroundColor: string; borderColor: string } }>`
+  color: ${props => props.$theme.color} !important;
+  background-color: ${props => props.$theme.backgroundColor} !important;
+  border: 1px solid ${props => props.$theme.borderColor} !important;
 `;
 
 
@@ -150,7 +150,7 @@ const TemplateCard: React.FC<Props> = ({ template }) => {
         const { color, backgroundColor, borderColor } = getTemplateTagColors(theme as string);
 
         return (
-          <StyledTag key={tag} theme={{ color, backgroundColor, borderColor }}>
+          <StyledTag key={tag} $theme={{ color, backgroundColor, borderColor }}>
             <div className="tag-title" title={tag} style={{ maxWidth: '150px', color }}>
                 {tag}
             </div>