update empty list
import { Box, Button, createStyles, Theme, WithStyles } from "@material-ui/core";
+import withStyles from "@material-ui/core/styles/withStyles";
+import { deleteApplicationAction } from "actions/application";
+import { setErrorNotificationAction, setSuccessNotificationAction } from "actions/notification";
import { loadRoutes } from "actions/routes";
+import { withComponents, WithComponentsProps } from "hoc/withComponents";
+import { ApplicationSidebar } from "pages/Application/ApplicationSidebar";
+import { ComponentPanel } from "pages/Components/Panel";
import React from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
import { RootState } from "reducers";
-import { deleteApplicationAction } from "actions/application";
-import { setErrorNotificationAction, setSuccessNotificationAction } from "actions/notification";
import { ApplicationDetails } from "types/application";
import { ConfirmDialog } from "widgets/ConfirmDialog";
import { H4 } from "widgets/Label";
-import { BasePage } from "../BasePage";
-import withStyles from "@material-ui/core/styles/withStyles";
-import { connect } from "react-redux";
-import { withComponents, WithComponentsProps } from "hoc/withComponents";
import { Namespaces } from "widgets/Namespaces";
-import { ApplicationSidebar } from "pages/Application/ApplicationSidebar";
-import { ComponentPanel } from "pages/Components/Panel";
-import { Link } from "react-router-dom";
+import { BasePage } from "../BasePage";
const externalEndpointsModalID = "externalEndpointsModalID";
const internalEndpointsModalID = "internalEndpointsModalID";
@@ -118,7 +118,7 @@ class ComponentRaw extends React.PureComponent<Props, State> {
}
public render() {
- const { components, activeNamespace } = this.props;
+ const { components, activeNamespace, activeNamespaceName, classes } = this.props;
return (
<BasePage
@@ -129,11 +129,26 @@ class ComponentRaw extends React.PureComponent<Props, State> {
{this.renderDeleteConfirmDialog()}
<Box p={2}>
- {components?.map((component, index) => (
+ {components && components.size > 0 ? (
+ components?.map((component, index) => (
<Box pb={1} key={component.get("name")}>
<ComponentPanel component={component} application={activeNamespace!} defaultUnfold={index === 0} />
</Box>
- ))}
+ ))
+ ) : (
+ <div className={classes.emptyWrapper}>
+ <Box>
+ <Button
+ variant="contained"
+ color="primary"
+ component={Link}
+ to={`/applications/${activeNamespaceName}/components/new`}
+ >
+ Add Component
+ </Button>
+ </Box>
+ </div>
+ )}
</Box>
</BasePage>
);
