23/10 Daily Promotion

app/client/cypress/support/Pages/DataSources.ts

@@ -325,9 +325,7 @@ export class DataSources {
       datasourceName,
     );
     this.agHelper.GetNClick(this._selectTableDropdown, 0, true);
-    cy.get(
-      `div[role="listbox"] p[kind="span"]:contains("${tableName}")`,
-    ).click();
+    cy.get(`div[role="listbox"] p:contains("${tableName}")`).click();
     this.agHelper.GetNClick(this._generatePageBtn);
     this.assertHelper.AssertNetworkStatus("@replaceLayoutWithCRUDPage", 201);
     this.agHelper.ClickButton("Got it");

app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import React from "react";
 import { importRemixIcon, importSvg } from "./loadables";
+
 const AddMoreIcon = importRemixIcon(
   async () => import("remixicon-react/AddCircleLineIcon"),
 );
@@ -1063,6 +1064,10 @@ const MaximizeV3Icon = importSvg(
   async () => import("../__assets__/icons/ads/maximize-v3-icon.svg"),
 );
 
+const ExternalLinkIcon = importRemixIcon(
+  async () => import("remixicon-react/ExternalLinkLineIcon"),
+);
+
 import PlayIconPNG from "../__assets__/icons/control/play-icon.png";
 
 function PlayIconPNGWrapper() {
@@ -1211,6 +1216,7 @@ const ICON_LOOKUP = {
   "link-2": Link2,
   "link-unlink": LinkUnlinkIcon,
   "links-line": LinksLineIcon,
+  "external-link-line": ExternalLinkIcon,
   "lock-2-line": Lock2LineIcon,
   "lock-password-line": LockPasswordLineIcon,
   "lock-unlock-line": LockUnlockLineIcon,

app/client/src/IDE/Components/SidePaneWrapper.tsx

@@ -0,0 +1,29 @@
+import { Flex } from "@appsmith/ads";
+import React from "react";
+import type { ReactNode } from "react";
+import styled from "styled-components";
+
+interface SidePaneContainerProps {
+  children?: ReactNode;
+  padded?: boolean;
+}
+
+const StyledContainer = styled(Flex)<Pick<SidePaneContainerProps, "padded">>`
+  padding: ${({ padded }) => padded && "var(--ads-v2-spaces-2)"};
+`;
+
+function SidePaneWrapper({ children, padded = false }: SidePaneContainerProps) {
+  return (
+    <StyledContainer
+      borderRight="1px solid var(--ads-v2-color-border)"
+      flexDirection="column"
+      height="100%"
+      padded={padded}
+      width={"100%"}
+    >
+      {children}
+    </StyledContainer>
+  );
+}
+
+export default SidePaneWrapper;

app/client/src/IDE/Components/ToolbarSettingsPopover.tsx

@@ -15,6 +15,7 @@ interface Props {
   title: string;
   children: React.ReactNode;
   dataTestId?: string;
+  disabled?: boolean;
 }
 
 const Variables = css`
@@ -43,6 +44,7 @@ export const ToolbarSettingsPopover = (props: Props) => {
       <PopoverTrigger>
         <ToggleButton
           data-testId={props.dataTestId}
+          disabled={props.disabled}
           icon="settings-2-line"
           isSelected={isOpen}
           onClick={handleButtonClick}

app/client/src/IDE/index.ts

@@ -54,6 +54,11 @@ export { default as IDEBottomView } from "./Components/BottomView";
  * It switches between different editor states
  */
 export { default as IDESidebar } from "./Components/Sidebar";
+/**
+ * IDESidePaneWrapper is used as a wrapper for side panes, which provides a border and optional padding
+ * and enforces 100% width and height to the parent.
+ */
+export { default as IDESidePaneWrapper } from "./Components/SidePaneWrapper";
 
 /**
  * ToolbarSettingsPopover is a popover attached to a settings toggle button in the toolbar

app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx

@@ -12,7 +12,7 @@ const PluginActionForm = () => {
   const { plugin } = usePluginActionContext();
 
   return (
-    <Flex flex="1" overflow="hidden" p="spaces-2" w="100%">
+    <Flex flex="1" overflow="hidden" p="spaces-4" w="100%">
       {plugin.uiComponent === UIComponentTypes.ApiEditorForm && (
         <APIEditorForm />
       )}

app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx

@@ -88,7 +88,7 @@ const PluginActionSettingsPopover = (props: SettingsProps) => {
         {props.docsLink && (
           <LearnMoreLink
             className="t--action-settings-documentation-link"
-            endIcon="share-box-line"
+            endIcon="external-link-line"
             kind="secondary"
             onClick={handleLearnMoreClick}
           >

app/client/src/ce/RouteBuilder.ts

@@ -204,3 +204,12 @@ export const queryAddURL = (props: URLBuilderParams): string =>
     ...props,
     suffix: `queries/add`,
   });
+
+export const appLibrariesURL = (): string =>
+  urlBuilder.build({
+    suffix: "libraries",
+  });
+export const appPackagesURL = (): string =>
+  urlBuilder.build({
+    suffix: "packages",
+  });

app/client/src/ce/constants/routes/appRoutes.ts

@@ -67,6 +67,7 @@ export const JS_COLLECTION_ID_ADD_PATH = `${JS_COLLECTION_EDITOR_PATH}/:baseColl
 export const DATA_SOURCES_EDITOR_LIST_PATH = `/datasource`;
 export const DATA_SOURCES_EDITOR_ID_PATH = `/datasource/:datasourceId`;
 export const APP_LIBRARIES_EDITOR_PATH = `/libraries`;
+export const APP_PACKAGES_EDITOR_PATH = `/packages`;
 export const APP_SETTINGS_EDITOR_PATH = `/settings`;
 export const SAAS_GSHEET_EDITOR_ID_PATH = `/saas/google-sheets-plugin/datasources/:datasourceId`;
 export const GEN_TEMPLATE_URL = "generate-page";
@@ -128,6 +129,12 @@ export const matchGeneratePagePath = (pathName: string) =>
   match(`${BUILDER_CUSTOM_PATH}${GENERATE_TEMPLATE_FORM_PATH}`)(pathName) ||
   match(`${BUILDER_PATH_DEPRECATED}${GENERATE_TEMPLATE_FORM_PATH}`)(pathName);
 
+export const matchAppLibrariesPath = (pathName: string) =>
+  match(`${BUILDER_PATH}${APP_LIBRARIES_EDITOR_PATH}`)(pathName);
+
+export const matchAppPackagesPath = (pathName: string) =>
+  match(`${BUILDER_PATH}${APP_PACKAGES_EDITOR_PATH}`)(pathName);
+
 export const addBranchParam = (branch: string) => {
   const url = new URL(window.location.href);
 

app/client/src/ce/entities/Engine/actionHelpers.ts

@@ -30,6 +30,7 @@ export const getPageDependencyActions = (
   currentWorkspaceId: string = "",
   featureFlags: DependentFeatureFlags = {},
   allResponses: EditConsolidatedApi,
+  applicationId: string,
 ) => {
   const { datasources, pagesWithMigratedDsl, plugins } = allResponses || {};
   const initActions = [

app/client/src/ce/entities/FeatureFlag.ts

@@ -39,6 +39,8 @@ export const FEATURE_FLAG = {
   release_anvil_toggle_enabled: "release_anvil_toggle_enabled",
   release_git_persist_branch_enabled: "release_git_persist_branch_enabled",
   release_ide_animations_enabled: "release_ide_animations_enabled",
+  release_table_custom_loading_state_enabled:
+    "release_table_custom_loading_state_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -74,6 +76,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_anvil_toggle_enabled: false,
   release_git_persist_branch_enabled: false,
   release_ide_animations_enabled: false,
+  release_table_custom_loading_state_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

app/client/src/ce/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts

@@ -0,0 +1,12 @@
+import { createMessage, HEADER_TITLES } from "ee/constants/messages";
+
+/**
+ * In CE this returns a simple text as title but this
+ * hook is extended in EE where based on feature flags
+ * the title changes
+ */
+function useLibraryHeaderTitle() {
+  return createMessage(HEADER_TITLES.LIBRARIES);
+}
+
+export default useLibraryHeaderTitle;

app/client/src/ce/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import JSLibrariesSection from "pages/Editor/IDE/LeftPane/JSLibrariesSection";
+import { IDESidePaneWrapper } from "IDE";
+
+const LibrarySidePane = () => {
+  return (
+    <IDESidePaneWrapper>
+      <JSLibrariesSection />
+    </IDESidePaneWrapper>
+  );
+};
+
+export default LibrarySidePane;

app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.ts

@@ -4,6 +4,7 @@ import {
   API_EDITOR_ID_ADD_PATH,
   API_EDITOR_ID_PATH,
   APP_LIBRARIES_EDITOR_PATH,
+  APP_PACKAGES_EDITOR_PATH,
   APP_SETTINGS_EDITOR_PATH,
   BUILDER_CHECKLIST_PATH,
   BUILDER_CUSTOM_PATH,
@@ -82,6 +83,7 @@ function useRoutes(path: string): RouteReturnType[] {
         `${path}${SAAS_EDITOR_API_ID_PATH}`,
         `${path}${SAAS_EDITOR_API_ID_ADD_PATH}`,
         `${path}${APP_LIBRARIES_EDITOR_PATH}`,
+        `${path}${APP_PACKAGES_EDITOR_PATH}`,
         `${path}${APP_SETTINGS_EDITOR_PATH}`,
       ],
     },

app/client/src/ce/utils/serviceWorkerUtils.ts

@@ -9,7 +9,7 @@ import {
   VIEWER_CUSTOM_PATH,
   BUILDER_PATH_DEPRECATED,
   VIEWER_PATH_DEPRECATED,
-} from "ee/constants/routes/appRoutes";
+} from "../constants/routes/appRoutes";
 
 interface TMatchResult {
   basePageId?: string;

app/client/src/constants/AppConstants.ts

@@ -9,6 +9,7 @@ export const CANVAS_DEFAULT_MIN_ROWS = Math.ceil(
 export const DEFAULT_ENTITY_EXPLORER_WIDTH = 256;
 export const DEFAULT_PROPERTY_PANE_WIDTH = 288;
 export const APP_SETTINGS_PANE_WIDTH = 525;
+export const APP_LIBRARIES_PANE_WIDTH = 384;
 export const DEFAULT_EXPLORER_PANE_WIDTH = 255;
 export const SPLIT_SCREEN_RATIO = 0.404;
 

app/client/src/ee/pages/Editor/IDE/Header/useLibraryHeaderTitle.ts

@@ -0,0 +1,3 @@
+export * from "ce/pages/Editor/IDE/Header/useLibraryHeaderTitle";
+import { default as CE_useLibraryHeaderTitle } from "ce/pages/Editor/IDE/Header/useLibraryHeaderTitle";
+export default CE_useLibraryHeaderTitle;

app/client/src/ee/pages/Editor/IDE/LeftPane/LibrarySidePane.tsx

@@ -0,0 +1,3 @@
+export * from "ce/pages/Editor/IDE/LeftPane/LibrarySidePane";
+import { default as CE_LibrarySidePane } from "ce/pages/Editor/IDE/LeftPane/LibrarySidePane";
+export default CE_LibrarySidePane;

app/client/src/entities/Engine/AppEditorEngine.ts

@@ -199,6 +199,7 @@ export default class AppEditorEngine extends AppEngine {
   private *loadPluginsAndDatasources(
     allResponses: EditConsolidatedApi,
     rootSpan: Span,
+    applicationId: string,
   ) {
     const loadPluginsAndDatasourcesSpan = startNestedSpan(
       "AppEditorEngine.loadPluginsAndDatasources",
@@ -211,7 +212,12 @@ export default class AppEditorEngine extends AppEngine {
       getFeatureFlagsForEngine,
     );
     const { errorActions, initActions, successActions } =
-      getPageDependencyActions(currentWorkspaceId, featureFlags, allResponses);
+      getPageDependencyActions(
+        currentWorkspaceId,
+        featureFlags,
+        allResponses,
+        applicationId,
+      );
 
     if (!isAirgappedInstance) {
       initActions.push(fetchMockDatasources(mockDatasources));
@@ -259,7 +265,12 @@ export default class AppEditorEngine extends AppEngine {
       allResponses,
       rootSpan,
     );
-    yield call(this.loadPluginsAndDatasources, allResponses, rootSpan);
+    yield call(
+      this.loadPluginsAndDatasources,
+      allResponses,
+      rootSpan,
+      applicationId,
+    );
   }
 
   public *completeChore(rootSpan: Span) {

app/client/src/navigation/FocusEntity.ts

@@ -278,7 +278,10 @@ export function identifyEntityFromPath(path: string): FocusEntityInfo {
   }
 
   if (match.params.entity) {
-    if (match.params.entity === "libraries") {
+    if (
+      match.params.entity === "libraries" ||
+      match.params.entity === "packages"
+    ) {
       return {
         entity: FocusEntity.LIBRARY,
         id: "",

app/client/src/pages/Editor/IDE/Header/index.tsx

@@ -77,6 +77,7 @@ import type { Page } from "entities/Page";
 import { IDEHeader, IDEHeaderTitle } from "IDE";
 import { APPLICATIONS_URL } from "constants/routes";
 import { useNavigationMenuData } from "../../EditorName/useNavigationMenuData";
+import useLibraryHeaderTitle from "ee/pages/Editor/IDE/Header/useLibraryHeaderTitle";
 
 const StyledDivider = styled(Divider)`
   height: 50%;
@@ -92,6 +93,8 @@ interface HeaderTitleProps {
 }
 
 const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
+  const libraryHeaderTitle = useLibraryHeaderTitle();
+
   switch (appState) {
     case EditorState.DATA:
       return (
@@ -110,12 +113,7 @@ const HeaderTitleComponent = ({ appState, currentPage }: HeaderTitleProps) => {
         />
       );
     case EditorState.LIBRARIES:
-      return (
-        <IDEHeaderTitle
-          key={appState}
-          title={createMessage(HEADER_TITLES.LIBRARIES)}
-        />
-      );
+      return <IDEHeaderTitle key={appState} title={libraryHeaderTitle} />;
     default:
       return <EditorTitle key={appState} title={currentPage?.pageName || ""} />;
   }

app/client/src/pages/Editor/IDE/Layout/hooks/useGridLayoutTemplate.ts

@@ -16,6 +16,7 @@ import {
 import {
   APP_SETTINGS_PANE_WIDTH,
   APP_SIDEBAR_WIDTH,
+  APP_LIBRARIES_PANE_WIDTH,
 } from "constants/AppConstants";
 import { useEditorStateLeftPaneWidth } from "./useEditorStateLeftPaneWidth";
 import { type Area, Areas, SIDEBAR_WIDTH } from "../constants";
@@ -97,10 +98,10 @@ function useGridLayoutTemplate(): ReturnValue {
           } else {
             setColumns([
               SIDEBAR_WIDTH,
-              "255px",
+              `${APP_LIBRARIES_PANE_WIDTH}px`,
               (windowWidth -
                 APP_SIDEBAR_WIDTH -
-                255 +
+                APP_LIBRARIES_PANE_WIDTH +
                 "px") as AnimatedGridUnit,
               "0px",
             ]);