Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[dashboard] Add loading indicator to Prebuilds page #6984

Merged
merged 3 commits into from
Nov 30, 2021
Merged

[dashboard] Add loading indicator to Prebuilds page #6984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
46bfff1
[dashboard] Trivial: Move InstallGitHubApp component under dashboard/…
jankeromnes Nov 30, 2021
d9442f3
[dashboard] Trivial: Disable rule 'import/no-anonymous-default-export…
jankeromnes Nov 30, 2021
5d4232a
[dashboard] Add loading indicator to Prebuilds page
jankeromnes Nov 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components/dashboard/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,7 @@
module.exports = {
root: true,
extends: ['react-app'],
rules: {
"import/no-anonymous-default-export": "off",
}
}
2 changes: 1 addition & 1 deletion components/dashboard/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const Projects = React.lazy(() => import(/* webpackPrefetch: true */ './projects
const Project = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Project'));
const Prebuilds = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Prebuilds'));
const Prebuild = React.lazy(() => import(/* webpackPrefetch: true */ './projects/Prebuild'));
const InstallGitHubApp = React.lazy(() => import(/* webpackPrefetch: true */ './prebuilds/InstallGitHubApp'));
const InstallGitHubApp = React.lazy(() => import(/* webpackPrefetch: true */ './projects/InstallGitHubApp'));
const FromReferrer = React.lazy(() => import(/* webpackPrefetch: true */ './FromReferrer'));
const UserSearch = React.lazy(() => import(/* webpackPrefetch: true */ './admin/UserSearch'));
const WorkspacesSearch = React.lazy(() => import(/* webpackPrefetch: true */ './admin/WorkspacesSearch'));
Expand Down
0 ...hboard/src/prebuilds/InstallGitHubApp.tsx → ...shboard/src/projects/InstallGitHubApp.tsx
View file
Open in desktop
File renamed without changes.
12 changes: 10 additions & 2 deletions components/dashboard/src/projects/Prebuilds.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default function () {
const [searchFilter, setSearchFilter] = useState<string | undefined>();
const [statusFilter, setStatusFilter] = useState<PrebuiltWorkspaceState | undefined>();

const [isLoadingPrebuilds, setIsLoadingPrebuilds] = useState<boolean>(true);
const [prebuilds, setPrebuilds] = useState<PrebuildWithStatus[]>([]);

useEffect(() => {
Expand All @@ -47,13 +48,16 @@ export default function () {
onPrebuildUpdate: (update: PrebuildWithStatus) => {
if (update.info.projectId === project.id) {
setPrebuilds(prev => [update, ...prev.filter(p => p.info.id !== update.info.id)]);
setIsLoadingPrebuilds(false);
}
}
});

(async () => {
setIsLoadingPrebuilds(true);
const prebuilds = await getGitpodService().server.findPrebuilds({ projectId: project.id });
setPrebuilds(prebuilds);
setIsLoadingPrebuilds(false);
})();

return () => {
Expand All @@ -78,7 +82,7 @@ export default function () {
setProject(newProject);
}
})();
}, [teams]);
}, [projectSlug, team, teams]);

const prebuildContextMenu = (p: PrebuildWithStatus) => {
const isFailed = p.status === "aborted" || p.status === "timeout" || !!p.error;
Expand Down Expand Up @@ -166,7 +170,7 @@ export default function () {
<div className="py-3 pl-3">
<DropDown prefix="Prebuild Status: " contextMenuWidth="w-32" entries={statusFilterEntries()} />
</div>
{(!!project && prebuilds.length === 0) &&
{(!isLoadingPrebuilds && prebuilds.length === 0) &&
<button onClick={() => triggerPrebuild(null)} className="ml-2">Run Prebuild</button>}
</div>
<ItemsList className="mt-2">
Expand All @@ -181,6 +185,10 @@ export default function () {
<span>Branch</span>
</ItemField>
</Item>
{isLoadingPrebuilds && <div className="flex items-center justify-center space-x-2 text-gray-400 text-sm pt-16">
<img alt="" className="h-4 w-4 animate-spin" src={Spinner} />
<span>Fetching prebuilds...</span>
</div>}
{prebuilds.filter(filter).sort(prebuildSorter).map((p, index) => <Item key={`prebuild-${p.info.id}`} className="grid grid-cols-3">
<ItemField className="flex items-center my-auto">
<Link to={`/${!!team ? 't/'+team.slug : 'projects'}/${projectSlug}/${p.info.id}`} className="cursor-pointer">
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/Project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export default function () {
{showAuthBanner ? (
<div className="mt-8 rounded-xl text-gray-500 bg-gray-50 dark:bg-gray-800 flex-col">
<div className="p-8 text-center">
<img src={NoAccess} title="No Access" className="m-auto mb-4" />
<img src={NoAccess} alt="" title="No Access" className="m-auto mb-4" />
<div className="text-center text-gray-600 dark:text-gray-50 pb-3 font-bold">
No Access
</div>
Expand Down