Skip to content

Commit 89e1f45

Browse files
danialraza03danialraza03
authored
Merge pull request #47 from zenml-io/talha/feedback-fixes
Talha/feedback fixes
2 parents 3db292b + d00831c commit 89e1f45

File tree

26 files changed

+258
-162
lines changed

26 files changed

+258
-162
lines changed

‎src/ui/components/links/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,20 @@ export const ExternalSecondaryLink = (props: {
3939
</Paragraph>
4040
</a>
4141
);
42+
43+
export const InnerTextLink = (props: {
44+
href?: string;
45+
text: string;
46+
size?: Sizes;
47+
}): JSX.Element => (
48+
<a
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
className={styles.link}
52+
style={{ color: '#22BBDD' }}
53+
href={props.href}
54+
>
55+
{/* {props.text} */}
56+
{props.text}
57+
</a>
58+
);

‎src/ui/layouts/pipelines/PipelineDetail/Configuration/index.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22

33
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
44
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -17,7 +17,7 @@ export const Configuration: React.FC<{ pipelineId: TId }> = ({
1717
pipelineId,
1818
}) => {
1919
const { downloadYamlFile, pipelineConfig } = useService({ pipelineId });
20-
20+
const [hover, setHover] = useState(false);
2121
const dispatch = useDispatch();
2222
const handleCopy = () => {
2323
navigator.clipboard.writeText(pipelineConfig);
@@ -44,8 +44,22 @@ export const Configuration: React.FC<{ pipelineId: TId }> = ({
4444
>
4545
{translate('configuration.button.text')}
4646
</GhostButton>
47-
<GhostButton onClick={handleCopy}>
47+
{/* <GhostButton onClick={handleCopy}>
4848
<icons.copy color={iconColors.black} size={iconSizes.sm} />
49+
</GhostButton> */}
50+
<GhostButton
51+
onMouseEnter={() => {
52+
setHover(true);
53+
}}
54+
onMouseLeave={() => {
55+
setHover(false);
56+
}}
57+
onClick={handleCopy}
58+
>
59+
<icons.copy
60+
color={hover ? iconColors.white : iconColors.black}
61+
size={iconSizes.sm}
62+
/>
4963
</GhostButton>
5064
</Box>
5165
</FlexBox>

‎src/ui/layouts/pipelines/PipelineDetail/index.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -107,17 +107,13 @@ export const PipelineDetail: React.FC = () => {
107107
<Box style={boxStyle}>
108108
<Box>
109109
<Paragraph style={headStyle}>ID</Paragraph>
110-
<Paragraph
111-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
112-
>
110+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
113111
{pipeline.id}
114112
</Paragraph>
115113
</Box>
116114
<Box>
117115
<Paragraph style={headStyle}>NAME</Paragraph>
118-
<Paragraph
119-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
120-
>
116+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
121117
{pipeline.name}
122118
</Paragraph>
123119
</Box>
@@ -143,17 +139,13 @@ export const PipelineDetail: React.FC = () => {
143139
</Box>
144140
<Box>
145141
<Paragraph style={headStyle}>OWNER</Paragraph>
146-
<Paragraph
147-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
148-
>
149-
{pipeline.user.name}
142+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
143+
{pipeline?.user?.name}
150144
</Paragraph>
151145
</Box>
152146
<Box>
153147
<Paragraph style={headStyle}>CREATED AT</Paragraph>
154-
<Paragraph
155-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
156-
>
148+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
157149
{formatDateToDisplay(pipeline.created)}
158150
</Paragraph>
159151
</Box>

‎src/ui/layouts/pipelines/RunDetail/Configuration/index.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22

33
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
44
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -15,7 +15,7 @@ import { useService } from './useService';
1515

1616
export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
1717
const { downloadYamlFile, pipelineConfig } = useService({ runId });
18-
18+
const [hover, setHover] = useState(false);
1919
const dispatch = useDispatch();
2020
const handleCopy = () => {
2121
navigator.clipboard.writeText(pipelineConfig);
@@ -42,8 +42,22 @@ export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
4242
>
4343
Download
4444
</GhostButton>
45-
<GhostButton onClick={handleCopy}>
45+
{/* <GhostButton onClick={handleCopy}>
4646
<icons.copy color={iconColors.black} size={iconSizes.sm} />
47+
</GhostButton> */}
48+
<GhostButton
49+
onMouseEnter={() => {
50+
setHover(true);
51+
}}
52+
onMouseLeave={() => {
53+
setHover(false);
54+
}}
55+
onClick={handleCopy}
56+
>
57+
<icons.copy
58+
color={hover ? iconColors.white : iconColors.black}
59+
size={iconSizes.sm}
60+
/>
4761
</GhostButton>
4862
</Box>
4963
</FlexBox>

‎src/ui/layouts/pipelines/RunDetail/index.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -116,17 +116,13 @@ export const RunDetail: React.FC = () => {
116116
<Box style={boxStyle}>
117117
<Box>
118118
<Paragraph style={headStyle}>RUN ID</Paragraph>
119-
<Paragraph
120-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
121-
>
119+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
122120
{run.id}
123121
</Paragraph>
124122
</Box>
125123
<Box>
126124
<Paragraph style={headStyle}>RUN NAME</Paragraph>
127-
<Paragraph
128-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
129-
>
125+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
130126
{run.name}
131127
</Paragraph>
132128
</Box>
@@ -148,17 +144,13 @@ export const RunDetail: React.FC = () => {
148144
</Box>
149145
<Box>
150146
<Paragraph style={headStyle}>AUTHOR</Paragraph>
151-
<Paragraph
152-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
153-
>
154-
{run.user.name}
147+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
148+
{run?.user?.name}
155149
</Paragraph>
156150
</Box>
157151
<Box>
158152
<Paragraph style={headStyle}>CREATED AT</Paragraph>
159-
<Paragraph
160-
style={{ color: '#515151', marginTop: '10px', fontWeight: 'bold' }}
161-
>
153+
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
162154
{formatDateToDisplay(run.created)}
163155
</Paragraph>
164156
</Box>

‎src/ui/layouts/pipelines/RunsTable/HeaderCols/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -204,13 +204,13 @@ export const useHeaderCols = ({
204204
asc: (runs: TRun[]) =>
205205
_.orderBy(
206206
runs,
207-
(run: TRun) => new Date(run.kubeflowStartTime).getTime(),
207+
(run: TRun) => new Date(run.created).getTime(),
208208
['asc'],
209209
),
210210
desc: (runs: TRun[]) =>
211211
_.orderBy(
212212
runs,
213-
(run: TRun) => new Date(run.kubeflowStartTime).getTime(),
213+
(run: TRun) => new Date(run.created).getTime(),
214214
['desc'],
215215
),
216216
})}
@@ -417,7 +417,7 @@ export const useHeaderCols = ({
417417
activeSortingDirection={activeSortingDirection}
418418
>
419419
<Paragraph size="small" color="grey">
420-
{translate('status.text')}
420+
STATUS
421421
</Paragraph>
422422
</SortingHeader>
423423
),
@@ -531,13 +531,13 @@ export const useHeaderCols = ({
531531
asc: (runs: TRun[]) =>
532532
_.orderBy(
533533
runs,
534-
(run: TRun) => new Date(run.kubeflowStartTime).getTime(),
534+
(run: TRun) => new Date(run.created).getTime(),
535535
['asc'],
536536
),
537537
desc: (runs: TRun[]) =>
538538
_.orderBy(
539539
runs,
540-
(run: TRun) => new Date(run.kubeflowStartTime).getTime(),
540+
(run: TRun) => new Date(run.created).getTime(),
541541
['desc'],
542542
),
543543
})}

‎src/ui/layouts/pipelines/RunsTable/HeaderCols/useService.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export const useService = ({
9393
setActiveSortingDirection('DESC');
9494
}
9595
setActiveSorting(sorting);
96+
debugger;
9697
};
9798

9899
return {

‎src/ui/layouts/pipelines/RunsTable/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ export const RunsTable: React.FC<{
4343
setSelectedRunIds([]);
4444

4545
fromAllruns
46-
? history.push(routePaths.run.run.statistics(run.id))
46+
? history.push(routePaths.run.run.results(run.id))
4747
: history.push(
48-
routePaths.run.pipeline.statistics(
48+
routePaths.run.pipeline.results(
4949
run.id,
5050
run.pipeline_id ? run.pipeline_id : run.pipelineId,
5151
),

‎src/ui/layouts/pipelines/RunsTable/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export type Sorting =
33
| 'pipelineRunType'
44
| 'status'
55
| 'datasourceCommit'
6-
| 'createdAt';
6+
| 'createdAt'
7+
| 'created';
78

89
export type SortingDirection = 'ASC' | 'DESC';

‎src/ui/layouts/runs/RunDetail/Configuration/index.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22

33
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
44
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -15,7 +15,7 @@ import { useService } from './useService';
1515

1616
export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
1717
const { downloadYamlFile, pipelineConfig } = useService({ runId });
18-
18+
const [hover, setHover] = useState(false);
1919
const dispatch = useDispatch();
2020
const handleCopy = () => {
2121
navigator.clipboard.writeText(pipelineConfig);
@@ -42,8 +42,22 @@ export const Configuration: React.FC<{ runId: TId }> = ({ runId }) => {
4242
>
4343
Download
4444
</GhostButton>
45-
<GhostButton onClick={handleCopy}>
45+
{/* <GhostButton onClick={handleCopy}>
4646
<icons.copy color={iconColors.black} size={iconSizes.sm} />
47+
</GhostButton> */}
48+
<GhostButton
49+
onMouseEnter={() => {
50+
setHover(true);
51+
}}
52+
onMouseLeave={() => {
53+
setHover(false);
54+
}}
55+
onClick={handleCopy}
56+
>
57+
<icons.copy
58+
color={hover ? iconColors.white : iconColors.black}
59+
size={iconSizes.sm}
60+
/>
4761
</GhostButton>
4862
</Box>
4963
</FlexBox>

0 commit comments

Comments
 (0)