Skip to content

Commit 5cb7371

Browse files
amitamrutiyaamitamrutiya
committed
feat: some component from meshery to sistent
Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
1 parent f6922ce commit 5cb7371

5 files changed

Lines changed: 217 additions & 3 deletions

File tree

‎src/custom/FlipCard/FlipCard.tsx‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,16 @@ export type FlipCardProps = {
77
onClick?: () => void;
88
onShow?: () => void;
99
children: [React.ReactNode, React.ReactNode];
10+
disableFlip?: boolean;
1011
};
1112

13+
/**
14+
* Helper function to get the front or back child component from the children array
15+
* @param children Array containing exactly two child components
16+
* @param key Index to retrieve (0 for front, 1 for back)
17+
* @throws Error if children is undefined or doesn't contain exactly two components
18+
* @returns The selected child component
19+
*/
1220
function GetChild(children: [React.ReactNode, React.ReactNode], key: number) {
1321
if (!children) throw Error('FlipCard requires exactly two child components');
1422
if (children.length != 2) throw Error('FlipCard requires exactly two child components');
@@ -42,7 +50,31 @@ const BackContent = styled('div')({
4250
wordBreak: 'break-word'
4351
});
4452

45-
export function FlipCard({ duration = 500, onClick, onShow, children }: FlipCardProps) {
53+
/**
54+
* A card component that provides a flipping animation between two content faces
55+
*
56+
* @component
57+
* @param props.duration - Animation duration in milliseconds (default: 500)
58+
* @param props.onClick - Callback function triggered on card click
59+
* @param props.onShow - Additional callback function triggered when card shows new face
60+
* @param props.children - Array of exactly two child components (front and back)
61+
* @param props.disableFlip - When true, prevents the card from flipping (default: false)
62+
*
63+
* @example
64+
* ```tsx
65+
* <FlipCard>
66+
* <div>Front Content</div>
67+
* <div>Back Content</div>
68+
* </FlipCard>
69+
* ```
70+
*/
71+
export function FlipCard({
72+
duration = 500,
73+
onClick,
74+
onShow,
75+
children,
76+
disableFlip = false
77+
}: FlipCardProps) {
4678
const [flipped, setFlipped] = React.useState(false);
4779
const [activeBack, setActiveBack] = React.useState(false);
4880

@@ -72,6 +104,7 @@ export function FlipCard({ duration = 500, onClick, onShow, children }: FlipCard
72104
return (
73105
<Card
74106
onClick={() => {
107+
if (disableFlip) return;
75108
setFlipped((flipped) => !flipped);
76109
onClick && onClick();
77110
onShow && onShow();

‎src/custom/Workspaces/WorkspaceTransferButton.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import { SyncAlt as SyncAltIcon } from '@mui/icons-material';
2+
import { Grid, Tooltip, Typography } from '../../base';
3+
import { useTheme } from '../../theme';
4+
import { formatShortDate, formatShortDateTime } from './helper';
5+
import { PopupButton, Record, TabCount, TabTitle } from './styles';
6+
7+
interface TransferButtonProps {
8+
title: string;
9+
count: number;
10+
onAssign: () => void;
11+
disabled: boolean;
12+
}
13+
14+
interface RedirectButtonProps {
15+
title: string;
16+
count: number;
17+
disabled?: boolean;
18+
}
19+
20+
export const TransferButton: React.FC<TransferButtonProps> = ({
21+
title,
22+
count,
23+
onAssign,
24+
disabled
25+
}) => {
26+
const theme = useTheme();
27+
return (
28+
<PopupButton
29+
onClick={onAssign}
30+
disabled={disabled}
31+
color="primary"
32+
sx={{
33+
color: theme.palette.background.neutral?.default,
34+
backgroundColor: theme.palette.background.constant?.table,
35+
margin: '0px 0px 10px',
36+
padding: '20px 10px',
37+
'&:hover': {
38+
backgroundColor: theme.palette.background.constant?.table,
39+
boxShadow: 'none'
40+
}
41+
}}
42+
>
43+
<Grid>
44+
<TabCount textColor={theme.palette.text.default}>{count}</TabCount>
45+
<TabTitle textColor={theme.palette.text.default}>{title}</TabTitle>
46+
<SyncAltIcon sx={{ position: 'absolute', top: '10px', right: '10px' }} />
47+
</Grid>
48+
</PopupButton>
49+
);
50+
};
51+
52+
export const RedirectButton: React.FC<RedirectButtonProps> = ({
53+
title,
54+
count,
55+
disabled = true
56+
}) => {
57+
return (
58+
<PopupButton disabled={disabled} color="primary" sx={{ boxShadow: 'none' }}>
59+
<Grid>
60+
<TabCount>{count}</TabCount>
61+
<TabTitle>{title}</TabTitle>
62+
{/* <ArrowForward /> */}
63+
</Grid>
64+
</PopupButton>
65+
);
66+
};
67+
68+
interface RecordRowProps {
69+
title: string;
70+
name: string;
71+
date?: string | Date;
72+
}
73+
74+
export const RecordRow: React.FC<RecordRowProps> = ({ title, name, date }) => {
75+
const theme = useTheme();
76+
77+
return (
78+
<Record>
79+
<Grid xs={10} sx={{ display: 'flex', maxHeight: '140px' }}>
80+
<Typography
81+
sx={{
82+
fontSize: 14,
83+
textAlign: 'left',
84+
color: theme.palette.background.constant?.white,
85+
maxWidth: 'max-content',
86+
overflowX: 'hidden'
87+
}}
88+
>
89+
{title}
90+
</Typography>
91+
<Typography
92+
sx={{ ml: 1, fontStyle: 'italic', color: theme.palette.background.brand?.default }}
93+
>
94+
{name}
95+
</Typography>
96+
</Grid>
97+
<Grid xs={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
98+
<Tooltip title={date ? formatShortDateTime(date) : ''} placement="top">
99+
<Typography
100+
sx={{
101+
fontSize: 14,
102+
fontStyle: 'italic',
103+
color: `${theme.palette.text.disabled}`,
104+
paddingRight: '12px'
105+
}}
106+
>
107+
{date ? formatShortDate(date) : '-'}
108+
</Typography>
109+
</Tooltip>
110+
</Grid>
111+
</Record>
112+
);
113+
};

‎src/custom/Workspaces/helper.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,65 @@ export const parseDeletionTimestamp = (data: {
1717
return DEFAULT_DATE;
1818
}
1919
};
20+
21+
/**
22+
* Formats a date into a short date-time string (e.g., "Jan 1, 2024, 09:30 AM")
23+
*
24+
* @param {Date | string} date - The date to format. Can be a Date object or date string
25+
* @returns {string} Formatted date string in the format "MMM D, YYYY, HH:MM AM/PM"
26+
*
27+
* @example
28+
* formatShortDateTime("2024-01-01T09:30:00") // Returns "Jan 1, 2024, 09:30 AM"
29+
* formatShortDateTime(new Date()) // Returns current date-time in short format
30+
*
31+
* Generated by Copilot
32+
*/
33+
export const formatShortDateTime = (date: Date | string): string => {
34+
return new Date(date).toLocaleDateString('en-US', {
35+
day: 'numeric',
36+
month: 'short',
37+
year: 'numeric',
38+
hour: '2-digit',
39+
minute: '2-digit'
40+
});
41+
};
42+
43+
/**
44+
* Formats a date into a short date string (e.g., "Jan 1, 2024")
45+
*
46+
* @param {Date | string} date - The date to format. Can be a Date object or date string
47+
* @returns {string} Formatted date string in the format "MMM D, YYYY"
48+
*
49+
* @example
50+
* formatShortDate("2024-01-01") // Returns "Jan 1, 2024"
51+
* formatShortDate(new Date()) // Returns current date in short format
52+
*
53+
* Generated by Copilot
54+
*/
55+
export const formatShortDate = (date: Date | string): string => {
56+
return new Date(date).toLocaleDateString('en-US', {
57+
day: 'numeric',
58+
month: 'short',
59+
year: 'numeric'
60+
});
61+
};
62+
63+
/**
64+
* Formats a date into a long date string (e.g., "January 1, 2024")
65+
*
66+
* @param {Date | string} date - The date to format. Can be a Date object or date string
67+
* @returns {string} Formatted date string in the format "MMMM D, YYYY"
68+
*
69+
* @example
70+
* formattoLongDate("2024-01-01") // Returns "January 1, 2024"
71+
* formattoLongDate(new Date()) // Returns current date in long format
72+
*
73+
* Generated by Copilot
74+
*/
75+
export const formattoLongDate = (date: Date | string): string => {
76+
return new Date(date).toLocaleDateString('en-US', {
77+
day: 'numeric',
78+
month: 'long',
79+
year: 'numeric'
80+
});
81+
};

‎src/custom/Workspaces/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import AssignmentModal from './AssignmentModal';
22
import DesignTable from './DesignTable';
33
import EnvironmentTable from './EnvironmentTable';
4+
import WorkspaceCard from './WorkspaceCard';
45
import WorkspaceTeamsTable from './WorkspaceTeamsTable';
56
import WorkspaceViewsTable from './WorkspaceViewsTable';
67
import useDesignAssignment from './hooks/useDesignAssignment';
78
import useEnvironmentAssignment from './hooks/useEnvironmentAssignment';
89
import useTeamAssignment from './hooks/useTeamAssignment';
910
import useViewAssignment from './hooks/useViewsAssignment';
11+
import { L5DeleteIcon, L5EditIcon } from './styles';
1012

1113
export {
1214
AssignmentModal,
1315
DesignTable,
1416
EnvironmentTable,
17+
L5DeleteIcon,
18+
L5EditIcon,
19+
WorkspaceCard,
1520
WorkspaceTeamsTable,
1621
WorkspaceViewsTable,
1722
useDesignAssignment,

‎src/icons/Delete/DeleteIcon.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,15 @@ export const DeleteIcon = ({
88
style,
99
...props
1010
}: IconProps): JSX.Element => {
11+
const _finalFill = style?.fill || fill;
12+
1113
return (
1214
<svg
1315
xmlns="http://www.w3.org/2000/svg"
1416
viewBox="0 0 24 24"
1517
width={width}
1618
height={height}
17-
fill={fill}
18-
style={style}
19+
fill={_finalFill}
1920
{...props}
2021
>
2122
<path d="M0 0h24v24H0z" fill="none" />

0 commit comments

Comments
 (0)