Implemented first version of namespaces listing on cluster dashboard

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -6,25 +6,28 @@ import TabSelector from "components/TabSelector";
 
 import NodeList from "./NodeList";
 import { ClusterSettings } from "./ClusterSettings";
+import { NamespaceList } from "./NamespaceList";
 
-
-type TabEnum = "nodes" | "settings";
+type TabEnum = "nodes" | "settings" | "namespaces";
 
 const tabOptions: {
   label: string;
-  value: TabEnum
+  value: TabEnum;
 }[] = [
   { label: "Nodes", value: "nodes" },
-  { label: "Settings", value: "settings"}
+  { label: "Namespaces", value: "namespaces" },
+  { label: "Settings", value: "settings" },
 ];
 
-export const Dashboard: React.FC = ({ children }) => {
+export const Dashboard: React.FunctionComponent = () => {
   const [currentTab, setCurrentTab] = useState<TabEnum>("nodes");
   const context = useContext(Context);
-  const renderTab = (cluster: any) => {
+  const renderTab = () => {
     switch (currentTab) {
-      case "settings": 
-        return <ClusterSettings />
+      case "settings":
+        return <ClusterSettings />;
+      case "namespaces":
+        return <NamespaceList />;
       case "nodes":
       default:
         return <NodeList />;
@@ -32,7 +35,6 @@ export const Dashboard: React.FC = ({ children }) => {
   };
 
   return (
-    
     <>
       <TitleSection>
         <DashboardIcon>
@@ -47,18 +49,18 @@ export const Dashboard: React.FC = ({ children }) => {
             <i className="material-icons">info</i> Info
           </InfoLabel>
         </TopRow>
-        <Description>Cluster dashboard for {context.currentCluster.name}</Description>
+        <Description>
+          Cluster dashboard for {context.currentCluster.name}
+        </Description>
       </InfoSection>
 
       <TabSelector
         options={tabOptions}
         currentTab={currentTab}
-        setCurrentTab={(value: TabEnum) =>
-          setCurrentTab(value)
-        }
+        setCurrentTab={(value: TabEnum) => setCurrentTab(value)}
       />
 
-      {renderTab(context.currentCluster)}
+      {renderTab()}
     </>
   );
 };
@@ -134,8 +136,8 @@ const TitleSection = styled.div`
   > i {
     margin-left: 10px;
     cursor: pointer;
-    font-size 18px;
-    color: #858FAAaa;
+    font-size: 18px;
+    color: #858faaaa;
     padding: 5px;
     border-radius: 100px;
     :hover {

dashboard/src/main/home/cluster-dashboard/dashboard/NamespaceList.tsx

@@ -0,0 +1,106 @@
+import React, { useContext, useEffect, useState } from "react";
+import styled from "styled-components";
+import api from "shared/api";
+import { Context } from "shared/Context";
+
+export const NamespaceList = () => {
+  const context = useContext(Context);
+  const [namespaces, setNamespaces] = useState([]);
+
+  useEffect(() => {
+    api
+      .getNamespaces(
+        "<token>",
+        { cluster_id: context.currentCluster.id },
+        { id: context.currentProject.id }
+      )
+      .then(({ data }) => {
+        setNamespaces(data.items);
+      });
+  }, [context, setNamespaces]);
+  return (
+    <NamespaceListWrapper>
+      <ControlRow>
+        <Button onClick={() => context.setCurrentModal("NamespaceModal")}>
+          <i className="material-icons">add</i> Add namespace
+        </Button>
+      </ControlRow>
+
+      {namespaces.map((namespace) => {
+        return <StyledCard> {namespace?.metadata?.name} </StyledCard>;
+      })}
+    </NamespaceListWrapper>
+  );
+};
+
+const NamespaceListWrapper = styled.div`
+  margin-top: 35px;
+`;
+
+const ControlRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 35px;
+  padding-left: 0px;
+`;
+
+const Button = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: "Work Sans", sans-serif;
+  border-radius: 20px;
+  color: white;
+  height: 35px;
+  padding: 0px 8px;
+  padding-bottom: 1px;
+  margin-right: 10px;
+  font-weight: 500;
+  padding-right: 15px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  box-shadow: 0 5px 8px 0px #00000010;
+  cursor: ${(props: { disabled?: boolean }) =>
+    props.disabled ? "not-allowed" : "pointer"};
+
+  background: ${(props: { disabled?: boolean }) =>
+    props.disabled ? "#aaaabbee" : "#616FEEcc"};
+  :hover {
+    background: ${(props: { disabled?: boolean }) =>
+      props.disabled ? "" : "#505edddd"};
+  }
+
+  > i {
+    color: white;
+    width: 18px;
+    height: 18px;
+    font-weight: 600;
+    font-size: 12px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+    justify-content: center;
+  }
+`;
+
+const StyledCard = styled.div`
+  background: #26282f;
+  min-height: 60px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #26282f;
+  box-shadow: 0 5px 8px 0px #00000033;
+  border-radius: 5px;
+  padding: 14px;
+  :not(:last-child) {
+    margin-bottom: 25px;
+  }
+`;