Add validation for namespace names

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

@@ -24,6 +24,9 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
   isValidName = (namespaceName: string) =>
     !/(^default$)|(^kube-.*)/.test(namespaceName);
 
+  hasInvalidCharacters = (namespaceName: string) =>
+    !/([a-z0-9]|\-)+/.test(namespaceName);
+
   createNamespace = () => {
     if (!this.isValidName(this.state.namespaceName)) {
       this.setState({
@@ -32,6 +35,13 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
       return;
     }
 
+    if (!this.hasInvalidCharacters(this.state.namespaceName)) {
+      this.setState({
+        status: "Only lowercase, numbers or dash (-) are allowed",
+      });
+      return;
+    }
+
     const namespaceExists = this.context.currentModalData?.find(
       (namespace: any) => {
         return namespace?.value === this.state.namespaceName;
@@ -97,13 +107,6 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
           />
         </InputWrapper>
 
-        {/* <Help
-          href="https://docs.getporter.dev/docs/deleting-dangling-resources"
-          target="_blank"
-        >
-          <i className="material-icons">help_outline</i> Help
-        </Help> */}
-
         <SaveButton
           text="Create Namespace"
           color="#616FEEcc"
@@ -117,25 +120,6 @@ export default class NamespaceModal extends Component<PropsType, StateType> {
 
 NamespaceModal.contextType = Context;
 
-const Help = styled.a`
-  position: absolute;
-  left: 31px;
-  bottom: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff55;
-  font-size: 13px;
-  :hover {
-    color: #ffffff;
-  }
-
-  > i {
-    margin-right: 9px;
-    font-size: 16px;
-  }
-`;
-
 const DashboardIcon = styled.div`
   width: 32px;
   margin-top: 6px;