Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: order of plugins in most popular section fixed (#28957)

Browse Source 
## Description

This PR fixes the order of plugins in most popular datasource section in
create new datasource page, The correct order should be Gsheets, REST,
Postgres, MySQL, MongoDB

#### PR fixes following issue(s)
Fixes #28931 
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [x] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: “sneha122” <“sneha@appsmith.com”>
This commit is contained in:
sneha122 2023-11-22 12:41:16 +05:30 committed by GitHub
parent fbb411b729
commit 04cbb85915
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/client/src/ce/selectors/entitiesSelector.ts
View File

@ -46,6 +46,7 @@ import { getFormValues } from "redux-form";
import { TEMP_DATASOURCE_ID } from "constants/Datasource";
import { MAX_DATASOURCE_SUGGESTIONS } from "pages/Editor/Explorer/hooks";
import type { Module } from "@appsmith/constants/ModuleConstants";
import type { Plugin } from "api/PluginApi";
export const getEntities = (state: AppState): AppState["entities"] =>
state.entities;
@ -393,15 +394,33 @@ export const getDBPlugins = createSelector(getPlugins, (plugins) =>
// Most popular datasources are hardcoded right now to include these 4 plugins and REST API
// Going forward we may want to have separate list for each instance based on usage
export const getMostPopularPlugins = createSelector(getPlugins, (plugins) =>
plugins.filter(
(plugin) =>
plugin.packageName === PluginPackageName.POSTGRES ||
plugin.packageName === PluginPackageName.MY_SQL ||
plugin.packageName === PluginPackageName.MONGO ||
plugin.packageName === PluginPackageName.GOOGLE_SHEETS,
),
);
export const getMostPopularPlugins = createSelector(getPlugins, (plugins) => {
const popularPlugins: Plugin[] = [];
const gsheetPlugin = plugins.find(
(plugin) => plugin.packageName === PluginPackageName.GOOGLE_SHEETS,
);
const restPlugin = plugins.find(
(plugin) => plugin.packageName === PluginPackageName.REST_API,
);
const postgresPlugin = plugins.find(
(plugin) => plugin.packageName === PluginPackageName.POSTGRES,
);
const mysqlPlugin = plugins.find(
(plugin) => plugin.packageName === PluginPackageName.MY_SQL,
);
const mongoPlugin = plugins.find(
(plugin) => plugin.packageName === PluginPackageName.MONGO,
);
gsheetPlugin && popularPlugins.push(gsheetPlugin);
restPlugin && popularPlugins.push(restPlugin);
postgresPlugin && popularPlugins.push(postgresPlugin);
mysqlPlugin && popularPlugins.push(mysqlPlugin);
mongoPlugin && popularPlugins.push(mongoPlugin);
return popularPlugins;
});
export const getDBAndRemotePlugins = createSelector(getPlugins, (plugins) =>
plugins.filter(

30
app/client/src/pages/Editor/IntegrationEditor/CreateNewDatasourceTab.tsx
View File

@ -258,19 +258,25 @@ class CreateNewDatasourceTab extends React.Component<
!this.props.currentApplicationIdForCreateNewApp && (
<AddDatasourceSecurely />
)}
{dataSources.length === 0 &&
this.props.mockDatasources.length > 0 &&
mockDataSection}
{dataSources.length === 0 && this.props.mockDatasources.length > 0 && (
<>
{mockDataSection}
<StyledDivider />
</>
)}
{isEnabledForStartWithData && (
<CreateNewDatasource
active={false}
history={history}
isCreating={isCreating}
location={location}
pageId={pageId}
showMostPopularPlugins
showUnsupportedPluginDialog={this.showUnsupportedPluginDialog}
/>
<>
<CreateNewDatasource
active={false}
history={history}
isCreating={isCreating}
location={location}
pageId={pageId}
showMostPopularPlugins
showUnsupportedPluginDialog={this.showUnsupportedPluginDialog}
/>
<StyledDivider />
</>
)}
<CreateNewAPI
active={false}

41
app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
View File

@ -25,7 +25,7 @@ import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
import { ApiCard, API_ACTION, CardContentWrapper } from "./NewApi";
import type { EventLocation } from "@appsmith/utils/analyticsUtilTypes";
import { createNewApiAction } from "actions/apiPaneActions";
import { PluginPackageName } from "entities/Action";
import { PluginPackageName, PluginType } from "entities/Action";
import { Spinner } from "design-system";
import PlusLogo from "assets/images/Plus-logo.svg";
import {
@ -225,7 +225,26 @@ class DatasourceHomeScreen extends React.Component<Props> {
<DatasourceHomePage>
<DatasourceCardsContainer data-testid="database-datasource-card-container">
{plugins.map((plugin, idx) => {
return (
return plugin.type === PluginType.API ? (
!!showMostPopularPlugins ? (
<ApiCard
className="t--createBlankApiCard create-new-api"
onClick={() => this.handleOnClick()}
>
<CardContentWrapper data-testid="newapi-datasource-content-wrapper">
<img
alt="New"
className="curlImage t--plusImage content-icon"
src={PlusLogo}
/>
<p className="textBtn">
{createMessage(CREATE_NEW_DATASOURCE_REST_API)}
</p>
</CardContentWrapper>
{isCreating && <Spinner className="cta" size={25} />}
</ApiCard>
) : null
) : (
<DatasourceCard
data-testid="database-datasource-card"
key={`${plugin.id}_${idx}`}
@ -252,24 +271,6 @@ class DatasourceHomeScreen extends React.Component<Props> {
</DatasourceCard>
);
})}
{!!showMostPopularPlugins ? (
<ApiCard
className="t--createBlankApiCard create-new-api"
onClick={() => this.handleOnClick()}
>
<CardContentWrapper data-testid="newapi-datasource-content-wrapper">
<img
alt="New"
className="curlImage t--plusImage content-icon"
src={PlusLogo}
/>
<p className="textBtn">
{createMessage(CREATE_NEW_DATASOURCE_REST_API)}
</p>
</CardContentWrapper>
{isCreating && <Spinner className="cta" size={25} />}
</ApiCard>
) : null}
</DatasourceCardsContainer>
</DatasourceHomePage>
);