Skip to content

Commit

Permalink
bugfix(page laoding): do not show no items component (#250)
Browse files Browse the repository at this point in the history
  • Loading branch information
manojava-gk authored Sep 11, 2023
1 parent 6831855 commit ee2dbab
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 46 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
- Enable credential reset
- Serview Overview
- Added Sub menu for active services in service overview
- Page Loading and Error Component
- Show loading component and based on the response show "No items" component or ErrorBar component
- App management
- Fixed page break
- App Overview
Expand Down
9 changes: 4 additions & 5 deletions src/components/pages/AppOverview/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -272,9 +272,6 @@ export default function AppOverview() {
</div>
) : (
<>
{filterItem && filterItem.length === 0 && isSuccess && (
<NoItems />
)}
{!isSuccess && (
<ErrorBar
errorText={t('error.errorBar')}
Expand All @@ -283,11 +280,13 @@ export default function AppOverview() {
showButton={true}
/>
)}
{filterItem && filterItem.length > 0 && isSuccess && (
{filterItem && filterItem.length > 0 && isSuccess ? (
<AppOverviewList
filterItem={filterItem ?? []}
filterItem={filterItem}
showOverlay={showOverlay}
/>
) : (
<NoItems />
)}
</>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ import {
Cards,
LoadMoreButton,
CardItems,
ErrorBar,
} from '@catena-x/portal-shared-components'
import { serviceToCard } from 'features/apps/mapper'
import { Box } from '@mui/material'
import { fetchImageWithToken } from 'services/ImageService'
import {
ProvidedServices,
Expand All @@ -46,6 +46,7 @@ import debounce from 'lodash.debounce'
import { setServiceId } from 'features/serviceManagement/actions'
import { useDispatch } from 'react-redux'
import { setServiceReleaseActiveStep } from 'features/serviceManagement/slice'
import { Box, useTheme, CircularProgress } from '@mui/material'

enum ServiceSubMenuItems {
DEACTIVATE = 'deactivate',
Expand All @@ -65,8 +66,10 @@ export default function ServiceListOverview() {
statusFilter: '',
},
})
const { data } = useFetchProvidedServicesQuery(argsData)
const { data, isFetching, isSuccess, refetch } =
useFetchProvidedServicesQuery(argsData)
const dispatch = useDispatch()
const theme = useTheme()

const submenuOptions = [
{
Expand Down Expand Up @@ -194,48 +197,69 @@ export default function ServiceListOverview() {
</Box>
</div>
<section>
{items && items.length > 0 ? (
<div className="desc-card">
<Cards
items={items}
columns={4}
buttonText="Details"
variant="minimal"
filledBackground={false}
imageSize={'small'}
imageLoader={fetchImageWithToken}
showAddNewCard={false}
newButtonText={t('serviceoverview.addbtn')}
onNewCardButton={() =>
navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
}
onCardClick={(item: CardItems) => {
// TODO: workaround - fix CardItems type
const cardItem: any = item
if (
cardItem.status === ProvidedServiceStatusEnum.PENDING ||
cardItem.status === ProvidedServiceStatusEnum.CREATED
) {
dispatch(setServiceId(item.id ?? ''))
navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
} else {
navigate(`/${PAGES.SERVICE_DETAIL}/${item.id}`)
}
{isFetching ? (
<div style={{ textAlign: 'center' }}>
<CircularProgress
size={50}
sx={{
color: theme.palette.primary.main,
}}
subMenu={true}
submenuOptions={submenuOptions}
submenuClick={(sortMenu: string, id: string | undefined) => {
sortMenu === ServiceSubMenuItems.DEACTIVATE &&
navigate(`/${PAGES.DEACTIVATE}/${id}`, {
state: items,
})
return undefined
}}
tooltipText={t('serviceoverview.submenuNotAvailable')}
/>
</div>
) : (
<NoItems />
<>
{!isSuccess && (
<ErrorBar
errorText={t('error.errorBar')}
handleButton={refetch}
buttonText={t('error.tryAgain')}
showButton={true}
/>
)}
{items && items.length > 0 && isSuccess ? (
<div className="desc-card">
<Cards
items={items}
columns={4}
buttonText="Details"
variant="minimal"
filledBackground={false}
imageSize={'small'}
imageLoader={fetchImageWithToken}
showAddNewCard={false}
newButtonText={t('serviceoverview.addbtn')}
onNewCardButton={() =>
navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
}
onCardClick={(item: CardItems) => {
// TODO: workaround - fix CardItems type
const cardItem: any = item
if (
cardItem.status === ProvidedServiceStatusEnum.PENDING ||
cardItem.status === ProvidedServiceStatusEnum.CREATED
) {
dispatch(setServiceId(item.id ?? ''))
navigate(`/${PAGES.SERVICERELEASEPROCESS}/form`)
} else {
navigate(`/${PAGES.SERVICE_DETAIL}/${item.id}`)
}
}}
subMenu={true}
submenuOptions={submenuOptions}
submenuClick={(sortMenu: string, id: string | undefined) => {
sortMenu === ServiceSubMenuItems.DEACTIVATE &&
navigate(`/${PAGES.DEACTIVATE}/${id}`, {
state: items,
})
return undefined
}}
tooltipText={t('serviceoverview.submenuNotAvailable')}
/>
</div>
) : (
<NoItems />
)}
</>
)}
</section>
<div
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared/templates/Subscription/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -535,7 +535,7 @@ export default function Subscription({
})}
</div>
)}
{!subscriptions ? (
{isFetching ? (
<div className="loading-progress">
<CircularProgress
size={50}
Expand Down

0 comments on commit ee2dbab

Please sign in to comment.