From 86258aa038b41b9cb2488934e6f8d91e51700d88 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Thu, 20 Jul 2023 11:38:17 -0400 Subject: [PATCH 01/36] Create minimal MembersList component --- website/src/components/members-list.tsx | 83 +++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 website/src/components/members-list.tsx diff --git a/website/src/components/members-list.tsx b/website/src/components/members-list.tsx new file mode 100644 index 00000000..17403150 --- /dev/null +++ b/website/src/components/members-list.tsx @@ -0,0 +1,83 @@ +/******************************************************************************** + * Copyright (c) 2023 TypeFox and others + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * SPDX-License-Identifier: EPL-2.0 + ********************************************************************************/ + +import React, { useState, useEffect } from 'react'; +import { CircularProgress, Grid, Box, Link, Typography } from '@material-ui/core'; + +type MembershipLevel = 'SD' | 'AP' | 'AS'; + +interface Member { + name: string; + logos: { + web: string | null + }; + website: string; + levels: { + level: MembershipLevel; + description: string; + sort_order: string; + }[]; +} + +interface MembersListProps { + collaborationId: string; + level: MembershipLevel; +} + +const MembersList: React.FC = ({ collaborationId }) => { + const [members, setMembers] = useState([]); + + useEffect(() => { + fetch(`https://membership.eclipse.org/api/organizations?working_group=${collaborationId}`) + .then(res => res.ok + ? res.json() + : Promise.reject() + ) + .then(data => setMembers(data)) + }, [members]); + + if (members.length === 0) return ; + + return ( + + { members.map(member => + + )} + + ); +}; + +export default MembersList; + +interface MemberItemProps { + name: string; + logo?: string | null; + url: string; +} + +const MemberItem: React.FC = ({ name, logo, url }) => { + return ( + + + {name} + + + { logo + ? + : {name} + } + + + ); +}; From a2a13fe681e356a67873cdb1a68a236623bbaa68 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Thu, 20 Jul 2023 11:38:27 -0400 Subject: [PATCH 02/36] Create members page --- website/src/members.tsx | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 website/src/members.tsx diff --git a/website/src/members.tsx b/website/src/members.tsx new file mode 100644 index 00000000..5de5cef8 --- /dev/null +++ b/website/src/members.tsx @@ -0,0 +1,39 @@ +/******************************************************************************** + * Copyright (c) 2023 TypeFox and others + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License v. 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0. + * + * SPDX-License-Identifier: EPL-2.0 + ********************************************************************************/ + +import * as React from 'react'; +import { Container, Typography, makeStyles, createStyles } from '@material-ui/core'; +import MembersList from './components/members-list'; + +const useStyle = makeStyles((theme) => + createStyles({ + heading: { + marginTop: theme.spacing(4) + } + }) +); + +const Members = () => { + const classes = useStyle(); + + return ( + + + Members + + + + ); +} + +export default Members; From bda7185ad4eb67ee49c92930ea0efe70299ab5f3 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Thu, 20 Jul 2023 11:38:43 -0400 Subject: [PATCH 03/36] Create route for members page --- website/src/page-settings.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/src/page-settings.tsx b/website/src/page-settings.tsx index d9d46c6d..307a0920 100644 --- a/website/src/page-settings.tsx +++ b/website/src/page-settings.tsx @@ -21,6 +21,7 @@ import OpenVSXRegistryLogo from './openvsx-registry-logo'; import footerContent from './footer-content'; import { Document } from './document'; import About from './about'; +import Members from './members'; export default function createPageSettings(theme: Theme, themeType: 'light' | 'dark'): PageSettings { //---------- MAIN LOGO / TOOLBAR @@ -82,6 +83,7 @@ export default function createPageSettings(theme: Theme, themeType: 'light' | 'd } /> + } /> ; //---------- REPORT ABUSE LINK From d9c47c6b884052992ce8c29cac5293c87357b079 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Thu, 20 Jul 2023 12:20:18 -0400 Subject: [PATCH 04/36] Stylize the members list component --- website/src/components/members-list.tsx | 58 +++++++++++++++++++++---- website/src/members.tsx | 6 ++- 2 files changed, 53 insertions(+), 11 deletions(-) diff --git a/website/src/components/members-list.tsx b/website/src/components/members-list.tsx index 17403150..bc47a79f 100644 --- a/website/src/components/members-list.tsx +++ b/website/src/components/members-list.tsx @@ -9,7 +9,7 @@ ********************************************************************************/ import React, { useState, useEffect } from 'react'; -import { CircularProgress, Grid, Box, Link, Typography } from '@material-ui/core'; +import { CircularProgress, Grid, Box, Link, Typography, createStyles, makeStyles } from '@material-ui/core'; type MembershipLevel = 'SD' | 'AP' | 'AS'; @@ -67,17 +67,57 @@ interface MemberItemProps { } const MemberItem: React.FC = ({ name, logo, url }) => { + const classes = useStyles(); + return ( - - - {name} + + + {name} - - { logo - ? - : {name} - } + + + { logo + ? + : {name} + } + ); }; + +const useStyles = makeStyles((theme) => + createStyles({ + container: { + display: 'flex', + flexDirection: 'column', + alignItems: 'stretch', + height: '18rem', + }, + bordered: { + border: '#424242 1px solid', + }, + header: { + display: 'flex', + alignItems: 'center', + minHeight: '6rem', + backgroundColor: '#424242', + textAlign: 'center', + }, + heading: { + width: '100%', + }, + logoContainer: { + display: 'flex', + height: '100%', + alignItems: 'center', + backgroundColor: '#363636', + }, + logo: { + width: '100%', + maxWidth: '36rem', + maxHeight: '8rem', + objectFit: 'contain', + } + }) +); diff --git a/website/src/members.tsx b/website/src/members.tsx index 5de5cef8..e5474e79 100644 --- a/website/src/members.tsx +++ b/website/src/members.tsx @@ -9,7 +9,7 @@ ********************************************************************************/ import * as React from 'react'; -import { Container, Typography, makeStyles, createStyles } from '@material-ui/core'; +import { Container, Typography, Box, makeStyles, createStyles } from '@material-ui/core'; import MembersList from './components/members-list'; const useStyle = makeStyles((theme) => @@ -31,7 +31,9 @@ const Members = () => { > Members - + + + ); } From fdc385f1215ba555991661bb1a37823e626008c3 Mon Sep 17 00:00:00 2001 From: amvanbaren Date: Fri, 21 Jul 2023 13:13:24 +0300 Subject: [PATCH 05/36] switch back to staging endpoint --- configuration/application.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/configuration/application.yml b/configuration/application.yml index 383046b8..85b122b6 100644 --- a/configuration/application.yml +++ b/configuration/application.yml @@ -131,8 +131,8 @@ ovsx: webui: frontendRoutes: "/extension/**,/namespace/**,/user-settings/**,/admin-dashboard/**,/about,/publisher-agreement-*,/terms-of-use" eclipse: - # TODO change back to https://api-staging.eclipse.org/ for testing. - base-url: https://api.eclipse.org/ + # TODO change back to https://api.eclipse.org/ for release. + base-url: https://api-staging.eclipse.org/ publisher-agreement: version: 1 timezone: US/Eastern From 06035155e89aecadf8f49619e050f9dd175211b9 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Tue, 25 Jul 2023 10:48:53 -0400 Subject: [PATCH 06/36] Tweak logos --- website/src/components/members-list.tsx | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/website/src/components/members-list.tsx b/website/src/components/members-list.tsx index bc47a79f..1e1109d0 100644 --- a/website/src/components/members-list.tsx +++ b/website/src/components/members-list.tsx @@ -74,11 +74,11 @@ const MemberItem: React.FC = ({ name, logo, url }) => { {name} - - + + { logo ? - : {name} + : {name} } @@ -86,13 +86,14 @@ const MemberItem: React.FC = ({ name, logo, url }) => { ); }; -const useStyles = makeStyles((theme) => +const useStyles = makeStyles(() => createStyles({ container: { display: 'flex', flexDirection: 'column', alignItems: 'stretch', height: '18rem', + textAlign: 'center', }, bordered: { border: '#424242 1px solid', @@ -102,22 +103,26 @@ const useStyles = makeStyles((theme) => alignItems: 'center', minHeight: '6rem', backgroundColor: '#424242', - textAlign: 'center', }, heading: { width: '100%', }, - logoContainer: { + body: { display: 'flex', height: '100%', alignItems: 'center', + justifyContent: 'center', backgroundColor: '#363636', }, + logoContainer: { + width: '100%', + maxWidth: '8rem', + maxHeight: '8rem', + }, logo: { width: '100%', - maxWidth: '36rem', - maxHeight: '8rem', + height: '100%', objectFit: 'contain', - } + }, }) ); From 8d003bb651448e03e42bb68e05a5658e79796936 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Tue, 25 Jul 2023 11:02:32 -0400 Subject: [PATCH 07/36] Modify spacing --- website/src/members.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/src/members.tsx b/website/src/members.tsx index e5474e79..654a077e 100644 --- a/website/src/members.tsx +++ b/website/src/members.tsx @@ -15,7 +15,8 @@ import MembersList from './components/members-list'; const useStyle = makeStyles((theme) => createStyles({ heading: { - marginTop: theme.spacing(4) + marginTop: theme.spacing(4), + marginBottom: theme.spacing(2), } }) ); From f0818915fed66c7b5ce58342b79637a59b4fab1b Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Wed, 26 Jul 2023 09:56:30 -0400 Subject: [PATCH 08/36] Add paragraph to members page --- website/src/members.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/website/src/members.tsx b/website/src/members.tsx index 654a077e..6f6c494b 100644 --- a/website/src/members.tsx +++ b/website/src/members.tsx @@ -32,6 +32,13 @@ const Members = () => { > Members + + The Open VSX Working Group aims to ensure the continued sustainability, integrity, + evolution and adoption of the Open VSX Registry. In particular, it is formed to + provide governance, guidance, and funding for the communities that support the + implementation, deployment, maintenance and adoption of the Eclipse Foundation’s Open + VSX Registry at open-vsx.org. + From 084b4f70607e118cafb6eed627b271dbacba47e1 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Wed, 26 Jul 2023 10:13:42 -0400 Subject: [PATCH 09/36] Add become a member button --- website/src/members.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/website/src/members.tsx b/website/src/members.tsx index 6f6c494b..fef752a8 100644 --- a/website/src/members.tsx +++ b/website/src/members.tsx @@ -9,7 +9,7 @@ ********************************************************************************/ import * as React from 'react'; -import { Container, Typography, Box, makeStyles, createStyles } from '@material-ui/core'; +import { Container, Typography, Box, Button, makeStyles, createStyles } from '@material-ui/core'; import MembersList from './components/members-list'; const useStyle = makeStyles((theme) => @@ -39,9 +39,18 @@ const Members = () => { implementation, deployment, maintenance and adoption of the Eclipse Foundation’s Open VSX Registry at open-vsx.org. - + + + + ); } From 4430019b5e7bc7e78118482e991235575e9a0843 Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Wed, 26 Jul 2023 11:29:20 -0400 Subject: [PATCH 10/36] Handle unmounted state change errors --- website/src/components/members-list.tsx | 32 +++++++++++++++++++------ 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/website/src/components/members-list.tsx b/website/src/components/members-list.tsx index 1e1109d0..95f04d5b 100644 --- a/website/src/components/members-list.tsx +++ b/website/src/components/members-list.tsx @@ -14,6 +14,7 @@ import { CircularProgress, Grid, Box, Link, Typography, createStyles, makeStyles type MembershipLevel = 'SD' | 'AP' | 'AS'; interface Member { + organization_id: number; name: string; logos: { web: string | null @@ -32,16 +33,32 @@ interface MembersListProps { } const MembersList: React.FC = ({ collaborationId }) => { + const [loaded, setLoaded] = useState(false); const [members, setMembers] = useState([]); useEffect(() => { - fetch(`https://membership.eclipse.org/api/organizations?working_group=${collaborationId}`) - .then(res => res.ok - ? res.json() - : Promise.reject() - ) - .then(data => setMembers(data)) - }, [members]); + if (loaded) return; + + const abortController = new AbortController(); + + fetch(`https://membership.eclipse.org/api/organizations?working_group=${collaborationId}`, { + cache: 'force-cache', + signal: abortController.signal, + }) + .then(async (res) => { + if (!res.ok) throw new Error('Failed to fetch members'); + + const data = await res.json(); + setMembers(data); + }) + .catch((err) => { + if (err instanceof DOMException && err.name === 'AbortError') return; + console.error(err); + }) + .finally(() => abortController.signal.aborted || setLoaded(true)); + + return () => abortController.abort(); + }, [members, loaded]); if (members.length === 0) return ; @@ -49,6 +66,7 @@ const MembersList: React.FC = ({ collaborationId }) => { { members.map(member => Date: Thu, 27 Jul 2023 13:34:51 -0400 Subject: [PATCH 11/36] Adapt members list to theme colors --- website/src/components/members-list.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/website/src/components/members-list.tsx b/website/src/components/members-list.tsx index 95f04d5b..9cbf0529 100644 --- a/website/src/components/members-list.tsx +++ b/website/src/components/members-list.tsx @@ -42,7 +42,6 @@ const MembersList: React.FC = ({ collaborationId }) => { const abortController = new AbortController(); fetch(`https://membership.eclipse.org/api/organizations?working_group=${collaborationId}`, { - cache: 'force-cache', signal: abortController.signal, }) .then(async (res) => { @@ -104,7 +103,7 @@ const MemberItem: React.FC = ({ name, logo, url }) => { ); }; -const useStyles = makeStyles(() => +const useStyles = makeStyles((theme) => createStyles({ container: { display: 'flex', @@ -114,13 +113,18 @@ const useStyles = makeStyles(() => textAlign: 'center', }, bordered: { - border: '#424242 1px solid', + border: '1px solid', + borderColor: theme.palette.type === 'light' + ? theme.palette.grey['300'] + : theme.palette.grey['800'], }, header: { display: 'flex', alignItems: 'center', minHeight: '6rem', - backgroundColor: '#424242', + backgroundColor: theme.palette.type === 'light' + ? theme.palette.grey['300'] + : theme.palette.grey['800'], }, heading: { width: '100%', @@ -130,7 +134,7 @@ const useStyles = makeStyles(() => height: '100%', alignItems: 'center', justifyContent: 'center', - backgroundColor: '#363636', + backgroundColor: theme.palette.background.default, }, logoContainer: { width: '100%', @@ -142,5 +146,5 @@ const useStyles = makeStyles(() => height: '100%', objectFit: 'contain', }, - }) + }) ); From b9c9b7dd6d97485a4858120bd574c39cb3836d9f Mon Sep 17 00:00:00 2001 From: Olivier Goulet Date: Fri, 28 Jul 2023 11:30:31 -0400 Subject: [PATCH 12/36] feat: Filter levels --- website/src/components/members-list.tsx | 11 ++++++++--- website/src/members.tsx | 22 +++++++++++++--------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/website/src/components/members-list.tsx b/website/src/components/members-list.tsx index 9cbf0529..7748583f 100644 --- a/website/src/components/members-list.tsx +++ b/website/src/components/members-list.tsx @@ -32,7 +32,7 @@ interface MembersListProps { level: MembershipLevel; } -const MembersList: React.FC = ({ collaborationId }) => { +const MembersList: React.FC = ({ collaborationId, level }) => { const [loaded, setLoaded] = useState(false); const [members, setMembers] = useState([]); @@ -47,8 +47,13 @@ const MembersList: React.FC = ({ collaborationId }) => { .then(async (res) => { if (!res.ok) throw new Error('Failed to fetch members'); - const data = await res.json(); - setMembers(data); + const data = await res.json() as Member[]; + + setMembers( + data.filter((member) => + member.levels.some((l) => l.level === level) + ) + ); }) .catch((err) => { if (err instanceof DOMException && err.name === 'AbortError') return; diff --git a/website/src/members.tsx b/website/src/members.tsx index fef752a8..c34e485f 100644 --- a/website/src/members.tsx +++ b/website/src/members.tsx @@ -16,7 +16,7 @@ const useStyle = makeStyles((theme) => createStyles({ heading: { marginTop: theme.spacing(4), - marginBottom: theme.spacing(2), + marginBottom: theme.spacing(2), } }) ); @@ -33,15 +33,19 @@ const Members = () => { Members - The Open VSX Working Group aims to ensure the continued sustainability, integrity, - evolution and adoption of the Open VSX Registry. In particular, it is formed to - provide governance, guidance, and funding for the communities that support the - implementation, deployment, maintenance and adoption of the Eclipse Foundation’s Open - VSX Registry at open-vsx.org. + The Open VSX Working Group aims to ensure the continued sustainability, integrity, + evolution and adoption of the Open VSX Registry. In particular, it is formed to + provide governance, guidance, and funding for the communities that support the + implementation, deployment, maintenance and adoption of the Eclipse Foundation’s Open + VSX Registry at open-vsx.org. - - - + + Strategic Members + + + Contributing Members + +