[PLAT-12059][PLAT-12060][PLAT-12061][PLAT-12062][PLAT-12250]: Create new releases page with mock data

Summary:
Created new releases page with mock data
1. Added a runtime config for new releases page - 'yb.ui.feature_flags.releases_redesign'. This is under BETA flag.
2. Added a new route for this releases which is under /releases_list

Created the following components
1. Releases List page which displays the list of releases. Actions possible are
    a. Add a new release
    b. Edit existing architecture
    c. Disable Release
    d. Delete Release
    e. Edit Release tag

Functionalities in this page includes
1. Search versions by version number
2. Display only ACTIVE releases
3. Refresh to view the latest releases
4. Double clicking on each row will open a side panel.

2. Release Details page which opens a side panel on double click of each row. This will show existing architectures,corresponding release metadata, actions to disble/delete
release  add new architecture. User will be able to view the universes being used the release.

3. Created following modal dialogs
     a. Delete Release
     b. Disable Release
     c. Edit Release Tag
     d. Edit existing architecture
     e. Add a new release

4. Add a new release modal and Edit architecture modal will allow customer to import release via the following manner
   a. URL
   b. File Upload
5. Wrote a new component for File Upload

Test Plan:
Please refer to FIGMA link and API document links in the comments below

**Things are subjected to change when I work on API integration story and all of the above is written based on mock data (based on expected API response)
Note: There are lots of TODO sections that I have written, these will act as notes to ensure I know what API to plugin once the APIs are ready.
Note: There is a followup story to develop with respect to API integration which will be started in 2 weeks**

Please refer to the video
{F142592}

Reviewers: jmak, dshubin

Reviewed By: jmak

Subscribers: jmak, yugaware

Differential Revision: https://phorge.dev.yugabyte.com/D31699

Author: rajmaddy89

managed/src/main/java/com/yugabyte/yw/common/config/GlobalConfKeys.java

@@ -1134,6 +1134,14 @@ public class GlobalConfKeys extends RuntimeConfigKeysModule {
           "Allows user to enter postgres hba rules and ident map rules in multiple rows",
           ConfDataType.BooleanType,
           ImmutableList.of(ConfKeyTags.PUBLIC));
