Skip to content

Commit 588d510

Browse files
amitamrutiyaamitamrutiya
authored
Merge pull request #854 from amitamrutiya/fix-build
Fix catalog bug and ui theme color issue
2 parents 12bded0 + 8f7ab6f commit 588d510

15 files changed

+94
-73
lines changed

‎src/custom/CatalogDesignTable/CatalogDesignTable.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface CatalogDesignsTableProps {
2525
setPage: (page: number) => void;
2626
columnVisibility: Record<string, boolean>;
2727
colViews: ColView[];
28+
rowsPerPageOptions?: number[];
2829
handleBulkDeleteModal: (patterns: Pattern[], modalRef: React.RefObject<PromptRef>) => void;
2930
setSearch?: (search: string) => void;
3031
handleBulkpatternsDataUnpublishModal: (
@@ -49,6 +50,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
4950
colViews = [],
5051
handleBulkDeleteModal,
5152
setSearch,
53+
rowsPerPageOptions = [10, 25, 50, 100],
5254
handleBulkpatternsDataUnpublishModal
5355
}) => {
5456
const theme = useTheme();
@@ -144,10 +146,9 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
144146
page,
145147
elevation: 0,
146148
sortOrder: {
147-
name: 'updated_at',
148-
direction: 'desc'
149+
name: sortOrder.split(' ')[0],
150+
direction: sortOrder.split(' ')[1]
149151
},
150-
151152
onTableChange: handleTableChange,
152153
customToolbarSelect: _.isNil(filter)
153154
? (selected: any) => (
@@ -175,6 +176,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
175176
filter,
176177
totalCount,
177178
pageSize,
179+
sortOrder,
178180
page,
179181
handleTableChange,
180182
patterns,
@@ -195,6 +197,7 @@ export const CatalogDesignsTable: React.FC<CatalogDesignsTableProps> = ({
195197
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
196198
//@ts-ignore
197199
data={patterns || []}
200+
rowsPerPageOptions={rowsPerPageOptions}
198201
options={options}
199202
colViews={colViews}
200203
tableCols={processedColumns}

‎src/custom/CatalogDesignTable/DesignTableColumnConfig.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const createDesignsColumnsConfig = ({
7272
},
7373
{
7474
name: 'name',
75-
label: 'Pattern Name',
75+
label: 'Name',
7676
options: {
7777
filter: false,
7878
sort: true,

‎src/custom/CatalogDetail/RelatedDesigns.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ const RelatedDesigns: React.FC<RelatedDesignsProps> = ({
3636
);
3737

3838
if (!filteredPatternsPerUser?.length) return null;
39-
39+
const organizationName = fetchingOrgError || !orgName ? 'Unknown Organization' : orgName;
4040
return (
4141
<AdditionalContainer>
4242
<ContentHeading>
4343
<h2 style={{ margin: '0', textTransform: 'uppercase' }}>
4444
Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '}
45-
{fetchingOrgError ? '' : `under ${orgName}`}
45+
{fetchingOrgError ? '' : `under ${organizationName}`}
4646
</h2>
4747
</ContentHeading>
4848
<DesignCardContainer>

‎src/custom/CatalogDetail/SocialSharePopper.tsx

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Lock, Public } from '@mui/icons-material';
12
import { Box, IconButton, Menu, MenuItem } from '@mui/material';
23
import React, { useState } from 'react';
34
import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
@@ -7,13 +8,9 @@ import { useTheme } from '../../theme';
78
import { Pattern } from '../CustomCatalog/CustomCard';
89
import { CustomTooltip } from '../CustomTooltip';
910
import { ErrorBoundary } from '../ErrorBoundary';
10-
import {
11-
CopyShareIconWrapper,
12-
ShareButton,
13-
ShareButtonGroup,
14-
ShareSideButton,
15-
VisibilityChip
16-
} from './style';
11+
import { VisibilityChipMenu } from '../VisibilityChipMenu';
12+
import { VIEW_VISIBILITY } from '../VisibilityChipMenu/VisibilityChipMenu';
13+
import { CopyShareIconWrapper, ShareButton, ShareButtonGroup, ShareSideButton } from './style';
1714

1815
interface SocialSharePopperProps {
1916
details: Pattern;
@@ -53,14 +50,15 @@ const SocialSharePopper: React.FC<SocialSharePopperProps> = ({
5350
return (
5451
<ErrorBoundary>
5552
<CopyShareIconWrapper style={{ marginBottom: '2rem' }}>
56-
<VisibilityChip
57-
style={{
58-
color: theme.palette.text.default
59-
}}
60-
>
61-
{details?.visibility}
62-
</VisibilityChip>
63-
53+
<VisibilityChipMenu
54+
value={details?.visibility as VIEW_VISIBILITY}
55+
onChange={() => {}}
56+
enabled={false}
57+
options={[
58+
[VIEW_VISIBILITY.PUBLIC, Public],
59+
[VIEW_VISIBILITY.PRIVATE, Lock]
60+
]}
61+
/>
6462
{showShareAction ? (
6563
<ShareButtonGroup variant="contained">
6664
<CustomTooltip title="Change access and visibility">

‎src/custom/CatalogDetail/style.tsx

+11-16
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Button, ButtonGroup, Link, ListItemButton, Paper, Typography } from '../../base';
1+
import { Button, ButtonGroup, Link, ListItemButton, Typography } from '../../base';
22
import { styled } from '../../theme';
33
import { Theme } from './types';
44

5-
export const StyledActionWrapper = styled(Paper)(() => ({
5+
export const StyledActionWrapper = styled('div')(({ theme }) => ({
66
boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
77
justifyContent: 'center',
88
width: '100%',
@@ -12,7 +12,8 @@ export const StyledActionWrapper = styled(Paper)(() => ({
1212
flexDirection: 'column',
1313
gap: '1rem',
1414
padding: '0.6rem',
15-
alignItems: 'center'
15+
alignItems: 'center',
16+
backgroundColor: theme.palette.background.default
1617
}));
1718

1819
interface ActionButtonProps {
@@ -139,7 +140,8 @@ export const ContentDetailsPoints = styled(Typography)(() => ({
139140
fontFamily: 'inherit'
140141
}));
141142

142-
export const MetricsSection = styled('div')(() => ({
143+
export const MetricsSection = styled('div')(({ theme }) => ({
144+
backgroundColor: theme.palette.background.default,
143145
padding: '1.1rem',
144146
marginTop: '0.5rem',
145147
display: 'flex',
@@ -152,7 +154,8 @@ export const MetricsSection = styled('div')(() => ({
152154
}
153155
}));
154156

155-
export const MetricsContainer = styled('div')(() => ({
157+
export const MetricsContainer = styled('div')(({ theme }) => ({
158+
backgroundColor: theme.palette.background.default,
156159
display: 'flex',
157160
flexDirection: 'column',
158161
justifyContent: 'center',
@@ -236,13 +239,14 @@ export const AdditionalContainer = styled('div')(({ theme }) => ({
236239
borderRadius: '0.4rem'
237240
}));
238241

239-
export const DesignCardContainer = styled('div')(() => ({
242+
export const DesignCardContainer = styled('div')(({ theme }) => ({
240243
display: 'flex',
241244
flexWrap: 'wrap',
242245
flex: '0 0 75%',
243246
gap: '2rem',
244247
justifyContent: 'space-around',
245-
height: 'fit-content'
248+
height: 'fit-content',
249+
backgroundColor: theme.palette.background.default
246250
}));
247251

248252
export const CopyShareIconWrapper = styled(ContentHeading)(() => ({
@@ -251,15 +255,6 @@ export const CopyShareIconWrapper = styled(ContentHeading)(() => ({
251255
width: 'fit-content'
252256
}));
253257

254-
export const VisibilityChip = styled('div')(() => ({
255-
borderRadius: '0.5rem',
256-
border: '1px solid gray',
257-
padding: '0.2rem 0.5rem',
258-
textTransform: 'capitalize',
259-
color: '#1a1a1acc',
260-
width: 'fit-content'
261-
}));
262-
263258
export const RedirectLink = styled(Link)(({ theme }) => ({
264259
color: theme.palette.background.brand?.default,
265260
textDecoration: 'none',

‎src/custom/CustomTooltip/customTooltip.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Tooltip, type TooltipProps } from '@mui/material';
21
import React from 'react';
2+
import { Tooltip, TooltipProps } from '../../base';
33
import { WHITE } from '../../theme';
44
import { RenderMarkdownTooltip } from '../Markdown';
55

‎src/custom/ResponsiveDataTable.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export const DataTableEllipsisMenu: React.FC<{
5757
open={Boolean(anchorEl)}
5858
onClose={handleClose}
5959
sx={{
60+
fontFamily: theme?.typography.fontFamily,
6061
'& .MuiPaper-root': {
6162
backgroundColor: theme?.palette.background.default ?? 'white'
6263
}
@@ -122,6 +123,9 @@ export const DataTableEllipsisMenu: React.FC<{
122123

123124
const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
124125
createTheme({
126+
typography: {
127+
fontFamily: theme.typography.fontFamily
128+
},
125129
components: {
126130
MuiPaper: {
127131
styleOverrides: {
@@ -134,7 +138,6 @@ const dataTableTheme = (theme: Theme, backgroundColor?: string) =>
134138
MuiTable: {
135139
styleOverrides: {
136140
root: {
137-
// border: `2px solid ${theme.palette.border.normal}`,
138141
width: '-webkit-fill-available',
139142
'@media (max-width: 500px)': {
140143
wordWrap: 'break-word'

‎src/custom/SearchBar.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { TooltipIcon } from './TooltipIconButton';
1111

1212
const customTheme = (theme: Theme) =>
1313
createTheme({
14+
typography: {
15+
fontFamily: theme.typography.fontFamily
16+
},
1417
components: {
1518
MuiTextField: {
1619
styleOverrides: {

‎src/custom/StyledSearchBar/style.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { styled } from '@mui/material';
22
import { InputAdornment, OutlinedInput } from '../../base';
33

44
export const StyledSearchInput = styled(OutlinedInput)(({ style, theme }) => ({
5+
fontFamily: theme.typography.fontFamily,
56
width: '100%',
67
'@media (max-width: 590px)': {
78
marginLeft: '0.25rem',

‎src/custom/TeamTable/TeamTableConfiguration.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,8 @@ export default function TeamTableConfiguration({
111111
['name', 'xs'],
112112
['description', 'm'],
113113
['owner', 'l'],
114-
['created_at', 'xl'],
114+
['created_at', 'na'],
115+
['updated_at', 'xl'],
115116
['deleted_at', 'na'],
116117
['actions', 'xs']
117118
];
@@ -165,6 +166,16 @@ export default function TeamTableConfiguration({
165166
sortDescFirst: true
166167
}
167168
},
169+
{
170+
name: 'updated_at',
171+
label: 'Updated At',
172+
options: {
173+
filter: false,
174+
sort: true,
175+
searchable: false,
176+
sortDescFirst: true
177+
}
178+
},
168179
{
169180
name: 'deleted_at',
170181
label: 'Deleted At',
@@ -290,10 +301,7 @@ export default function TeamTableConfiguration({
290301
backgroundColor: '#f3f1f1'
291302
}
292303
},
293-
sortOrder: {
294-
name: 'created_at',
295-
direction: 'desc'
296-
},
304+
297305
viewColumns: false,
298306
search: false,
299307
rowsExpanded: [ExpandedRowIdx],

‎src/custom/UsersTable/UsersTable.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const UsersTable: React.FC<UsersTableProps> = ({
7070
}) => {
7171
const [page, setPage] = useState<number>(0);
7272
const [pageSize, setPageSize] = useState<number>(10);
73-
const [sortOrder, setSortOrder] = useState<string>('');
73+
const [sortOrder, setSortOrder] = useState<string>('last_login_time desc');
7474
const [search, setSearch] = useState<string>('');
7575
const availableRoles: string[] = [];
7676
const { handleError, handleSuccess, handleInfo } = useNotificationHandlers();
@@ -176,8 +176,8 @@ const UsersTable: React.FC<UsersTableProps> = ({
176176
elevation: 0,
177177
serverSide: true,
178178
sortOrder: {
179-
name: 'last_login_time',
180-
direction: 'desc'
179+
name: sortOrder.split(' ')[0],
180+
direction: sortOrder.split(' ')[1]
181181
},
182182
onTableChange: (action: string, tableState: any) => {
183183
const sortInfo = tableState.announceText ? tableState.announceText.split(' : ') : [];

‎src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx

+31-21
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
2-
import { Theme } from '@mui/material';
2+
import { Theme, useTheme } from '@mui/material';
33
import { MouseEvent, useState } from 'react';
44
import { Button, Menu, MenuItem } from '../../base';
55
import { iconXSmall } from '../../constants/iconsSizes';
66
import { ALICE_BLUE, CHINESE_SILVER, NOT_FOUND, styled } from '../../theme';
77

8+
export const VIEW_VISIBILITY = {
9+
PUBLIC: 'public',
10+
PRIVATE: 'private',
11+
PUBLISHED: 'published'
12+
} as const;
13+
14+
export type VIEW_VISIBILITY = (typeof VIEW_VISIBILITY)[keyof typeof VIEW_VISIBILITY];
15+
816
interface VisibilityChipMenuProps {
9-
value: string;
17+
value: VIEW_VISIBILITY;
1018
onChange: (value: string) => void;
1119
options: [string, React.ElementType][];
1220
enabled: boolean;
@@ -42,24 +50,25 @@ const StyledButton = styled(Button)(() => ({
4250
width: '100%'
4351
}));
4452

45-
const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({
46-
paddingLeft: '0.3rem',
47-
height: '1.5rem',
48-
paddingRight: enabled ? '0' : '0.3rem',
49-
borderRadius: '0.25rem',
50-
border: `1px solid ${NOT_FOUND}`,
51-
background:
52-
theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
53-
54-
textTransform: 'uppercase',
55-
color: theme?.palette.text.default,
56-
display: 'flex',
57-
justifyContent: 'center',
58-
alignItems: 'center',
59-
width: '3.8rem',
60-
fontSize: '0.75rem',
61-
fontFamily: theme?.typography.fontFamily
62-
}));
53+
const StyledDiv = styled('div')(
54+
({ theme, enabled, type }: { theme: Theme; enabled: boolean; type: VIEW_VISIBILITY }) => ({
55+
paddingLeft: '0.3rem',
56+
height: '1.5rem',
57+
paddingRight: enabled ? '0' : '0.3rem',
58+
borderRadius: '0.25rem',
59+
border: `1px solid ${NOT_FOUND}`,
60+
background:
61+
theme?.palette.mode === 'light' ? ALICE_BLUE : theme?.palette.background.constant?.table,
62+
textTransform: 'uppercase',
63+
color: theme?.palette.text.default,
64+
display: 'flex',
65+
justifyContent: 'center',
66+
alignItems: 'center',
67+
width: type !== 'published' ? '3.8rem' : 'auto',
68+
fontSize: '0.75rem',
69+
fontFamily: theme?.typography.fontFamily
70+
})
71+
);
6372

6473
const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
6574
textTransform: 'capitalize',
@@ -92,14 +101,15 @@ const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
92101
onChange(value);
93102
close(e);
94103
};
104+
const theme = useTheme();
95105
return (
96106
<>
97107
<StyledButton
98108
disabled={!enabled}
99109
onClick={handleOpen}
100110
data-testid={`design-visibility-${value.toLowerCase()}`}
101111
>
102-
<StyledDiv enabled={enabled}>
112+
<StyledDiv theme={theme} enabled={enabled} type={value}>
103113
<span style={{ fontSize: '0.7rem' }}>{value}</span>
104114
{enabled && <ArrowDropDownIcon style={{ ...iconXSmall }} />}
105115
</StyledDiv>

‎src/custom/Workspaces/DesignTable.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const DesignTable: React.FC<DesignTableProps> = ({
104104
const modalRef = useRef(null);
105105
const [page, setPage] = useState<number>(0);
106106
const [pageSize, setPageSize] = useState<number>(10);
107-
const [sortOrder, setSortOrder] = useState<string>('');
107+
const [sortOrder, setSortOrder] = useState<string>('updated_at desc');
108108
const [isSearchExpanded, setIsSearchExpanded] = useState(false);
109109

110110
const handlePublishModal = (pattern: Pattern): void => {

0 commit comments

Comments
 (0)