Implemented validation for reserved namespaces names

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

@@ -17,12 +17,9 @@ const OptionsDropdown: React.FC = ({ children }) => {
 };
 
 export const NamespaceList: React.FunctionComponent = () => {
-  const {
-    currentCluster,
-    currentProject,
-    setCurrentModal,
-    setCurrentError,
-  } = useContext(Context);
+  const { currentCluster, currentProject, setCurrentModal } = useContext(
+    Context
+  );
   const [namespaces, setNamespaces] = useState([]);
 
   useEffect(() => {
@@ -41,6 +38,12 @@ export const NamespaceList: React.FunctionComponent = () => {
     setCurrentModal("DeleteNamespaceModal", namespace);
   };
 
+  const isAvailableForDeletion = (namespaceName: string) => {
+    // Only the namespaces that doesn't start with kube- or has by name default will be
+    // available for deletion (as those are the k8s namespaces)
+    return !/(^default$)|(^kube-.*)/.test(namespaceName);
+  };
+
   return (
     <NamespaceListWrapper>
       <ControlRow>
@@ -53,12 +56,14 @@ export const NamespaceList: React.FunctionComponent = () => {
         return (
           <StyledCard key={namespace?.metadata?.name}>
             {namespace?.metadata?.name}
-            <OptionsDropdown>
-              <DropdownOption onClick={() => onDelete(namespace)}>
-                <i className="material-icons-outlined">delete</i>
-                <span>Delete</span>
-              </DropdownOption>
-            </OptionsDropdown>
+            {isAvailableForDeletion(namespace?.metadata?.name) && (
+              <OptionsDropdown>
+                <DropdownOption onClick={() => onDelete(namespace)}>
+                  <i className="material-icons-outlined">delete</i>
+                  <span>Delete</span>
+                </DropdownOption>
+              </OptionsDropdown>
+            )}
           </StyledCard>
         );
       })}

dashboard/src/main/home/modals/NamespaceModal.tsx

@@ -21,7 +21,17 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
     status: null as string | null,
   };
 
+  isValidName = (namespaceName: string) =>
+    !/(^default$)|(^kube-.*)/.test(namespaceName);
+
   createNamespace = () => {
+    if (!this.isValidName(this.state.namespaceName)) {
+      this.setState({
+        status: "The name cannot be default or start with kube-",
+      });
+      return;
+    }
+
     api
       .createNamespace(
         "<token>",
@@ -66,7 +76,9 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
           <InputRow
             type="string"
             value={this.state.namespaceName}
-            setValue={(x: string) => this.setState({ namespaceName: x })}
+            setValue={(x: string) =>
+              this.setState({ namespaceName: x, status: null })
+            }
             placeholder="ex: porter-workers"
             width="480px"
           />