+  public static final ConfKeyInfo<Boolean> releasesRedesign =
+      new ConfKeyInfo<>(
+          "yb.ui.feature_flags.releases_redesign",
+          ScopeType.GLOBAL,
+          "Enable the option to view new releases page",
+          "Enable the option to view new releases page",
+          ConfDataType.BooleanType,
+          ImmutableList.of(ConfKeyTags.BETA));
   public static final ConfKeyInfo<Boolean> haDisableCertValidation =
       new ConfKeyInfo<>(
           "yb.ha.ws.ssl.loose.acceptAnyCertificate",

managed/src/main/resources/reference.conf

@@ -171,6 +171,7 @@ yb {
       edit_in_use_provider=false
       disaster_recovery=false
       gflag_multiline_conf=true
+      releases_redesign=false
     }
 
     xcluster {

managed/ui/src/components/advanced/ConfigData.tsx

@@ -12,7 +12,10 @@ import { RunTimeConfigData, RunTimeConfigScope } from '../../redesign/utils/dtos
 import { getPromiseState } from '../../utils/PromiseUtils';
 import { isNonEmptyArray } from '../../utils/ObjectUtils';
 
-import { RbacValidator, hasNecessaryPerm } from '../../redesign/features/rbac/common/RbacApiPermValidator';
+import {
+  RbacValidator,
+  hasNecessaryPerm
+} from '../../redesign/features/rbac/common/RbacApiPermValidator';
 
 import { ApiPermissionMap } from '../../redesign/features/rbac/ApiAndUserPermMapping';
 import { Action } from '../../redesign/features/rbac';
@@ -155,9 +158,9 @@ export const ConfigData: FC<GlobalConfigProps> = ({
       >
         <RbacValidator
           customValidateFunction={(userPerm) =>
-            scope === RunTimeConfigScope.GLOBAL ?
-              find(userPerm, { actions: [Action.SUPER_ADMIN_ACTIONS] }) !== undefined :
-              hasNecessaryPerm(ApiPermissionMap.MODIFY_RUNTIME_CONFIG_BY_KEY)
+            scope === RunTimeConfigScope.GLOBAL
+              ? find(userPerm, { actions: [Action.SUPER_ADMIN_ACTIONS] }) !== undefined
+              : hasNecessaryPerm(ApiPermissionMap.MODIFY_RUNTIME_CONFIG_BY_KEY)
           }
           isControl
         >
@@ -172,9 +175,9 @@ export const ConfigData: FC<GlobalConfigProps> = ({
         {!row.isConfigInherited && (
           <RbacValidator
             customValidateFunction={(userPerm) =>
-              scope === RunTimeConfigScope.GLOBAL ?
-                find(userPerm, { actions: [Action.SUPER_ADMIN_ACTIONS] }) !== undefined :
-                hasNecessaryPerm(ApiPermissionMap.MODIFY_RUNTIME_CONFIG_BY_KEY)
+              scope === RunTimeConfigScope.GLOBAL
+                ? find(userPerm, { actions: [Action.SUPER_ADMIN_ACTIONS] }) !== undefined
+                : hasNecessaryPerm(ApiPermissionMap.MODIFY_RUNTIME_CONFIG_BY_KEY)
             }
             isControl
             overrideStyle={{ display: 'block' }}

managed/ui/src/components/common/forms/fields/YBSearchInput.scss

@@ -8,7 +8,7 @@
     padding: 0px 0px 0px 10px;
     border-radius: 8px;
     border: 1px solid colors.$YB_BG_WHITE_4;
-    height: 40px;
+    height: 42px;
     i {
       color: #808080;
     }

managed/ui/src/components/releases/ReleaseList/ReleaseList.js

@@ -11,7 +11,10 @@ import { YBLoadingCircleIcon } from '../../../components/common/indicators';
 import { getPromiseState } from '../../../utils/PromiseUtils';
 import { isAvailable, showOrRedirect } from '../../../utils/LayoutUtils';
 
-import { RbacValidator, hasNecessaryPerm } from '../../../redesign/features/rbac/common/RbacApiPermValidator';
+import {
+  RbacValidator,
+  hasNecessaryPerm
+} from '../../../redesign/features/rbac/common/RbacApiPermValidator';
 import { isRbacEnabled } from '../../../redesign/features/rbac/common/RbacUtils';
 import { ApiPermissionMap } from '../../../redesign/features/rbac/ApiAndUserPermMapping';
 import './ReleaseList.scss';
@@ -209,7 +212,7 @@ export default class ReleaseList extends Component {
                   accessRequiredOn={ApiPermissionMap.CREATE_RELEASE}
                   isControl
                   overrideStyle={{
-                    float: 'right',
+                    float: 'right'
                   }}
                 >
                   <TableAction
@@ -218,7 +221,10 @@ export default class ReleaseList extends Component {
                     actionType="import-release"
                     isMenuItem={false}
                     onSubmit={self.onModalSubmit}
-                    disabled={!isAvailable(currentCustomer.data.features, 'universes.actions') || !hasNecessaryPerm(ApiPermissionMap.CREATE_RELEASE)}
+                    disabled={
+                      !isAvailable(currentCustomer.data.features, 'universes.actions') ||
+                      !hasNecessaryPerm(ApiPermissionMap.CREATE_RELEASE)
+                    }
                   />
                 </RbacValidator>
               </div>

managed/ui/src/pages/ReleaseList.tsx

@@ -0,0 +1,22 @@
+/*
+ * Created on January 14th 2024
+ *
+ * Copyright 2023 YugaByte, Inc. and Contributors
+ */
+
+import { lazy, Suspense } from 'react';
+import { YBLoadingCircleIcon } from '../components/common/indicators';
+
+const ReleaseListComponent = lazy(() =>
+  import('../redesign/features/releases/components/ReleaseList').then(({ ReleaseList }) => ({
+    default: ReleaseList
+  }))
+);
+
+export const ReleaseList = () => {
+  return (
+    <Suspense fallback={YBLoadingCircleIcon}>
+      <ReleaseListComponent />
+    </Suspense>
+  );
+};