chore: refactor workspace homepage loading state (#27433)
## Description This PR refactors the rendering of loading state of application in the workspace homepage to facilitate the packages loading state in EE. Fixes #26883 In this PR 2 new components are introduced 1. CardList - This component renders the title and couple of wrapper components and accepts a list of cards as children. This component is separated out as it is used at 3 different places (ApplicationCardList, ResourceListLoader and PackageCardList - EE) 2. ResourceListLoader - The purpose of this is just to show the loading state of the applications. This helps decouple the loading state which was deeply embedded inside the ApplicationCardList and conditionally renders based on application and package fetching state. #### Note to QA This PR introduces no visual changes to the workspace homepage. Under the hood it just modifies how the loader shows, so a manual verification can be done on that. #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change - Chore (housekeeping or task changes that don't impact user perception) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
This commit is contained in:
ashit-rath
GitHub
parent
c275a8f83f
commit
f29cefaf0b
|
|
@ -3,13 +3,8 @@ import { Button } from "design-system";
|
|||
import { importSvg } from "design-system-old";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
CardListContainer,
|
||||
CardListWrapper,
|
||||
PaddingWrapper,
|
||||
ResourceHeading,
|
||||
Space,
|
||||
} from "pages/Applications/CommonElements";
|
||||
import CardList from "pages/Applications/CardList";
|
||||
import { PaddingWrapper } from "pages/Applications/CommonElements";
|
||||
import {
|
||||
getIsCreatingApplicationByWorkspaceId,
|
||||
getIsFetchingApplications,
|
||||
|
|
@ -55,51 +50,51 @@ function ApplicationCardList({
|
|||
const isFetchingApplications = useSelector(getIsFetchingApplications);
|
||||
|
||||
return (
|
||||
<CardListContainer isMobile={isMobile}>
|
||||
<ResourceHeading isLoading={isFetchingApplications}>Apps</ResourceHeading>
|
||||
<Space />
|
||||
<CardListWrapper isMobile={isMobile} key={workspaceId}>
|
||||
{applications.map((application: any) => {
|
||||
return (
|
||||
<PaddingWrapper isMobile={isMobile} key={application.id}>
|
||||
<ApplicationCard
|
||||
application={application}
|
||||
delete={deleteApplication}
|
||||
enableImportExport={enableImportExport}
|
||||
isFetchingApplications={isFetchingApplications}
|
||||
isMobile={isMobile}
|
||||
key={application.id}
|
||||
permissions={{
|
||||
hasCreateNewApplicationPermission,
|
||||
hasManageWorkspacePermissions,
|
||||
canInviteToWorkspace,
|
||||
}}
|
||||
update={updateApplicationDispatch}
|
||||
workspaceId={workspaceId}
|
||||
/>
|
||||
</PaddingWrapper>
|
||||
);
|
||||
})}
|
||||
{applications.length === 0 && (
|
||||
<NoAppsFound>
|
||||
<NoAppsFoundIcon />
|
||||
<span>There’s nothing inside this workspace</span>
|
||||
{/* below component is duplicate. This is because of cypress test were failing */}
|
||||
{hasCreateNewApplicationPermission && (
|
||||
<Button
|
||||
className="t--new-button createnew"
|
||||
isLoading={isCreatingApplication}
|
||||
onClick={() => onClickAddNewButton(workspaceId)}
|
||||
size="md"
|
||||
startIcon={"plus"}
|
||||
>
|
||||
New
|
||||
</Button>
|
||||
)}
|
||||
</NoAppsFound>
|
||||
)}
|
||||
</CardListWrapper>
|
||||
</CardListContainer>
|
||||
<CardList
|
||||
isLoading={isFetchingApplications}
|
||||
isMobile={isMobile}
|
||||
title="Apps"
|
||||
>
|
||||
{applications.map((application: any) => {
|
||||
return (
|
||||
<PaddingWrapper isMobile={isMobile} key={application.id}>
|
||||
<ApplicationCard
|
||||
application={application}
|
||||
delete={deleteApplication}
|
||||
enableImportExport={enableImportExport}
|
||||
isFetchingApplications={isFetchingApplications}
|
||||
isMobile={isMobile}
|
||||
key={application.id}
|
||||
permissions={{
|
||||
hasCreateNewApplicationPermission,
|
||||
hasManageWorkspacePermissions,
|
||||
canInviteToWorkspace,
|
||||
}}
|
||||
update={updateApplicationDispatch}
|
||||
workspaceId={workspaceId}
|
||||
/>
|
||||
</PaddingWrapper>
|
||||
);
|
||||
})}
|
||||
{applications.length === 0 && (
|
||||
<NoAppsFound>
|
||||
<NoAppsFoundIcon />
|
||||
<span>There’s nothing inside this workspace</span>
|
||||
{/* below component is duplicate. This is because of cypress test were failing */}
|
||||
{hasCreateNewApplicationPermission && (
|
||||
<Button
|
||||
className="t--new-button createnew"
|
||||
isLoading={isCreatingApplication}
|
||||
onClick={() => onClickAddNewButton(workspaceId)}
|
||||
size="md"
|
||||
startIcon={"plus"}
|
||||
>
|
||||
New
|
||||
</Button>
|
||||
)}
|
||||
</NoAppsFound>
|
||||
)}
|
||||
</CardList>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
58
app/client/src/ce/pages/Applications/ResourceListLoader.tsx
Normal file
58
app/client/src/ce/pages/Applications/ResourceListLoader.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React from "react";
|
||||
import { noop } from "lodash";
|
||||
|
||||
import Card from "components/common/Card";
|
||||
import CardList from "pages/Applications/CardList";
|
||||
import { Button } from "design-system";
|
||||
import { PaddingWrapper } from "pages/Applications/CommonElements";
|
||||
import type { ApplicationPayload } from "@appsmith/constants/ReduxActionConstants";
|
||||
|
||||
type ResourcesLoaderProps = {
|
||||
isMobile: boolean;
|
||||
resources: ApplicationPayload[];
|
||||
};
|
||||
|
||||
const DEFAULT_BACKGROUND_COLOR = "#9747FF1A";
|
||||
const DEFAULT_ICON = "book";
|
||||
|
||||
function ResourceListLoader({ isMobile, resources }: ResourcesLoaderProps) {
|
||||
return (
|
||||
<CardList isLoading isMobile={isMobile} title="Apps">
|
||||
{resources.map((resource: any) => {
|
||||
return (
|
||||
<PaddingWrapper isMobile={isMobile} key={resource.id}>
|
||||
<Card
|
||||
backgroundColor={DEFAULT_BACKGROUND_COLOR}
|
||||
contextMenu={null}
|
||||
editedByText=""
|
||||
hasReadPermission
|
||||
icon={DEFAULT_ICON}
|
||||
isContextMenuOpen={false}
|
||||
isFetching
|
||||
isMobile={isMobile}
|
||||
moreActionItems={[]}
|
||||
primaryAction={noop}
|
||||
setShowOverlay={noop}
|
||||
showGitBadge={false}
|
||||
showOverlay={false}
|
||||
testId="t--package-card"
|
||||
title={resource.name}
|
||||
titleTestId="t--app-card-name"
|
||||
>
|
||||
<Button
|
||||
className="t--package-edit-link"
|
||||
href={"/"}
|
||||
size="md"
|
||||
startIcon={"pencil-line"}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Card>
|
||||
</PaddingWrapper>
|
||||
);
|
||||
})}
|
||||
</CardList>
|
||||
);
|
||||
}
|
||||
|
||||
export default ResourceListLoader;
|
||||
|
|
@ -98,6 +98,7 @@ import ApplicationCardList from "@appsmith/pages/Applications/ApplicationCardLis
|
|||
import { usePackage } from "@appsmith/pages/Applications/helpers";
|
||||
import PackageCardList from "@appsmith/pages/Applications/PackageCardList";
|
||||
import WorkspaceAction from "@appsmith/pages/Applications/WorkspaceAction";
|
||||
import ResourceListLoader from "@appsmith/pages/Applications/ResourceListLoader";
|
||||
|
||||
export const { cloudHosting } = getAppsmithConfigs();
|
||||
|
||||
|
|
@ -710,20 +711,28 @@ export function ApplicationsSection(props: any) {
|
|||
</WorkspaceShareUsers>
|
||||
)}
|
||||
</WorkspaceDropDown>
|
||||
<ApplicationCardList
|
||||
applications={applications}
|
||||
canInviteToWorkspace={canInviteToWorkspace}
|
||||
deleteApplication={deleteApplication}
|
||||
enableImportExport={enableImportExport}
|
||||
hasCreateNewApplicationPermission={
|
||||
hasCreateNewApplicationPermission
|
||||
}
|
||||
hasManageWorkspacePermissions={hasManageWorkspacePermissions}
|
||||
isMobile={isMobile}
|
||||
onClickAddNewButton={onClickAddNewAppButton}
|
||||
updateApplicationDispatch={updateApplicationDispatch}
|
||||
workspaceId={workspace.id}
|
||||
/>
|
||||
{isLoadingResources && (
|
||||
<ResourceListLoader
|
||||
isMobile={isMobile}
|
||||
resources={applications}
|
||||
/>
|
||||
)}
|
||||
{!isLoadingResources && (
|
||||
<ApplicationCardList
|
||||
applications={applications}
|
||||
canInviteToWorkspace={canInviteToWorkspace}
|
||||
deleteApplication={deleteApplication}
|
||||
enableImportExport={enableImportExport}
|
||||
hasCreateNewApplicationPermission={
|
||||
hasCreateNewApplicationPermission
|
||||
}
|
||||
hasManageWorkspacePermissions={hasManageWorkspacePermissions}
|
||||
isMobile={isMobile}
|
||||
onClickAddNewButton={onClickAddNewAppButton}
|
||||
updateApplicationDispatch={updateApplicationDispatch}
|
||||
workspaceId={workspace.id}
|
||||
/>
|
||||
)}
|
||||
{!isLoadingResources && (
|
||||
<PackageCardList
|
||||
isMobile={isMobile}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
export * from "ce/pages/Applications/ResourceListLoader";
|
||||
import { default as CE_ResourceListLoader } from "ce/pages/Applications/ResourceListLoader";
|
||||
export default CE_ResourceListLoader;
|
||||
26
app/client/src/pages/Applications/CardList.tsx
Normal file
26
app/client/src/pages/Applications/CardList.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React from "react";
|
||||
|
||||
import {
|
||||
CardListContainer,
|
||||
CardListWrapper,
|
||||
ResourceHeading,
|
||||
Space,
|
||||
} from "pages/Applications/CommonElements";
|
||||
|
||||
type CardListProps = React.PropsWithChildren<{
|
||||
isLoading?: boolean;
|
||||
isMobile?: boolean;
|
||||
title: string;
|
||||
}>;
|
||||
|
||||
function CardList({ children, isLoading, isMobile, title }: CardListProps) {
|
||||
return (
|
||||
<CardListContainer isMobile={isMobile}>
|
||||
<ResourceHeading isLoading={isLoading}>{title}</ResourceHeading>
|
||||
<Space />
|
||||
<CardListWrapper isMobile={isMobile}>{children}</CardListWrapper>
|
||||
</CardListContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default CardList;
|
||||
Loading…
Reference in New Issue
Block a user