fix: css and search empty issue

Author: ritvikmahajan17

src/components/ApplicationGroup/CreateAppGroup.tsx

@@ -163,10 +163,6 @@ export default function CreateAppGroup({
                 ? _unauthorizedAppList.push({ id: app.id, appName: app.appName })
                 : _authorizedAppList.push({ id: app.id, appName: app.appName })
         })
-        _unauthorizedAppList = _unauthorizedAppList.filter(
-            (app) =>
-                selectedAppsMap[app.id] && (!selectedAppSearchText || app.appName.indexOf(selectedAppSearchText) >= 0),
-        )
         setUnauthorizedAppList(_unauthorizedAppList)
         setAuthorizedAppList(_authorizedAppList)
     }
@@ -187,6 +183,10 @@ export default function CreateAppGroup({
             (app) =>
                 selectedAppsMap[app.id] && (!selectedAppSearchText || app.appName.indexOf(selectedAppSearchText) >= 0),
         )
+        const filteredUnAuthList = unauthorizedAppList.filter(
+            (app) =>
+                selectedAppsMap[app.id] && (!selectedAppSearchText || app.appName.indexOf(selectedAppSearchText) >= 0),
+        )
         return (
             <div>
                 <SearchBar
@@ -197,7 +197,7 @@ export default function CreateAppGroup({
                     setSearchApplied={setSelectedAppSearchApplied}
                 />
                 <div>
-                    {filteredAuthList.length <= 0
+                    {filteredAuthList.length <= 0 && filteredUnAuthList.length <= 0
                         ? renderEmptyState('No matching results')
                         : filteredAuthList.map((app) => {
                               return (
@@ -213,12 +213,12 @@ export default function CreateAppGroup({
                                   </div>
                               )
                           })}
-                    {unauthorizedAppList.length > 0 && (
+                    {filteredUnAuthList.length > 0 && (
                         <div className="dc__bold ml-4">
                             {`You don't have admin/manager pemission for the following ${filterParentTypeMsg}.`}
                         </div>
                     )}
-                    {unauthorizedAppList.map((app) => {
+                    {filteredUnAuthList.map((app) => {
                         return (
                             <Tippy
                                 key={`selected-app-${app.id}`}

src/components/app/details/app.scss

@@ -50,3 +50,104 @@
         }
     }
 }
+
+// .env-empty-state {
+//     height: calc(100vh - 48px);
+// }
+
+// .loading-state {
+//     height: calc(100vh - 78px);
+// }
+
+// .saved-env-filters__wrap {
+//     padding: 6px 20px;
+//     display: flex;
+//     flex-wrap: wrap;
+//     background-color: var(--white);
+//     z-index: var(--app-list-header-index);
+
+//     .saved-env-filter {
+//         display: flex;
+//         align-items: center;
+//         border-radius: 4px;
+//         border: solid 1px var(--N200);
+//         background-color: #f7fafc;
+//         padding-left: 6px;
+//         padding-right: 6px;
+//         -webkit-user-select: none;
+//         user-select: none;
+//         margin: 0 12px 0 0;
+//         min-height: 24px;
+//     }
+
+//     .saved-env-filter-divider {
+//         height: 24px;
+//         width: 1px;
+//         background-color: var(--N200);
+//     }
+
+//     .saved-env-filter__close-btn {
+//         font-size: 14px;
+//         line-height: 1;
+//         margin-left: 10px;
+//         color: #72767a;
+//         border: none;
+//         padding: 1px;
+//         background-color: #f7fafc;
+//     }
+
+//     .saved-env-filters__clear-btn {
+//         background-color: var(--white);
+//         height: 24px;
+//         text-transform: capitalize;
+//         font-size: 12px;
+//         font-weight: 600;
+//         font-style: normal;
+//         font-stretch: normal;
+//         line-height: 1.5;
+//         letter-spacing: normal;
+//         padding: 7px 10px;
+//         margin-right: 12px;
+//         color: var(--B500);
+//         border: none;
+//         width: 115px;
+//     }
+// }
+
+// .env-details-page {
+//     height: calc(100vh - 77px);
+
+//     .tab-list__tab-link {
+//         padding: 0 0 8px 0;
+//     }
+
+//     .tab-list__tab-link.active .tab-list__icon path {
+//         fill: var(--B500);
+//     }
+
+//     .tab-list__tab-link:hover path {
+//         color: var(--B500);
+//         text-decoration: none;
+//         fill: var(--B500);
+//     }
+// }
+
+.create-group-container,
+.env-header-tab {
+    .tab-list {
+        .tab-list__tab {
+            .tab-hover {
+                &:hover,
+                &.active {
+                    color: var(--B500);
+                }
+            }
+            .apps-tab__active-tab {
+                height: 2px;
+                background-color: var(--B500);
+                border-radius: 2px 2px 0px 0px;
+                margin-top: -1px;
+            }
+        }
+    }
+}