feat: empty state & name validation

Author: ritvikmahajan17

src/components/ApplicationGroup/Constants.ts

@@ -183,4 +183,6 @@ export const GetBranchChangeStatus = (statusText: string): BulkResponseStatus =>
         default:
             return
     }
-}
+}
+
+export const FILTER_NAME_REGEX = /^[a-z][a-z0-9-]{1,}[a-z0-9]$/

src/components/ApplicationGroup/CreateAppGroup.tsx

@@ -4,6 +4,7 @@ import {
     CHECKBOX_VALUE,
     ConditionalWrap,
     Drawer,
+    GenericEmptyState,
     Progressing,
     showError,
     stopPropagation,
@@ -12,9 +13,10 @@ import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
 import { ReactComponent as Error } from '../../assets/icons/ic-warning.svg'
 import { ReactComponent as CheckIcon } from '../../assets/icons/ic-check.svg'
 import { ReactComponent as Abort } from '../../assets/icons/ic-abort.svg'
+import Info from '../../assets/icons/ic-info-outline-grey.svg'
 import { CreateGroupType, CreateTypeOfAppListType, FilterParentType } from './AppGroup.types'
 import SearchBar from './SearchBar'
-import { CreateGroupTabs, CREATE_GROUP_TABS } from './Constants'
+import { CreateGroupTabs, CREATE_GROUP_TABS, FILTER_NAME_REGEX } from './Constants'
 import { toast } from 'react-toastify'
 import { createEnvGroup } from './AppGroup.service'
 import { useParams } from 'react-router-dom'
@@ -57,6 +59,18 @@ export default function CreateAppGroup({
         }
     }
 
+    const validateName = (name: string) => {
+        if (!name) {
+            return
+        }
+        if (!FILTER_NAME_REGEX.test(name) || name.length > 30) {
+            // regex doesnt check of max length = 30
+            setShowErrorMsg(true)
+        } else {
+            setShowErrorMsg(false)
+        }
+    }
+
     useEffect(() => {
         document.addEventListener('click', outsideClickHandler)
         return (): void => {
@@ -97,8 +111,8 @@ export default function CreateAppGroup({
     }
 
     const onInputChange = (event): void => {
-        setShowErrorMsg(true)
         if (event.target.name === 'name') {
+            validateName(event.target.value)
             setAppGroupName(event.target.value)
         } else {
             setAppGroupDescription(event.target.value)
@@ -157,7 +171,15 @@ export default function CreateAppGroup({
         setAuthorizedAppList(_authorizedAppList)
     }
 
+    const renderEmptyState = (title?: string): JSX.Element => {
+        return <GenericEmptyState title={title} image={Info} imageClassName="h-20" classname="h-40vh" />
+    }
+
     const renderSelectedApps = (): JSX.Element => {
+        const filteredAuthList = authorizedAppList.filter(
+            (app) =>
+                selectedAppsMap[app.id] && (!selectedAppSearchText || app.appName.indexOf(selectedAppSearchText) >= 0),
+        )
         return (
             <div>
                 <SearchBar
@@ -168,26 +190,22 @@ export default function CreateAppGroup({
                     setSearchApplied={setSelectedAppSearchApplied}
                 />
                 <div>
-                    {authorizedAppList
-                        .filter(
-                            (app) =>
-                                selectedAppsMap[app.id] &&
-                                (!selectedAppSearchText || app.appName.indexOf(selectedAppSearchText) >= 0),
-                        )
-                        .map((app) => {
-                            return (
-                                <div
-                                    key={`selected-app-${app.id}`}
-                                    className="flex left dc__hover-n50 p-8 fs-13 fw-4 cn-9 selected-app-row cursor"
-                                    data-app-id={app.id}
-                                    onClick={removeAppSelection}
-                                >
-                                    <CheckIcon className="icon-dim-16 cursor check-icon scn-6 mr-8" />
-                                    <Close className="icon-dim-16 cursor delete-icon mr-8" />
-                                    <span>{app.appName}</span>
-                                </div>
-                            )
-                        })}
+                    {filteredAuthList.length <= 0
+                        ? renderEmptyState('No matching results')
+                        : filteredAuthList.map((app) => {
+                              return (
+                                  <div
+                                      key={`selected-app-${app.id}`}
+                                      className="flex left dc__hover-n50 p-8 fs-13 fw-4 cn-9 selected-app-row cursor"
+                                      data-app-id={app.id}
+                                      onClick={removeAppSelection}
+                                  >
+                                      <CheckIcon className="icon-dim-16 cursor check-icon scn-6 mr-8" />
+                                      <Close className="icon-dim-16 cursor delete-icon mr-8" />
+                                      <span>{app.appName}</span>
+                                  </div>
+                              )
+                          })}
                     {unauthorizedAppList.length > 0 && (
                         <div className="dc__bold ml-4">
                             {`You don't have admin/manager pemission for the following ${filterParentTypeMsg}.`}
@@ -282,12 +300,17 @@ export default function CreateAppGroup({
         )
     }
 
+    // called when showErrorMsg is true
     const nameErrorMessage = (): string => {
         if (!appGroupName) {
             return 'Group name is required field'
-        } else {
+        }
+        if (appGroupName.length > 30) {
             return 'Max 30 char is allowed in name'
         }
+        if (!FILTER_NAME_REGEX.test(appGroupName)) {
+            return 'Min 3 chars; Start with alphabet; End with alphanumeric; Use only lowercase; Allowed:(-); Do not use spaces'
+        }
     }
 
     const renderBodySection = (): JSX.Element => {
@@ -310,7 +333,7 @@ export default function CreateAppGroup({
                         disabled={selectedAppGroup && !!selectedAppGroup.value}
                     />
 
-                    {showErrorMsg && (!appGroupName || appGroupName.length > 30) && (
+                    {showErrorMsg && (
                         <span className="form__error">
                             <Error className="form__icon form__icon--error" />
                             {nameErrorMessage()}
@@ -360,6 +383,10 @@ export default function CreateAppGroup({
 
     const handleSave = async (e): Promise<void> => {
         e.preventDefault()
+        if (showErrorMsg) {
+            toast.error('Please fix the errors')
+            return
+        }
         if (!appGroupName || appGroupDescription?.length > 50) {
             setShowErrorMsg(true)
             return

src/css/base.scss

@@ -1839,7 +1839,7 @@ button.anchor {
 
 .dc__link {
     color: var(--B500);
-    &.dc__link_over{
+    &.dc__link_over {
         color: var(--N600);
     }
     &:hover {
@@ -2289,7 +2289,7 @@ textarea,
     background-color: var(--N50);
 }
 
-.c-n50{
+.c-n50 {
     color: var(--N50);
 }
 
@@ -2672,7 +2672,7 @@ textarea,
     width: 300px !important;
 }
 
-.w-320{
+.w-320 {
     width: 320px;
 }
 
@@ -2945,7 +2945,7 @@ textarea,
     height: 112px !important;
 }
 
-.h-128{
+.h-128 {
     height: 128px !important;
 }
 
@@ -3031,7 +3031,7 @@ textarea,
 }
 
 .mxh-390-imp {
-    max-height: 390px!important;
+    max-height: 390px !important;
 }
 
 // Height in percentage
@@ -3047,6 +3047,10 @@ textarea,
     height: 100vh;
 }
 
+.h-40vh {
+    height: 40vh;
+}
+
 .h-76-imp {
     height: 76px !important;
 }
@@ -3285,7 +3289,7 @@ textarea,
     }
 }
 
-.dc__column-gap-8{
+.dc__column-gap-8 {
     column-gap: 8px;
 }
 
@@ -3704,8 +3708,8 @@ textarea::placeholder {
 }
 
 .dc__disabled {
-  cursor: not-allowed !important;
-  opacity: 0.5;
+    cursor: not-allowed !important;
+    opacity: 0.5;
 }
 
 .dc__grabbable {