+
);
+
+export const BorderlessAppIcon = () => (
+
+);
diff --git a/app/client/src/components/stories/IconSelector.stories.tsx b/app/client/src/components/stories/IconSelector.stories.tsx
new file mode 100644
index 00000000000..9058aad8489
--- /dev/null
+++ b/app/client/src/components/stories/IconSelector.stories.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
+import { withDesign } from "storybook-addon-designs";
+import IconSelector from "../ads/IconSelector";
+import { action } from "@storybook/addon-actions";
+import { AppIconName } from "../ads/AppIcon";
+
+export default {
+ title: "IconSelector",
+ component: IconSelector,
+ decorators: [withKnobs, withDesign],
+};
+
+export const IconPicker = () => (
+
+
+
+);
diff --git a/app/client/src/components/stories/SearchInput.stories.tsx b/app/client/src/components/stories/SearchInput.stories.tsx
new file mode 100644
index 00000000000..c245cc932ee
--- /dev/null
+++ b/app/client/src/components/stories/SearchInput.stories.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
+import { action } from "@storybook/addon-actions";
+import SearchInput, { SearchVariant } from "../ads/SearchInput";
+
+export default {
+ title: "Search Input",
+ component: SearchInput,
+ decorators: [withKnobs],
+};
+
+export const SearchInputStory = () => (
+
+
+
+);
diff --git a/app/client/src/components/stories/Table.stories.tsx b/app/client/src/components/stories/Table.stories.tsx
index 5144f8ae7fd..1e401568358 100644
--- a/app/client/src/components/stories/Table.stories.tsx
+++ b/app/client/src/components/stories/Table.stories.tsx
@@ -1,7 +1,7 @@
import React from "react";
import Table from "../ads/Table";
import Button, { Category, Variant, Size } from "../ads/Button";
-import { Icon } from "../ads/Icon";
+import Icon from "../ads/Icon";
export default {
title: "Table",
diff --git a/app/client/src/configs/index.ts b/app/client/src/configs/index.ts
index eab451cd81f..56e6d1b02bb 100644
--- a/app/client/src/configs/index.ts
+++ b/app/client/src/configs/index.ts
@@ -30,6 +30,7 @@ type INJECTED_CONFIGS = {
};
intercomAppID: string;
mailEnabled: boolean;
+ smartLookKey: string;
};
declare global {
interface Window {
@@ -94,6 +95,7 @@ const getConfigsFromEnvVars = (): INJECTED_CONFIGS => {
mailEnabled: process.env.REACT_APP_MAIL_ENABLED
? process.env.REACT_APP_MAIL_ENABLED.length > 0
: false,
+ smartLookKey: process.env.REACT_APP_SMART_LOOK_KEY || "",
};
};
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
index 1996a0ab1a7..3dea6e53540 100644
--- a/app/client/src/constants/ReduxActionConstants.tsx
+++ b/app/client/src/constants/ReduxActionConstants.tsx
@@ -62,6 +62,8 @@ export const ReduxActionTypes: { [key: string]: string } = {
CREATE_QUERY_INIT: "CREATE_QUERY_INIT",
FETCH_DATASOURCES_INIT: "FETCH_DATASOURCES_INIT",
FETCH_DATASOURCES_SUCCESS: "FETCH_DATASOURCES_SUCCESS",
+ SAVE_DATASOURCE_NAME: "SAVE_DATASOURCE_NAME",
+ SAVE_DATASOURCE_NAME_SUCCESS: "SAVE_DATASOURCE_NAME_SUCCESS",
CREATE_DATASOURCE_INIT: "CREATE_DATASOURCE_INIT",
CREATE_DATASOURCE_SUCCESS: "CREATE_DATASOURCE_SUCCESS",
CREATE_DATASOURCE_FROM_FORM_INIT: "CREATE_DATASOURCE_FROM_FORM_INIT",
@@ -281,6 +283,7 @@ export const ReduxActionErrorTypes: { [key: string]: string } = {
FETCH_DATASOURCES_ERROR: "FETCH_DATASOURCES_ERROR",
SEARCH_APIORPROVIDERS_ERROR: "SEARCH_APIORPROVIDERS_ERROR",
UPDATE_DATASOURCE_ERROR: "UPDATE_DATASOURCE_ERROR",
+ SAVE_DATASOURCE_NAME_ERROR: "SAVE_DATASOURCE_NAME_ERROR",
CREATE_DATASOURCE_ERROR: "CREATE_DATASOURCE_ERROR",
DELETE_DATASOURCE_ERROR: "DELETE_DATASOURCE_ERROR",
FETCH_PUBLISHED_PAGE_ERROR: "FETCH_PUBLISHED_PAGE_ERROR",
diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
index 8d991f3a9ac..0d867162b10 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
@@ -16,7 +16,7 @@ import FormControlFactory from "utils/FormControlFactory";
import { HelpBaseURL, HelpMap } from "constants/HelpConstants";
import Button from "components/editorComponents/Button";
import { Datasource } from "api/DatasourcesApi";
-import { reduxForm, InjectedFormProps, Field } from "redux-form";
+import { reduxForm, InjectedFormProps } from "redux-form";
import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
import { APPSMITH_IP_ADDRESS } from "constants/DatasourceEditorConstants";
import { getAppsmithConfigs } from "configs";
@@ -314,11 +314,7 @@ class DatasourceDBEditor extends React.Component<
-
+
{cloudHosting && (
diff --git a/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx b/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx
index 55a0370e066..1d0adafdf0a 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/FormTitle.tsx
@@ -1,6 +1,5 @@
import styled from "styled-components";
-import React from "react";
-import { WrappedFieldInputProps } from "redux-form";
+import React, { useCallback, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import EditableText, {
EditInteractionKind,
@@ -8,33 +7,47 @@ import EditableText, {
import { AppState } from "reducers";
import { getDatasource } from "selectors/entitiesSelector";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
import { Datasource } from "api/DatasourcesApi";
import { getDataSources } from "selectors/editorSelectors";
+import { saveDatasourceName } from "actions/datasourceActions";
+import { Spinner } from "@blueprintjs/core";
const Wrapper = styled.div`
margin-left: 10px;
font-size: 18px;
font-weight: 500;
line-height: 24px;
+ display: flex;
`;
interface ComponentProps {
- input: WrappedFieldInputProps;
focusOnMount: boolean;
}
type FormTitleProps = ComponentProps;
const FormTitle = (props: FormTitleProps) => {
- const { input } = props;
const params = useParams<{ datasourceId: string }>();
const currentDatasource:
- | Partial
+ | Datasource
| undefined = useSelector((state: AppState) =>
getDatasource(state, params.datasourceId),
);
const datasources: Datasource[] = useSelector(getDataSources);
+ const [forceUpdate, setForceUpdate] = useState(false);
+ const dispatch = useDispatch();
+ const saveStatus: {
+ isSaving: boolean;
+ error: boolean;
+ } = useSelector((state: AppState) => {
+ const id = currentDatasource ? currentDatasource.id : "";
+
+ return {
+ isSaving: state.ui.datasourceName.isSaving[id],
+ error: state.ui.datasourceName.errors[id],
+ };
+ });
const hasNameConflict = React.useCallback(
(name: string) =>
@@ -57,17 +70,41 @@ const FormTitle = (props: FormTitleProps) => {
[hasNameConflict],
);
+ const handleDatasourceNameChange = useCallback(
+ (name: string) => {
+ if (
+ !isInvalidDatasourceName(name) &&
+ currentDatasource &&
+ currentDatasource.name !== name
+ ) {
+ dispatch(saveDatasourceName({ id: currentDatasource?.id ?? "", name }));
+ }
+ },
+ [dispatch, isInvalidDatasourceName, currentDatasource],
+ );
+
+ useEffect(() => {
+ if (saveStatus.isSaving === false && saveStatus.error === true) {
+ setForceUpdate(true);
+ } else if (saveStatus.isSaving === true) {
+ setForceUpdate(false);
+ }
+ }, [saveStatus.isSaving, saveStatus.error]);
+
return (
input.onChange(value)}
+ onTextChanged={handleDatasourceNameChange}
placeholder="Datasource Name"
editInteractionKind={EditInteractionKind.SINGLE}
isEditingDefault={props.focusOnMount}
+ updating={saveStatus.isSaving}
/>
+ {saveStatus.isSaving && }
);
};
diff --git a/app/client/src/pages/Editor/QueryEditor/Table.tsx b/app/client/src/pages/Editor/QueryEditor/Table.tsx
index 36d8e4e6278..9dc40037f59 100644
--- a/app/client/src/pages/Editor/QueryEditor/Table.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/Table.tsx
@@ -6,6 +6,8 @@ import {
import { useTable, useFlexLayout } from "react-table";
import styled from "styled-components";
import { CompactModeTypes, TABLE_SIZES } from "widgets/TableWidget";
+import AutoToolTipComponent from "components/designSystems/appsmith/AutoToolTipComponent";
+import { getType, Types } from "utils/TypeHelpers";
interface TableProps {
data: Record[];
@@ -30,6 +32,38 @@ const StyledTableWrapped = styled(TableWrapper)`
}
`;
+const renderCell = (props: any) => {
+ const value = props.cell.value;
+ let displayValue;
+ switch (getType(value)) {
+ case Types.NUMBER:
+ case Types.BOOLEAN:
+ displayValue = value.toString();
+ break;
+ case Types.ARRAY:
+ case Types.FUNCTION:
+ case Types.OBJECT:
+ displayValue = JSON.stringify(value);
+ break;
+ case Types.STRING:
+ displayValue = value;
+ break;
+ case Types.NULL:
+ case Types.UNDEFINED:
+ case Types.UNKNOWN:
+ displayValue = "";
+ break;
+ default:
+ displayValue = "";
+ }
+
+ return (
+
+ {displayValue}
+
+ );
+};
+
const Table = (props: TableProps) => {
const data = React.useMemo(() => props.data, [props.data]);
const columns = React.useMemo(() => {
@@ -38,6 +72,7 @@ const Table = (props: TableProps) => {
return {
Header: key,
accessor: key,
+ Cell: renderCell,
};
});
}
diff --git a/app/client/src/reducers/entityReducers/datasourceReducer.ts b/app/client/src/reducers/entityReducers/datasourceReducer.ts
index c53a48329dd..d9ce250ef5a 100644
--- a/app/client/src/reducers/entityReducers/datasourceReducer.ts
+++ b/app/client/src/reducers/entityReducers/datasourceReducer.ts
@@ -93,6 +93,20 @@ const datasourceReducer = createReducer(initialState, {
}),
};
},
+ [ReduxActionTypes.SAVE_DATASOURCE_NAME_SUCCESS]: (
+ state: DatasourceDataState,
+ action: ReduxAction,
+ ): DatasourceDataState => {
+ return {
+ ...state,
+ loading: false,
+ list: state.list.map(datasource => {
+ if (datasource.id === action.payload.id) return action.payload;
+
+ return datasource;
+ }),
+ };
+ },
[ReduxActionErrorTypes.CREATE_DATASOURCE_ERROR]: (
state: DatasourceDataState,
) => {
diff --git a/app/client/src/reducers/index.tsx b/app/client/src/reducers/index.tsx
index 1ca2fb02120..e6e9a946345 100644
--- a/app/client/src/reducers/index.tsx
+++ b/app/client/src/reducers/index.tsx
@@ -31,6 +31,7 @@ import { ApiNameReduxState } from "./uiReducers/apiNameReducer";
import { ExplorerReduxState } from "./uiReducers/explorerReducer";
import { PageDSLsReduxState } from "./uiReducers/pageDSLReducer";
import { AppDataState } from "@appsmith/reducers/entityReducers/appReducer";
+import { DatasourceNameReduxState } from "./uiReducers/datasourceNameReducer";
const appReducer = combineReducers({
entities: entityReducer,
@@ -62,6 +63,7 @@ export interface AppState {
apiName: ApiNameReduxState;
explorer: ExplorerReduxState;
pageDSLs: PageDSLsReduxState;
+ datasourceName: DatasourceNameReduxState;
};
entities: {
canvasWidgets: CanvasWidgetsReduxState;
diff --git a/app/client/src/reducers/uiReducers/datasourceNameReducer.ts b/app/client/src/reducers/uiReducers/datasourceNameReducer.ts
new file mode 100644
index 00000000000..4581dc6056a
--- /dev/null
+++ b/app/client/src/reducers/uiReducers/datasourceNameReducer.ts
@@ -0,0 +1,70 @@
+import { createReducer } from "utils/AppsmithUtils";
+import {
+ ReduxAction,
+ ReduxActionTypes,
+ ReduxActionErrorTypes,
+} from "constants/ReduxActionConstants";
+
+const initialState: DatasourceNameReduxState = {
+ isSaving: {},
+ errors: {},
+};
+
+const datasourceNameReducer = createReducer(initialState, {
+ [ReduxActionErrorTypes.SAVE_DATASOURCE_NAME_ERROR]: (
+ state: DatasourceNameReduxState,
+ action: ReduxAction<{ id: string }>,
+ ) => {
+ return {
+ ...state,
+ isSaving: {
+ ...state.isSaving,
+ [action.payload.id]: false,
+ },
+ errors: {
+ ...state.errors,
+ [action.payload.id]: true,
+ },
+ };
+ },
+
+ [ReduxActionTypes.SAVE_DATASOURCE_NAME]: (
+ state: DatasourceNameReduxState,
+ action: ReduxAction<{ id: string }>,
+ ) => {
+ return {
+ ...state,
+ isSaving: {
+ ...state.isSaving,
+ [action.payload.id]: true,
+ },
+ errors: {
+ ...state.errors,
+ [action.payload.id]: false,
+ },
+ };
+ },
+ [ReduxActionTypes.SAVE_DATASOURCE_NAME_SUCCESS]: (
+ state: DatasourceNameReduxState,
+ action: ReduxAction<{ id: string }>,
+ ) => {
+ return {
+ ...state,
+ isSaving: {
+ ...state.isSaving,
+ [action.payload.id]: false,
+ },
+ errors: {
+ ...state.errors,
+ [action.payload.id]: false,
+ },
+ };
+ },
+});
+
+export interface DatasourceNameReduxState {
+ isSaving: Record;
+ errors: Record;
+}
+
+export default datasourceNameReducer;
diff --git a/app/client/src/reducers/uiReducers/index.tsx b/app/client/src/reducers/uiReducers/index.tsx
index c2ed4b9742d..f3f4926a847 100644
--- a/app/client/src/reducers/uiReducers/index.tsx
+++ b/app/client/src/reducers/uiReducers/index.tsx
@@ -19,6 +19,7 @@ import helpReducer from "./helpReducer";
import apiNameReducer from "./apiNameReducer";
import explorerReducer from "./explorerReducer";
import pageDSLsReducer from "./pageDSLReducer";
+import datasourceNameReducer from "./datasourceNameReducer";
const uiReducer = combineReducers({
widgetSidebar: widgetSidebarReducer,
@@ -37,6 +38,7 @@ const uiReducer = combineReducers({
imports: importReducer,
queryPane: queryPaneReducer,
datasourcePane: datasourcePaneReducer,
+ datasourceName: datasourceNameReducer,
help: helpReducer,
apiName: apiNameReducer,
explorer: explorerReducer,
diff --git a/app/client/src/sagas/DatasourcesSagas.ts b/app/client/src/sagas/DatasourcesSagas.ts
index 4c02af58034..e6ea0cf5f57 100644
--- a/app/client/src/sagas/DatasourcesSagas.ts
+++ b/app/client/src/sagas/DatasourcesSagas.ts
@@ -162,14 +162,16 @@ function* updateDatasourceSaga(
}>,
) {
try {
+ const datasourcePayload = _.omit(actionPayload.payload.datasource, "name");
+
const response: GenericApiResponse = yield DatasourcesApi.updateDatasource(
- actionPayload.payload.datasource,
- actionPayload.payload.datasource.id,
+ datasourcePayload,
+ datasourcePayload.id,
);
const isValidResponse = yield validateResponse(response);
if (isValidResponse) {
AppToaster.show({
- message: `${actionPayload.payload.datasource.name} Datasource updated`,
+ message: `${response.data.name} Datasource updated`,
type: ToastType.SUCCESS,
});
yield put({
@@ -183,9 +185,7 @@ function* updateDatasourceSaga(
},
});
if (actionPayload.payload.reinitializeForm) {
- yield put(
- initialize(DATASOURCE_DB_FORM, actionPayload.payload.datasource),
- );
+ yield put(initialize(DATASOURCE_DB_FORM, datasourcePayload));
}
}
} catch (error) {
@@ -196,6 +196,38 @@ function* updateDatasourceSaga(
}
}
+function* saveDatasourceNameSaga(
+ actionPayload: ReduxAction<{ id: string; name: string }>,
+) {
+ try {
+ const response: GenericApiResponse = yield DatasourcesApi.updateDatasource(
+ {
+ name: actionPayload.payload.name,
+ },
+ actionPayload.payload.id,
+ );
+
+ const isValidResponse = yield validateResponse(response);
+ if (isValidResponse) {
+ yield put({
+ type: ReduxActionTypes.SAVE_DATASOURCE_NAME_SUCCESS,
+ payload: { ...response.data },
+ });
+ }
+ } catch (error) {
+ yield put({
+ type: ReduxActionErrorTypes.SAVE_DATASOURCE_NAME_ERROR,
+ payload: { id: actionPayload.payload.id },
+ });
+ }
+}
+
+function* handleDatasourceNameChangeFailureSaga(
+ action: ReduxAction<{ oldName: string }>,
+) {
+ yield put(change(DATASOURCE_DB_FORM, "name", action.payload.oldName));
+}
+
function* testDatasourceSaga(actionPayload: ReduxAction) {
const organizationId = yield select(getCurrentOrgId);
const { initialValues, values } = yield select(
@@ -405,8 +437,9 @@ function* switchDatasourceSaga(action: ReduxAction<{ datasourceId: string }>) {
function* formValueChangeSaga(
actionPayload: ReduxActionWithMeta,
) {
- const { form } = actionPayload.meta;
+ const { form, field } = actionPayload.meta;
if (form !== DATASOURCE_DB_FORM) return;
+ if (field === "name") return;
yield all([call(updateDraftsSaga)]);
}
@@ -466,6 +499,11 @@ export function* watchDatasourcesSagas() {
createDatasourceFromFormSaga,
),
takeEvery(ReduxActionTypes.UPDATE_DATASOURCE_INIT, updateDatasourceSaga),
+ takeEvery(ReduxActionTypes.SAVE_DATASOURCE_NAME, saveDatasourceNameSaga),
+ takeEvery(
+ ReduxActionErrorTypes.SAVE_DATASOURCE_NAME_ERROR,
+ handleDatasourceNameChangeFailureSaga,
+ ),
takeEvery(ReduxActionTypes.TEST_DATASOURCE_INIT, testDatasourceSaga),
takeEvery(ReduxActionTypes.DELETE_DATASOURCE_INIT, deleteDatasourceSaga),
takeEvery(ReduxActionTypes.CHANGE_DATASOURCE, changeDatasourceSaga),
diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx
index 4c194915958..6e09af77de5 100644
--- a/app/client/src/sagas/PageSagas.tsx
+++ b/app/client/src/sagas/PageSagas.tsx
@@ -91,20 +91,18 @@ export function* fetchPageListSaga(
isDefault: page.isDefault,
}));
yield put({
- type: ReduxActionTypes.FETCH_PAGE_LIST_SUCCESS,
+ type: ReduxActionTypes.SET_CURRENT_ORG_ID,
payload: {
- pages,
- applicationId,
+ orgId,
},
});
yield put({
- type: ReduxActionTypes.SET_CURRENT_ORG_ID,
+ type: ReduxActionTypes.FETCH_PAGE_LIST_SUCCESS,
payload: {
- orgId,
+ pages,
+ applicationId,
},
});
-
- return;
}
} catch (error) {
yield put({
diff --git a/app/client/src/sagas/PluginSagas.ts b/app/client/src/sagas/PluginSagas.ts
index 34c78a4c9fa..45bbf5d80cb 100644
--- a/app/client/src/sagas/PluginSagas.ts
+++ b/app/client/src/sagas/PluginSagas.ts
@@ -11,6 +11,9 @@ import { getCurrentOrgId } from "selectors/organizationSelectors";
function* fetchPluginsSaga() {
try {
const orgId = yield select(getCurrentOrgId);
+ if (!orgId) {
+ throw Error("Org id does not exist");
+ }
const pluginsResponse = yield call(PluginsApi.fetchPlugins, orgId);
const isValid = yield validateResponse(pluginsResponse);
if (isValid) {
diff --git a/app/client/src/selectors/entitiesSelector.ts b/app/client/src/selectors/entitiesSelector.ts
index f10c8d7937d..705ba20153a 100644
--- a/app/client/src/selectors/entitiesSelector.ts
+++ b/app/client/src/selectors/entitiesSelector.ts
@@ -101,7 +101,7 @@ export const getDatasourceRefs = (state: AppState): any =>
export const getDatasource = (
state: AppState,
datasourceId: string,
-): Partial | undefined =>
+): Datasource | undefined =>
state.entities.datasources.list.find(
datasource => datasource.id === datasourceId,
);
diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx
index ec55c2e7ed5..83b9bb58f69 100644
--- a/app/client/src/utils/AnalyticsUtil.tsx
+++ b/app/client/src/utils/AnalyticsUtil.tsx
@@ -200,9 +200,14 @@ class AnalyticsUtil {
});
}
if (windowDoc.hj) {
- // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
- // @ts-ignore
- window.hj("identify", userData.email, { email: userData.email });
+ windowDoc.hj("identify", userData.email, { email: userData.email });
+ }
+ if (windowDoc.smartLook) {
+ windowDoc.smartlook("identify", userId, {
+ email: userData.email,
+ name: userData.name,
+ userId: userId,
+ });
}
}
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx
index 78ccdfc9062..0795eeb5478 100644
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@@ -81,7 +81,6 @@ class TableWidget extends BaseWidget {
nextPageKey: VALIDATION_TYPES.TEXT,
prevPageKey: VALIDATION_TYPES.TEXT,
label: VALIDATION_TYPES.TEXT,
- selectedRowIndex: VALIDATION_TYPES.NUMBER,
searchText: VALIDATION_TYPES.TEXT,
defaultSearchText: VALIDATION_TYPES.TEXT,
};
@@ -337,7 +336,8 @@ class TableWidget extends BaseWidget {
JSON.stringify(prevProps.filters) ||
this.props.searchText !== prevProps.searchText ||
JSON.stringify(this.props.sortedColumn) !==
- JSON.stringify(prevProps.sortedColumn)
+ JSON.stringify(prevProps.sortedColumn) ||
+ !this.props.filteredTableData
) {
const filteredTableData = this.filterTableData();
super.updateWidgetMetaProperty("filteredTableData", filteredTableData);