Merge pull request #1345 from devtron-labs/fix/modal-env_filter

feat(app_env_filter): 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,22 @@ export default function CreateAppGroup({
         setAuthorizedAppList(_authorizedAppList)
     }
 
+    const renderEmptyState = (title?: string): JSX.Element => {
+        return (
+            <GenericEmptyState
+                title={title}
+                image={Info}
+                imageClassName="h-20"
+                styles={{ height: 'calc(100vh - 420px)' }}
+            />
+        )
+    }
+
     const renderSelectedApps = (): JSX.Element => {
+        const filteredAuthList = authorizedAppList.filter(
+            (app) =>
+                selectedAppsMap[app.id] && (!selectedAppSearchText || app.appName.indexOf(selectedAppSearchText) >= 0),
+        )
         return (
             <div>
                 <SearchBar
@@ -168,26 +197,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}.`}
@@ -217,6 +242,7 @@ export default function CreateAppGroup({
     }
 
     const renderAllApps = (): JSX.Element => {
+        const filteredAllApps = appList.filter((app) => !allAppSearchText || app.appName.indexOf(allAppSearchText) >= 0)
         return (
             <div>
                 <SearchBar
@@ -227,36 +253,36 @@ export default function CreateAppGroup({
                     setSearchApplied={setAllAppSearchApplied}
                 />
                 <div>
-                    {appList
-                        .filter((app) => !allAppSearchText || app.appName.indexOf(allAppSearchText) >= 0)
-                        .map((app) => (
-                            <ConditionalWrap
-                                condition={unAuthorizedApps.get(app.appName) === true}
-                                wrap={(children) => (
-                                    <Tippy
-                                        key={`selected-app-${app.id}`}
-                                        data-testid="env-tippy"
-                                        className="default-tt w-200"
-                                        arrow={false}
-                                        placement="bottom-start"
-                                        content={`You don't have admin/manager pemission for this ${filterParentTypeMsg}.`}
-                                    >
-                                        <div>{children}</div>
-                                    </Tippy>
-                                )}
-                            >
-                                <Checkbox
-                                    key={`app-${app.id}`}
-                                    rootClassName="fs-13 pt-8 pr-8 pb-8 mb-0-imp dc__hover-n50"
-                                    isChecked={unAuthorizedApps.get(app.appName) ? false : selectedAppsMap[app.id]}
-                                    value={CHECKBOX_VALUE.CHECKED}
-                                    onChange={() => toggleAppSelection(app.id)}
-                                    disabled={unAuthorizedApps.get(app.appName) ? true : false}
-                                >
-                                    {app.appName}
-                                </Checkbox>
-                            </ConditionalWrap>
-                        ))}
+                    {filteredAllApps.length <= 0
+                        ? renderEmptyState('No matching results')
+                        : filteredAllApps.map((app) => (
+                              <ConditionalWrap
+                                  condition={unAuthorizedApps.get(app.appName) === true}
+                                  wrap={(children) => (
+                                      <Tippy
+                                          key={`selected-app-${app.id}`}
+                                          data-testid="env-tippy"
+                                          className="default-tt w-200"
+                                          arrow={false}
+                                          placement="bottom-start"
+                                          content={`You don't have admin/manager pemission for this ${filterParentTypeMsg}.`}
+                                      >
+                                          <div>{children}</div>
+                                      </Tippy>
+                                  )}
+                              >
+                                  <Checkbox
+                                      key={`app-${app.id}`}
+                                      rootClassName="fs-13 pt-8 pr-8 pb-8 mb-0-imp dc__hover-n50"
+                                      isChecked={unAuthorizedApps.get(app.appName) ? false : selectedAppsMap[app.id]}
+                                      value={CHECKBOX_VALUE.CHECKED}
+                                      onChange={() => toggleAppSelection(app.id)}
+                                      disabled={unAuthorizedApps.get(app.appName) ? true : false}
+                                  >
+                                      {app.appName}
+                                  </Checkbox>
+                              </ConditionalWrap>
+                          ))}
                 </div>
             </div>
         )
@@ -282,12 +308,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 +341,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 +391,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

@@ -3719,8 +3719,8 @@ textarea::placeholder {
 }
 
 .dc__disabled {
-  cursor: not-allowed !important;
-  opacity: 0.5;
+    cursor: not-allowed !important;
+    opacity: 0.5;
 }
 
 .dc__grabbable {