-
- );
-};
-
-Categories.propTypes = {
- classes: PropTypes.object.isRequired,
- onChangeRoute: PropTypes.func.isRequired,
-};
-
-const actionCreators = {
- changeRoute,
-};
-
-export default connectComponent(
- Categories,
- null,
- actionCreators,
- styles,
-);
diff --git a/src/components/pages/home/defined-app-bar.js b/src/components/pages/home/defined-app-bar.js
index 50e54948..ded19566 100644
--- a/src/components/pages/home/defined-app-bar.js
+++ b/src/components/pages/home/defined-app-bar.js
@@ -5,25 +5,13 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-
-import {
- WithSearch,
-} from '@elastic/react-search-ui';
-
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-
import connectComponent from '../../../helpers/connect-component';
-import { changeRoute } from '../../../state/router/actions';
-
import SearchBox from './search-box';
import EnhancedAppBar from '../../shared/enhanced-app-bar';
import CreateButton from '../../shared/create-button';
-import { ROUTE_CATEGORIES } from '../../../constants/routes';
-
const styles = (theme) => ({
backButton: {
marginLeft: theme.spacing(1),
@@ -40,64 +28,24 @@ const styles = (theme) => ({
const DefinedAppBar = ({
classes,
- onChangeRoute,
}) => (
-
- ({
- filters,
- clearFilters,
- setFilter,
- })}
- >
- {({
- filters,
- clearFilters,
- setFilter,
- }) => {
- const typeFilter = filters.find((filter) => filter.field === 'type');
- const categoryFilter = filters.find((filter) => filter.field === 'category');
-
- return (
-
-
- -
- {Object.keys(categorySections).map((sectionKey) => {
- const {
- Icon, text, hidden,
- } = categorySections[sectionKey];
- if (hidden) return null;
-
- const selected = sectionKey !== 'spaces'
- ? categoryFilter && categoryFilter.values[0] === text
- : typeFilter && typeFilter.values[0] === 'Multisite';
-
- return (
-
-
- )}
- />
- );
- }}
-
+
+ ({
+ error,
+ filters,
+ isLoading,
+ results,
+ searchTerm,
+ setSearchTerm,
+ wasSearched,
+ })}
+ >
+ {({
+ error,
+ filters,
+ isLoading,
+ results,
+ searchTerm,
+ setSearchTerm,
+ wasSearched,
+ }) => {
+ if (error) {
+ return (
+
+
+ Loading...
+
+
+ );
+ }
+
+ if (wasSearched && results.length < 1) {
+ return (
+
+
+ Your query did not match any apps in our database.
+
+
+
+
+ );
+ }
+
+ const typeFilter = filters.find((filter) => filter.field === 'type');
+ const isRouteSpaces = typeFilter && typeFilter.values[0] === 'Multisite';
+ return (
+ <>
+
+
+ )}
+
+ );
+ }}
+
+
+
+
+ {
+ setSearchTerm(searchTerm, { refresh: true, debounce: 0 });
+ }}
+ />
+
+ );
+ }
+
+ if (isLoading && !error && results.length < 1) {
+ return (
+
-
- ({
- error,
- filters,
- isLoading,
- results,
- searchTerm,
- setSearchTerm,
- wasSearched,
- })}
+const Container = ({
+ classes,
+}) => {
+ const scrollContainerRef = useRef(null);
+
+ if (!connector) {
+ return (
+
-
- Loading...
-
-
- );
- }
+ return (
+ {
+ if (scrollContainerRef.current) {
+ scrollContainerRef.current.scrollTop = 0;
+ }
- if (wasSearched && results.length < 1) {
- return (
-
-
- Your query did not match any apps in our database.
-
-
-
-
- );
- }
+ const updatedState = { ...state };
+ // when searching, results should ALWAYS be listed by relevance
+ if (state.searchTerm.length > 0) {
+ updatedState.sortField = '';
+ updatedState.sortDirection = '';
+ }
- const typeFilter = filters.find((filter) => filter.field === 'type');
- const isRouteSpaces = typeFilter && typeFilter.values[0] === 'Multisite';
- return (
- <>
-
-
- )}
-
- );
- }}
-
-
-
-
+
- {({
- error,
- filters,
- isLoading,
- results,
- searchTerm,
- setSearchTerm,
- wasSearched,
- }) => {
- if (error) {
- return (
-
+
+ );
+ }
- if (isLoading && !error && results.length < 1) {
- return (
-
- {
- setSearchTerm(searchTerm, { refresh: true, debounce: 0 });
- }}
- />
-
- );
- }
+ Elastic Cloud App Search environment variables are required for "Discover". Learn more at: https://github.com/webcatalog/webcatalog-app/blob/master/README.md#development
+
-
- );
- }
-
if (index >= totalItemCount) return ;
- const appId = appIds[index - 1];
+ const appId = appIds[index];
return (
+
+ {name}
+
+
+ {description}
+
+
+
+ {
+ const template = [
+ {
+ label: 'Clone',
+ click: () => {
+ onClose();
+ onOpenDialogCreateCustomApp({
+ name: `${name} 2`,
+ url,
+ urlDisabled: true,
+ icon,
+ });
+ },
+ },
+ ];
+ const menu = window.remote.Menu.buildFromTemplate(template);
+ menu.popup({
+ window: window.remote.getCurrentWindow(),
+ });
+ }}
+ >
+
+
+
+
+
+
+
+ Create Custom Space
+
+
+ Create custom space with your preferred name and icon.
+
+
+
+
+ {title && ( +
+ {title}
+
+ )}
+ {typeof children === 'string' ? (
+
+ {children}
+
+ ) : children}
+
+ );
+};
+
+EmptyState.defaultProps = {
+ children: null,
+ title: null,
+};
+
+EmptyState.propTypes = {
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.element),
+ PropTypes.element,
+ PropTypes.string,
+ ]),
+ classes: PropTypes.object.isRequired,
+ icon: PropTypes.object.isRequired,
+ title: PropTypes.string,
+};
+
+export default withStyles(styles, { name: 'EmptyState' })(EmptyState);
diff --git a/src/components/pages/spaces/dialog-add-space/home.js b/src/components/pages/spaces/dialog-add-space/home.js
new file mode 100644
index 00000000..c6cf40a3
--- /dev/null
+++ b/src/components/pages/spaces/dialog-add-space/home.js
@@ -0,0 +1,254 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector';
+import { SearchProvider, WithSearch, Paging } from '@elastic/react-search-ui';
+import '@elastic/react-search-ui-views/lib/styles/styles.css';
+
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import SearchIcon from '@material-ui/icons/Search';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import connectComponent from '../../../../helpers/connect-component';
+
+import AppCard from './app-card';
+import NoConnection from './no-connection';
+import EmptyState from './empty-state';
+import CreateCustomSpaceCard from './create-custom-space-card';
+
+const styles = (theme) => ({
+ paper: {
+ zIndex: 1,
+ },
+ scrollContainer: {
+ flex: 1,
+ padding: 0,
+ overflow: 'auto',
+ },
+ grid: {
+ marginBottom: theme.spacing(1),
+ },
+ homeContainer: {
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ overflow: 'hidden',
+ },
+ badConfigContainer: {
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ overflow: 'hidden',
+ justifyContent: 'center',
+ padding: theme.spacing(1),
+ },
+ contentContainer: {
+ padding: theme.spacing(1),
+ },
+ progressContainer: {
+ position: 'absolute',
+ bottom: 5,
+ left: 5,
+ zIndex: 2,
+ },
+});
+
+const connector = process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY
+ ? new AppSearchAPIConnector({
+ searchKey: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY,
+ engineName: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_ENGINE_NAME,
+ endpointBase: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_API_ENDPOINT,
+ }) : null;
+
+const filters = [
+ { field: 'type', values: ['Multisite'], type: 'all' },
+];
+
+const Home = ({ classes, installedAppIds }) => {
+ const scrollContainerRef = useRef(null);
+
+ if (!connector) {
+ return (
+ + {title && ( +
+
+ AppSearch environment variables are required for "Catalog". Learn more at: https://github.com/webcatalog/webcatalog-app/blob/master/README.md#development
+
+
+ );
+ }
+
+ return (
+
+ ({ isLoading })}
+ >
+ {({ isLoading }) => (
+ <>
+ {isLoading && (
+
+
+
+ ({
+ error,
+ isLoading,
+ results,
+ searchTerm,
+ setSearchTerm,
+ wasSearched,
+ })}
+ >
+ {({
+ error,
+ isLoading,
+ results,
+ searchTerm,
+ setSearchTerm,
+ wasSearched,
+ }) => {
+ if (error) {
+ return (
+
+
+
+ );
+ }}
+
+
+
+ {
+ setSearchTerm(searchTerm, {
+ refresh: true,
+ debounce: 0,
+ shouldClearFilters: false,
+ });
+ }}
+ />
+
+ );
+ }
+
+ if (isLoading && results.length < 1) {
+ return (
+
+
+ Loading...
+
+
+ );
+ }
+
+ if (wasSearched && results.length < 1) {
+ return (
+
+
+
+ Your query did not match any spaces in our database.
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+ )}
+
+ )}
+
+
+
+ Failed to Connect to Server
+
+
+ Please check your Internet connection.
+
+
+
+ );
+};
+
+NoConnection.propTypes = {
+ classes: PropTypes.object.isRequired,
+ onTryAgainButtonClick: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles, { name: 'NoConnection' })(NoConnection);
diff --git a/src/components/pages/spaces/index.js b/src/components/pages/spaces/index.js
new file mode 100644
index 00000000..fff0d9bf
--- /dev/null
+++ b/src/components/pages/spaces/index.js
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Typography, Grid } from '@material-ui/core';
+
+import connectComponent from '../../../helpers/connect-component';
+
+import DefinedAppBar from './defined-app-bar';
+import InstalledSpaces from './installed-spaces';
+import AddCard from './add-card';
+import DialogAddSpace from './dialog-add-space';
+
+const styles = (theme) => ({
+ root: {
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ flex: 1,
+ },
+ scrollContainer: {
+ flex: 1,
+ paddingTop: theme.spacing(6),
+ paddingBottom: theme.spacing(6),
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+ overflow: 'auto',
+ boxSizing: 'border-box',
+ },
+ descriptionContainer: {
+ margin: '0 auto',
+ textAlign: 'center',
+ },
+ gridContainer: {
+ paddingTop: theme.spacing(15),
+ },
+});
+
+const Preferences = ({
+ classes,
+}) => (
+ +
+
+);
+
+Preferences.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default connectComponent(
+ Preferences,
+ null,
+ null,
+ styles,
+);
diff --git a/src/components/pages/spaces/installed-spaces.js b/src/components/pages/spaces/installed-spaces.js
new file mode 100644
index 00000000..3c836bbe
--- /dev/null
+++ b/src/components/pages/spaces/installed-spaces.js
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import connectComponent from '../../../helpers/connect-component';
+import AppCard from '../../shared/app-card';
+
+// only map app obj to each wrapper
+// to avoid re-rendering the whole list (apps changed very often)
+const AppCardWrapper = ({ isSpace, id }) => {
+ if (!isSpace) return null;
+ return (
+
+
+
+
+ With WebCatalog Spaces, you can organize your apps into
+ separate distraction-free environments.
+
+ Create spaces for friends and family, or split between work and play. +
+
+
+ + Create spaces for friends and family, or split between work and play. +
+
+
+
+
-
- Elastic Cloud App Search environment variables are required for "Discover". Learn more at: https://github.com/webcatalog/webcatalog-app/blob/master/README.md#development
-
-
- );
- }
-
- return (
-
-
- {route === ROUTE_CATEGORIES &&
-
-
+
+ {route === ROUTE_INSTALLED &&
+
+);
Container.propTypes = {
classes: PropTypes.object.isRequired,
diff --git a/src/components/root/sidebar/index.js b/src/components/root/sidebar/index.js
index a66e8960..a658b73b 100644
--- a/src/components/root/sidebar/index.js
+++ b/src/components/root/sidebar/index.js
@@ -6,9 +6,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import useMediaQuery from '@material-ui/core/useMediaQuery';
-import {
- WithSearch,
-} from '@elastic/react-search-ui';
import '@elastic/react-search-ui-views/lib/styles/styles.css';
import Grid from '@material-ui/core/Grid';
@@ -21,35 +18,32 @@ import Tooltip from '@material-ui/core/Tooltip';
import AppsIcon from '@material-ui/icons/Apps';
import OfflinePinIcon from '@material-ui/icons/OfflinePin';
-import GroupWorkIcon from '@material-ui/icons/GroupWork';
-import CategoryIcon from '@material-ui/icons/Category';
import SettingsIcon from '@material-ui/icons/Settings';
+import SpaceIcon from '../../shared/space-icon';
+
import connectComponent from '../../../helpers/connect-component';
import { changeRoute } from '../../../state/router/actions';
import { getAppBadgeCount } from '../../../state/app-management/utils';
import {
- ROUTE_CATEGORIES,
ROUTE_HOME,
ROUTE_INSTALLED,
ROUTE_PREFERENCES,
+ ROUTE_SPACES,
} from '../../../constants/routes';
import ListItemAccount from './list-item-account';
const styles = (theme) => ({
sidebar: {
- width: 220,
+ width: 80,
backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[800],
color: theme.palette.common.white,
height: '100%',
overflow: 'auto',
paddingTop: 0,
- [theme.breakpoints.down('sm')]: {
- width: 80,
- },
},
sidebarInner: {
display: 'flex',
@@ -60,26 +54,24 @@ const styles = (theme) => ({
flex: 1,
paddingTop: 0,
},
- listItemSelected: {
- backgroundColor: `${theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.grey[900]} !important`,
- },
sidebarTop: {
height: 40,
WebkitAppRegion: 'drag',
userSelect: 'none',
},
+ listItem: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ listItemSelected: {
+ backgroundColor: `${theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.grey[900]} !important`,
+ },
listItemIcon: {
color: theme.palette.common.white,
- [theme.breakpoints.down('sm')]: {
- margin: '0 auto',
- minWidth: 0,
- },
- },
- listItemText: {
- [theme.breakpoints.down('sm')]: {
- display: 'none',
- },
+ margin: '0 auto',
+ minWidth: 'auto',
},
+ listItemTextPrimary: theme.typography.body2,
});
const Home = ({
@@ -97,18 +89,14 @@ const Home = ({
},
spaces: {
text: 'Spaces',
- Icon: GroupWorkIcon,
- },
- categories: {
- text: 'Categories',
- Icon: CategoryIcon,
+ Icon: SpaceIcon,
},
updates: {
text: 'Installed',
Icon: OfflinePinIcon,
},
preferences: {
- text: 'Preferences',
+ text: 'Settings',
Icon: SettingsIcon,
},
};
@@ -117,123 +105,85 @@ const Home = ({
- ({
- filters,
- clearFilters,
- setFilter,
- setSearchTerm,
- })}
- >
- {({
- filters,
- clearFilters,
- setFilter,
- setSearchTerm,
- }) => {
- const typeFilter = filters.find((filter) => filter.field === 'type');
- const categoryFilter = filters.find((filter) => filter.field === 'category');
-
- return (
-
-
-
- {Object.keys(mainSections).map((sectionKey) => {
- const {
- Icon, text, hidden,
- } = mainSections[sectionKey];
- if (hidden) return null;
-
- const selected = (() => {
- if (sectionKey === 'updates') {
- return route === ROUTE_INSTALLED;
- }
-
- if (sectionKey === 'preferences') {
- return route === ROUTE_PREFERENCES;
- }
-
- if (sectionKey === 'all') {
- return route === ROUTE_HOME
- && categoryFilter == null && typeFilter == null;
- }
-
- if (sectionKey === 'spaces') {
- return route === ROUTE_HOME
- && typeFilter && typeFilter.values[0] === 'Multisite';
- }
-
- if (sectionKey === 'categories') {
- return route === ROUTE_CATEGORIES
- || (route === ROUTE_HOME && categoryFilter != null);
- }
-
- return false;
- })();
-
- const listItem = (
-
-
+ {Object.keys(mainSections).map((sectionKey) => {
+ const {
+ Icon, text, hidden,
+ } = mainSections[sectionKey];
+ if (hidden) return null;
+
+ const selected = (() => {
+ if (sectionKey === 'updates') {
+ return route === ROUTE_INSTALLED;
+ }
+
+ if (sectionKey === 'preferences') {
+ return route === ROUTE_PREFERENCES;
+ }
+
+ if (sectionKey === 'all') {
+ return route === ROUTE_HOME;
+ }
+
+ if (sectionKey === 'spaces') {
+ return route === ROUTE_SPACES;
+ }
+
+ return false;
+ })();
+
+ const listItem = (
+
-
-
+
+
);
}
- return accountListItem;
+
+ return null;
+
+ // const accountListItem = (
+ //
- {renderActionsElement()}
-
- {!url && !inDetailsDialog && (
+ {shouldShowActions && (
+
+ {renderActionsElement()}
+
+ )}
+ {!url && !inDetailsDialog && !simple && (