From 4f8a3b59688aec88c960b4573bc2625623329fe0 Mon Sep 17 00:00:00 2001 From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com> Date: Wed, 26 Aug 2020 10:54:44 +0530 Subject: [PATCH 01/11] Save datasource name on change (#373) --- app/client/src/actions/datasourceActions.ts | 5 ++ .../src/constants/ReduxActionConstants.tsx | 3 + .../pages/Editor/DataSourceEditor/DBForm.tsx | 6 +- .../Editor/DataSourceEditor/FormTitle.tsx | 53 +++++++++++--- .../entityReducers/datasourceReducer.ts | 14 ++++ app/client/src/reducers/index.tsx | 2 + .../uiReducers/datasourceNameReducer.ts | 70 +++++++++++++++++++ app/client/src/reducers/uiReducers/index.tsx | 2 + app/client/src/sagas/DatasourcesSagas.ts | 52 ++++++++++++-- app/client/src/selectors/entitiesSelector.ts | 2 +- 10 files changed, 188 insertions(+), 21 deletions(-) create mode 100644 app/client/src/reducers/uiReducers/datasourceNameReducer.ts diff --git a/app/client/src/actions/datasourceActions.ts b/app/client/src/actions/datasourceActions.ts index 292ed39011..0ea4e64793 100644 --- a/app/client/src/actions/datasourceActions.ts +++ b/app/client/src/actions/datasourceActions.ts @@ -25,6 +25,11 @@ export const updateDatasource = ( }; }; +export const saveDatasourceName = (payload: { id: string; name: string }) => ({ + type: ReduxActionTypes.SAVE_DATASOURCE_NAME, + payload: payload, +}); + export const changeDatasource = (payload: Datasource) => { return { type: ReduxActionTypes.CHANGE_DATASOURCE, diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index 1996a0ab1a..3dea6e5354 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 8d991f3a9a..842416c00a 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx @@ -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 55a0370e06..1d0adafdf0 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/reducers/entityReducers/datasourceReducer.ts b/app/client/src/reducers/entityReducers/datasourceReducer.ts index c53a48329d..d9ce250ef5 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 1ca2fb0212..e6e9a94634 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 0000000000..4581dc6056 --- /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 c2ed4b9742..f3f4926a84 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 4c02af5803..e6ea0cf5f5 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/selectors/entitiesSelector.ts b/app/client/src/selectors/entitiesSelector.ts index f10c8d7937..705ba20153 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, ); From a8e6b268ab22e3fda3487d362300483a72feebdd Mon Sep 17 00:00:00 2001 From: vicky-primathon <67091118+vicky-primathon@users.noreply.github.com> Date: Wed, 26 Aug 2020 11:11:18 +0530 Subject: [PATCH 02/11] Setting table widget filteredTableData after reset. (#425) --- app/client/src/widgets/TableWidget.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx index 78ccdfc906..0795eeb547 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); From d511b6ecabc91525ec0c9862f5bab23a5dedb330 Mon Sep 17 00:00:00 2001 From: devrk96 Date: Wed, 26 Aug 2020 12:44:41 +0530 Subject: [PATCH 03/11] Color picker component (#405) * color picker functinalities and ui implemented * unused import removed * PR comments resolved --- .../src/components/ads/ColorSelector.tsx | 94 ++++++++++++++++++- .../stories/ColorSelector.stories.tsx | 23 +++++ 2 files changed, 113 insertions(+), 4 deletions(-) create mode 100644 app/client/src/components/stories/ColorSelector.stories.tsx diff --git a/app/client/src/components/ads/ColorSelector.tsx b/app/client/src/components/ads/ColorSelector.tsx index 57d0063757..4784e7d1df 100644 --- a/app/client/src/components/ads/ColorSelector.tsx +++ b/app/client/src/components/ads/ColorSelector.tsx @@ -1,9 +1,95 @@ +import React, { useState } from "react"; +import styled from "styled-components"; import { CommonComponentProps } from "./common"; +export const appColorPalette = [ + "#4F70FD", + "#54A9FB", + "#5ED3DA", + "#F56AF4", + "#F36380", + "#FE9F44", + "#E9C951", + "#A8D76C", + "#6C4CF1", +]; + type ColorSelectorProps = CommonComponentProps & { - onSelect: (hex: string) => void; + onSelect?: (hex: string) => void; + colorPalette?: string[]; + fill?: boolean; }; -export default function ColorSelector(props: ColorSelectorProps) { - return null; -} +const Palette = styled.div<{ fill?: boolean }>` + display: flex; + align-items: center; + flex-wrap: wrap; + width: ${props => (props.fill ? "100%" : "234px")}; +`; + +const ColorBox = styled.div<{ selected: string; color: string }>` + width: ${props => props.theme.spaces[8]}px; + height: ${props => props.theme.spaces[8]}px; + margin: 0 ${props => props.theme.spaces[2]}px + ${props => props.theme.spaces[2]}px 0; + background-color: ${props => props.color}; + cursor: pointer; + position: relative; + + &:hover { + box-shadow: 0px 0px 0px ${props => props.theme.spaces[1] - 1}px #353535; + } + + &:last-child { + margin-right: ${props => props.theme.spaces[1] - 1}px; + } + + ${props => + props.selected === props.color + ? `&::before { + content: ""; + position: absolute; + left: ${props.theme.spaces[3] - 1}px; + top: ${props.theme.spaces[1] - 1}px + width: ${props.theme.spaces[2] - 1}px + height: ${props.theme.spaces[4] - 1}px + border: 1.5px solid ${props.theme.colors.blackShades[9]}; + border-width: 0 1.5px 1.5px 0; + transform: rotate(45deg); + }` + : ` + &::before { + display: none; + } + `} +`; + +const ColorSelector = (props: ColorSelectorProps) => { + const [selected, setSelected] = useState(""); + console.log("colors", props.colorPalette); + + return ( + + {props.colorPalette && + props.colorPalette.map((hex: string, index: number) => { + return ( + { + setSelected(hex); + props.onSelect && props.onSelect(hex); + }} + /> + ); + })} + + ); +}; + +ColorSelector.defaultProps = { + fill: false, +}; + +export default ColorSelector; diff --git a/app/client/src/components/stories/ColorSelector.stories.tsx b/app/client/src/components/stories/ColorSelector.stories.tsx new file mode 100644 index 0000000000..8303226525 --- /dev/null +++ b/app/client/src/components/stories/ColorSelector.stories.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { action } from "@storybook/addon-actions"; +import ColorSelector, { appColorPalette } from "../ads/ColorSelector"; +import { withKnobs, array, boolean } from "@storybook/addon-knobs"; +import { withDesign } from "storybook-addon-designs"; + +export default { + title: "ColorSelector", + component: ColorSelector, + decorators: [withKnobs, withDesign], +}; + +const defaultValue = appColorPalette; + +export const ColorPickerStory = () => ( +
+ +
+); From 4da585a5af8aac87312b22a9b3fe718d9f0b027f Mon Sep 17 00:00:00 2001 From: devrk96 Date: Wed, 26 Aug 2020 12:48:04 +0530 Subject: [PATCH 04/11] Icon picker component (#404) * icon picker functionalities and UI implemented * appicon component added for icon picker * PR comments resolved * PR comment on appicon size resolved * icon picker story fixed and enum added for names --- app/client/src/assets/icons/ads/bag.svg | 4 + app/client/src/assets/icons/ads/book.svg | 5 + app/client/src/assets/icons/ads/calender.svg | 4 + app/client/src/assets/icons/ads/camera.svg | 5 + app/client/src/assets/icons/ads/chat.svg | 4 + app/client/src/assets/icons/ads/file.svg | 4 + app/client/src/assets/icons/ads/flight.svg | 4 + app/client/src/assets/icons/ads/frame.svg | 5 + app/client/src/assets/icons/ads/globe.svg | 4 + app/client/src/assets/icons/ads/heart.svg | 4 + app/client/src/assets/icons/ads/product.svg | 4 + app/client/src/assets/icons/ads/shopper.svg | 4 + app/client/src/components/ads/AppIcon.tsx | 115 ++++++++++++++++++ app/client/src/components/ads/Button.tsx | 4 +- app/client/src/components/ads/Icon.tsx | 39 +++--- .../src/components/ads/IconSelector.tsx | 95 ++++++++++++++- app/client/src/components/ads/Tabs.tsx | 2 +- .../src/components/stories/Icon.stories.tsx | 65 +++++++--- .../stories/IconSelector.stories.tsx | 54 ++++++++ .../src/components/stories/Table.stories.tsx | 2 +- 20 files changed, 378 insertions(+), 49 deletions(-) create mode 100644 app/client/src/assets/icons/ads/bag.svg create mode 100644 app/client/src/assets/icons/ads/book.svg create mode 100644 app/client/src/assets/icons/ads/calender.svg create mode 100644 app/client/src/assets/icons/ads/camera.svg create mode 100644 app/client/src/assets/icons/ads/chat.svg create mode 100644 app/client/src/assets/icons/ads/file.svg create mode 100644 app/client/src/assets/icons/ads/flight.svg create mode 100644 app/client/src/assets/icons/ads/frame.svg create mode 100644 app/client/src/assets/icons/ads/globe.svg create mode 100644 app/client/src/assets/icons/ads/heart.svg create mode 100644 app/client/src/assets/icons/ads/product.svg create mode 100644 app/client/src/assets/icons/ads/shopper.svg create mode 100644 app/client/src/components/ads/AppIcon.tsx create mode 100644 app/client/src/components/stories/IconSelector.stories.tsx diff --git a/app/client/src/assets/icons/ads/bag.svg b/app/client/src/assets/icons/ads/bag.svg new file mode 100644 index 0000000000..04096a467d --- /dev/null +++ b/app/client/src/assets/icons/ads/bag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/book.svg b/app/client/src/assets/icons/ads/book.svg new file mode 100644 index 0000000000..f016135fcd --- /dev/null +++ b/app/client/src/assets/icons/ads/book.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/src/assets/icons/ads/calender.svg b/app/client/src/assets/icons/ads/calender.svg new file mode 100644 index 0000000000..8be12ddf06 --- /dev/null +++ b/app/client/src/assets/icons/ads/calender.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/camera.svg b/app/client/src/assets/icons/ads/camera.svg new file mode 100644 index 0000000000..d1b23590c0 --- /dev/null +++ b/app/client/src/assets/icons/ads/camera.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/src/assets/icons/ads/chat.svg b/app/client/src/assets/icons/ads/chat.svg new file mode 100644 index 0000000000..6fbbcfc754 --- /dev/null +++ b/app/client/src/assets/icons/ads/chat.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/file.svg b/app/client/src/assets/icons/ads/file.svg new file mode 100644 index 0000000000..4e83e5a8ae --- /dev/null +++ b/app/client/src/assets/icons/ads/file.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/flight.svg b/app/client/src/assets/icons/ads/flight.svg new file mode 100644 index 0000000000..0a6daa90ab --- /dev/null +++ b/app/client/src/assets/icons/ads/flight.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/frame.svg b/app/client/src/assets/icons/ads/frame.svg new file mode 100644 index 0000000000..3bd9d4a502 --- /dev/null +++ b/app/client/src/assets/icons/ads/frame.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/client/src/assets/icons/ads/globe.svg b/app/client/src/assets/icons/ads/globe.svg new file mode 100644 index 0000000000..228290a5d6 --- /dev/null +++ b/app/client/src/assets/icons/ads/globe.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/heart.svg b/app/client/src/assets/icons/ads/heart.svg new file mode 100644 index 0000000000..372367768d --- /dev/null +++ b/app/client/src/assets/icons/ads/heart.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/product.svg b/app/client/src/assets/icons/ads/product.svg new file mode 100644 index 0000000000..9237160df7 --- /dev/null +++ b/app/client/src/assets/icons/ads/product.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/shopper.svg b/app/client/src/assets/icons/ads/shopper.svg new file mode 100644 index 0000000000..e8deb2e930 --- /dev/null +++ b/app/client/src/assets/icons/ads/shopper.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/components/ads/AppIcon.tsx b/app/client/src/components/ads/AppIcon.tsx new file mode 100644 index 0000000000..fe8fd23ce5 --- /dev/null +++ b/app/client/src/components/ads/AppIcon.tsx @@ -0,0 +1,115 @@ +import React from "react"; +import { ReactComponent as BagIcon } from "assets/icons/ads/bag.svg"; +import { ReactComponent as ProductIcon } from "assets/icons/ads/product.svg"; +import { ReactComponent as BookIcon } from "assets/icons/ads/book.svg"; +import { ReactComponent as CameraIcon } from "assets/icons/ads/camera.svg"; +import { ReactComponent as FileIcon } from "assets/icons/ads/file.svg"; +import { ReactComponent as ChatIcon } from "assets/icons/ads/chat.svg"; +import { ReactComponent as CalenderIcon } from "assets/icons/ads/calender.svg"; +import { ReactComponent as FrameIcon } from "assets/icons/ads/frame.svg"; +import { ReactComponent as GlobeIcon } from "assets/icons/ads/globe.svg"; +import { ReactComponent as ShopperIcon } from "assets/icons/ads/shopper.svg"; +import { ReactComponent as HeartIcon } from "assets/icons/ads/heart.svg"; +import { ReactComponent as FlightIcon } from "assets/icons/ads/flight.svg"; + +import styled from "styled-components"; +import { Size } from "./Button"; + +export enum AppIconName { + BAG = "bag", + PRODUCT = "product", + BOOK = "book", + CAMERA = "camera", + FILE = "file", + CHAT = "chat", + CALENDER = "calender", + FLIGHT = "flight", + FRAME = "frame", + GLOBE = "globe", + SHOPPER = "shopper", + HEART = "heart", +} + +export const sizeHandler = (size: Size) => { + let iconSize = 0; + switch (size) { + case Size.small: + iconSize = 20; + break; + case Size.medium: + iconSize = 30; + break; + case Size.large: + iconSize = 54; + break; + } + return iconSize; +}; + +const IconWrapper = styled.div` + cursor: pointer; + &:focus { + outline: none; + } + display: flex; + svg { + width: ${props => sizeHandler(props.size)}px; + height: ${props => sizeHandler(props.size)}px; + path { + fill: ${props => props.theme.colors.blackShades[9]}; + } + } +`; + +export type AppIconProps = { + size: Size; + name: AppIconName; +}; + +const AppIcon = (props: AppIconProps) => { + let returnIcon; + switch (props.name) { + case AppIconName.BAG: + returnIcon = ; + break; + case AppIconName.PRODUCT: + returnIcon = ; + break; + case AppIconName.BOOK: + returnIcon = ; + break; + case AppIconName.CAMERA: + returnIcon = ; + break; + case AppIconName.FILE: + returnIcon = ; + break; + case AppIconName.CHAT: + returnIcon = ; + break; + case AppIconName.CALENDER: + returnIcon = ; + break; + case AppIconName.FRAME: + returnIcon = ; + break; + case AppIconName.GLOBE: + returnIcon = ; + break; + case AppIconName.SHOPPER: + returnIcon = ; + break; + case AppIconName.HEART: + returnIcon = ; + break; + case AppIconName.FLIGHT: + returnIcon = ; + break; + default: + returnIcon = null; + break; + } + return returnIcon ? {returnIcon} : null; +}; + +export default AppIcon; diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx index 21a969a2cc..38329daf44 100644 --- a/app/client/src/components/ads/Button.tsx +++ b/app/client/src/components/ads/Button.tsx @@ -1,7 +1,7 @@ import React from "react"; import { CommonComponentProps, hexToRgba, ThemeProp } from "./common"; import styled from "styled-components"; -import { IconName, Icon } from "./Icon"; +import Icon, { IconName } from "./Icon"; import Spinner from "./Spinner"; import { mediumButton, @@ -233,7 +233,7 @@ const btnFontStyles = (props: ThemeProp & ButtonProps): BtnFontType => { buttonFont = largeButton; padding = !props.text && props.icon - ? `${props.theme.spaces[5] - 1}px ${props.theme.spaces[5] - 1}px` + ? `${props.theme.spaces[3]}px` : `${props.theme.spaces[5] - 1}px ${props.theme.spaces[12] - 4}px`; break; } diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index 8cb876cb1a..c662dcda7c 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -3,6 +3,7 @@ import { ReactComponent as DeleteIcon } from "assets/icons/ads/delete.svg"; import { ReactComponent as UserIcon } from "assets/icons/ads/user.svg"; import { ReactComponent as GeneralIcon } from "assets/icons/ads/general.svg"; import { ReactComponent as BillingIcon } from "assets/icons/ads/billing.svg"; + import styled from "styled-components"; import { Size } from "./Button"; import { sizeHandler } from "./Spinner"; @@ -48,42 +49,36 @@ export type IconProps = { size?: Size; name?: IconName; invisible?: boolean; + className?: string; }; -export const Icon = (props: IconProps) => { +const Icon = (props: IconProps) => { let returnIcon; switch (props.name) { case "delete": - returnIcon = ( - - - - ); + returnIcon = ; break; case "user": - returnIcon = ( - - - - ); + returnIcon = ; break; case "general": - returnIcon = ( - - - - ); + returnIcon = ; break; case "billing": - returnIcon = ( - - - - ); + returnIcon = ; break; default: returnIcon = null; break; } - return returnIcon; + return returnIcon ? ( + + {returnIcon} + + ) : null; }; + +export default Icon; diff --git a/app/client/src/components/ads/IconSelector.tsx b/app/client/src/components/ads/IconSelector.tsx index 49d7b8304c..c0f354960f 100644 --- a/app/client/src/components/ads/IconSelector.tsx +++ b/app/client/src/components/ads/IconSelector.tsx @@ -1,10 +1,95 @@ +import React, { useState, useEffect } from "react"; +import styled from "styled-components"; +import AppIcon, { AppIconName } from "./AppIcon"; +import { Size } from "./Button"; import { CommonComponentProps } from "./common"; -import { IconName } from "./Icon"; + +export const appIconPalette = [ + AppIconName.BAG, + AppIconName.PRODUCT, + AppIconName.BOOK, + AppIconName.CAMERA, + AppIconName.FILE, + AppIconName.CHAT, + AppIconName.CALENDER, + AppIconName.FLIGHT, + AppIconName.FRAME, + AppIconName.GLOBE, + AppIconName.SHOPPER, + AppIconName.HEART, +]; type IconSelectorProps = CommonComponentProps & { - onSelect: (icon: IconName) => void; + onSelect?: (icon: AppIconName) => void; + selectedColor: string; + selectedIcon?: AppIconName; + iconPalette?: AppIconName[]; + fill?: boolean; }; -export default function IconSelector(props: IconSelectorProps) { - return null; -} +const IconPalette = styled.div<{ fill?: boolean }>` + display: flex; + align-items: center; + flex-wrap: wrap; + width: ${props => (props.fill ? "100%" : "234px")}; +`; + +const IconBox = styled.div<{ + iconName: AppIconName; + selected: AppIconName; + bgColor: string; +}>` + padding: ${props => props.theme.spaces[2]}px + ${props => props.theme.spaces[2] - 1}px; + margin: 0 ${props => props.theme.spaces[2]}px + ${props => props.theme.spaces[2]}px 0; + background-color: ${props => + props.selected === props.iconName + ? props.bgColor + : props.theme.colors.blackShades[2]}; + cursor: pointer; + position: relative; + + &:last-child { + margin-right: ${props => props.theme.spaces[0]}px; + } +`; + +const IconSelector = (props: IconSelectorProps) => { + const [selected, setSelected] = useState(appIconPalette[0]); + + useEffect(() => { + if (props.selectedIcon) { + setSelected(props.selectedIcon); + } + }, [props.selectedIcon]); + + return ( + + {props.iconPalette && + props.iconPalette.map((iconName: AppIconName, index: number) => { + return ( + { + setSelected(iconName); + props.onSelect && props.onSelect(iconName); + }} + > + + + ); + })} + + ); +}; + +IconSelector.defaultProps = { + fill: false, + iconPalette: appIconPalette, +}; + +export default IconSelector; diff --git a/app/client/src/components/ads/Tabs.tsx b/app/client/src/components/ads/Tabs.tsx index c5ade3092e..68f5303705 100644 --- a/app/client/src/components/ads/Tabs.tsx +++ b/app/client/src/components/ads/Tabs.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import "react-tabs/style/react-tabs.css"; import styled from "styled-components"; -import { Icon, IconName } from "./Icon"; +import Icon, { IconName } from "./Icon"; import { Size } from "./Button"; const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>` diff --git a/app/client/src/components/stories/Icon.stories.tsx b/app/client/src/components/stories/Icon.stories.tsx index abe8509877..7e267cad2d 100644 --- a/app/client/src/components/stories/Icon.stories.tsx +++ b/app/client/src/components/stories/Icon.stories.tsx @@ -1,8 +1,9 @@ import React from "react"; -import { Icon } from "../ads/Icon"; import Button, { Size, Category, Variant } from "components/ads/Button"; import { withKnobs, select, boolean } from "@storybook/addon-knobs"; import { withDesign } from "storybook-addon-designs"; +import Icon from "../ads/Icon"; +import AppIcon, { AppIconName } from "../ads/AppIcon"; export default { title: "Icon", @@ -11,29 +12,57 @@ export default { }; export const ButtonIcon = () => ( - +
+ +
); export const BordelessIcon = () => ( -
+
); + +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 0000000000..9058aad848 --- /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/Table.stories.tsx b/app/client/src/components/stories/Table.stories.tsx index 5144f8ae7f..1e40156835 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", From 6ff6b5e1a1aa90bc016e4401bd19722ef12c163e Mon Sep 17 00:00:00 2001 From: devrk96 Date: Wed, 26 Aug 2020 12:55:27 +0530 Subject: [PATCH 05/11] Search input component (#403) * search input implemented with both variant * classname bug resolved in icon component * PR comments resolved * ellipsis added for long search keywords --- app/client/src/assets/icons/ads/close.svg | 3 + app/client/src/assets/icons/ads/search.svg | 4 + app/client/src/components/ads/Icon.tsx | 13 +- app/client/src/components/ads/SearchInput.tsx | 138 ++++++++++++++++++ .../stories/SearchInput.stories.tsx | 26 ++++ 5 files changed, 183 insertions(+), 1 deletion(-) create mode 100644 app/client/src/assets/icons/ads/close.svg create mode 100644 app/client/src/assets/icons/ads/search.svg create mode 100644 app/client/src/components/ads/SearchInput.tsx create mode 100644 app/client/src/components/stories/SearchInput.stories.tsx diff --git a/app/client/src/assets/icons/ads/close.svg b/app/client/src/assets/icons/ads/close.svg new file mode 100644 index 0000000000..afaca4c528 --- /dev/null +++ b/app/client/src/assets/icons/ads/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/assets/icons/ads/search.svg b/app/client/src/assets/icons/ads/search.svg new file mode 100644 index 0000000000..e3e23f0e53 --- /dev/null +++ b/app/client/src/assets/icons/ads/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index c662dcda7c..c6a3a078fb 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -3,7 +3,8 @@ import { ReactComponent as DeleteIcon } from "assets/icons/ads/delete.svg"; import { ReactComponent as UserIcon } from "assets/icons/ads/user.svg"; import { ReactComponent as GeneralIcon } from "assets/icons/ads/general.svg"; import { ReactComponent as BillingIcon } from "assets/icons/ads/billing.svg"; - +import { ReactComponent as SearchIcon } from "assets/icons/ads/search.svg"; +import { ReactComponent as CloseIcon } from "assets/icons/ads/close.svg"; import styled from "styled-components"; import { Size } from "./Button"; import { sizeHandler } from "./Spinner"; @@ -14,6 +15,8 @@ export type IconName = | "user" | "general" | "billing" + | "search" + | "close" | undefined; const IconWrapper = styled.div` @@ -50,6 +53,7 @@ export type IconProps = { name?: IconName; invisible?: boolean; className?: string; + click?: () => void; }; const Icon = (props: IconProps) => { @@ -67,6 +71,12 @@ const Icon = (props: IconProps) => { case "billing": returnIcon = ; break; + case "search": + returnIcon = ; + break; + case "close": + returnIcon = ; + break; default: returnIcon = null; break; @@ -75,6 +85,7 @@ const Icon = (props: IconProps) => { props.click && props.click()} > {returnIcon} diff --git a/app/client/src/components/ads/SearchInput.tsx b/app/client/src/components/ads/SearchInput.tsx new file mode 100644 index 0000000000..91816d479d --- /dev/null +++ b/app/client/src/components/ads/SearchInput.tsx @@ -0,0 +1,138 @@ +import React, { forwardRef, Ref, useCallback, useMemo, useState } from "react"; +import { CommonComponentProps } from "./common"; +import styled from "styled-components"; +import { Size } from "./Button"; +import { Icon } from "./Icon"; + +export enum SearchVariant { + BACKGROUND = "BACKGROUND", + SEAMLESS = "SEAMLESS", +} + +export type TextInputProps = CommonComponentProps & { + placeholder?: string; + fill?: boolean; + defaultValue?: string; + variant?: SearchVariant; + onChange?: (value: string) => void; +}; + +const StyledInput = styled.input< + TextInputProps & { value?: string; isFocused: boolean } +>` + width: ${props => + props.value && props.variant === SearchVariant.BACKGROUND && props.isFocused + ? "calc(100% - 50px)" + : "100%"}; + border-radius: 0; + outline: 0; + box-shadow: none; + border: none; + padding: 0; + background-color: transparent; + font-size: ${props => props.theme.typography.p1.fontSize}px; + font-weight: ${props => props.theme.typography.p1.fontWeight}; + line-height: ${props => props.theme.typography.p1.lineHeight}px; + letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px; + text-overflow: ellipsis; + + color: ${props => props.theme.colors.blackShades[9]}; + + &::placeholder { + color: ${props => props.theme.colors.blackShades[5]}; + } +`; + +const InputWrapper = styled.div<{ + value?: string; + isFocused: boolean; + variant?: SearchVariant; + fill?: boolean; +}>` + display: flex; + align-items: center; + padding: ${props => props.theme.spaces[3]}px + ${props => props.theme.spaces[4]}px ${props => props.theme.spaces[3]}px + ${props => props.theme.spaces[6]}px; + width: ${props => (props.fill ? "100%" : "210px")}; + background-color: ${props => + props.variant === SearchVariant.SEAMLESS ? "transparent" : "#262626"}; + ${props => + props.variant === SearchVariant.BACKGROUND + ? props.isFocused || props.value + ? `box-shadow: 0px 1px 0px ${props.theme.colors.info.main}` + : `box-shadow: 0px 1px 0px ${props.theme.colors.blackShades[4]}` + : null} + + .search-icon { + margin-right: ${props => props.theme.spaces[5]}px; + + svg { + path, + circle { + stroke: ${props => + props.isFocused || props.value + ? props.theme.colors.blackShades[7] + : props.theme.colors.blackShades[5]}; + } + } + } + + .close-icon { + margin-right: ${props => props.theme.spaces[4]}px; + margin-left: ${props => props.theme.spaces[4]}px; + } +`; + +const SearchInput = forwardRef( + (props: TextInputProps, ref: Ref) => { + const [searchValue, setSearchValue] = useState(props.defaultValue); + const [isFocused, setIsFocused] = useState(false); + + const memoizedChangeHandler = useCallback( + el => { + setSearchValue(el.target.value); + return props.onChange && props.onChange(el.target.value); + }, + [props], + ); + + return ( + + + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + onChange={memoizedChangeHandler} + /> + {searchValue && props.variant === SearchVariant.BACKGROUND ? ( + setSearchValue("")} + /> + ) : null} + + ); + }, +); + +SearchInput.defaultProps = { + fill: false, +}; + +SearchInput.displayName = "SearchInput"; + +export default SearchInput; 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 0000000000..c245cc932e --- /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 = () => ( +
+ +
+); From f35e2d7f05de32b17a1456032cebcf3acf1271d7 Mon Sep 17 00:00:00 2001 From: satbir121 <39981226+satbir121@users.noreply.github.com> Date: Wed, 26 Aug 2020 13:53:43 +0530 Subject: [PATCH 06/11] Fixing icon path. (#429) --- app/client/src/components/ads/SearchInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/components/ads/SearchInput.tsx b/app/client/src/components/ads/SearchInput.tsx index 91816d479d..dbe8fb4d36 100644 --- a/app/client/src/components/ads/SearchInput.tsx +++ b/app/client/src/components/ads/SearchInput.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, Ref, useCallback, useMemo, useState } from "react"; import { CommonComponentProps } from "./common"; import styled from "styled-components"; import { Size } from "./Button"; -import { Icon } from "./Icon"; +import Icon from "./Icon"; export enum SearchVariant { BACKGROUND = "BACKGROUND", From 372fb3b33d91e426c7d67ac5e735c29e2db5caec Mon Sep 17 00:00:00 2001 From: devrk96 Date: Wed, 26 Aug 2020 14:34:58 +0530 Subject: [PATCH 07/11] Editable text component (#362) * editable text component started * success and error callback implemented * feedback implemented and success or error state corrected * editable input ui fixed * PR comments resolved * isSaving state refactored from PR comment * icon import updated * Changing path * icon import fixed Co-authored-by: Satbir Singh --- app/client/src/assets/icons/ads/edit.svg | 3 + app/client/src/assets/icons/ads/error.svg | 4 + app/client/src/assets/icons/ads/success.svg | 4 + .../src/components/ads/EditableInput.tsx | 26 -- .../src/components/ads/EditableText.tsx | 292 ++++++++++++++++++ app/client/src/components/ads/Icon.tsx | 21 +- .../stories/ColorSelector.stories.tsx | 2 +- .../stories/EditableText.stories.tsx | 60 ++++ 8 files changed, 383 insertions(+), 29 deletions(-) create mode 100644 app/client/src/assets/icons/ads/edit.svg create mode 100644 app/client/src/assets/icons/ads/error.svg create mode 100644 app/client/src/assets/icons/ads/success.svg delete mode 100644 app/client/src/components/ads/EditableInput.tsx create mode 100644 app/client/src/components/ads/EditableText.tsx create mode 100644 app/client/src/components/stories/EditableText.stories.tsx diff --git a/app/client/src/assets/icons/ads/edit.svg b/app/client/src/assets/icons/ads/edit.svg new file mode 100644 index 0000000000..93eaaa6946 --- /dev/null +++ b/app/client/src/assets/icons/ads/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/assets/icons/ads/error.svg b/app/client/src/assets/icons/ads/error.svg new file mode 100644 index 0000000000..43f866b350 --- /dev/null +++ b/app/client/src/assets/icons/ads/error.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/assets/icons/ads/success.svg b/app/client/src/assets/icons/ads/success.svg new file mode 100644 index 0000000000..c5c3d40e41 --- /dev/null +++ b/app/client/src/assets/icons/ads/success.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/client/src/components/ads/EditableInput.tsx b/app/client/src/components/ads/EditableInput.tsx deleted file mode 100644 index 816ad2d1b3..0000000000 --- a/app/client/src/components/ads/EditableInput.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { CommonComponentProps } from "./common"; - -export enum EditInteractionKind { - SINGLE, - DOUBLE, -} - -type EditableTextProps = CommonComponentProps & { - type: "text" | "password" | "email" | "phone" | "date"; - defaultValue: string; - onTextChanged: (value: string) => void; - placeholder: string; - cypressSelector?: string; - valueTransform?: (value: string) => string; - isEditingDefault?: boolean; - forceDefault?: boolean; - updating?: boolean; - isInvalid?: (value: string) => string | boolean; - editInteractionKind: EditInteractionKind; - hideEditIcon?: boolean; -}; - -// Check EditableText Component -export default function(props: EditableTextProps) { - return null; -} diff --git a/app/client/src/components/ads/EditableText.tsx b/app/client/src/components/ads/EditableText.tsx new file mode 100644 index 0000000000..1a4aa7f9a6 --- /dev/null +++ b/app/client/src/components/ads/EditableText.tsx @@ -0,0 +1,292 @@ +import React, { useState, useEffect, useMemo, useCallback } from "react"; +import { EditableText as BlueprintEditableText } from "@blueprintjs/core"; +import styled from "styled-components"; +import { Size } from "./Button"; +import Text, { TextType } from "./Text"; +import Spinner from "./Spinner"; +import { hexToRgba } from "./common"; +import { theme } from "constants/DefaultTheme"; +import { noop } from "lodash"; +import Icon from "./Icon"; + +export enum EditInteractionKind { + SINGLE = "SINGLE", + DOUBLE = "DOUBLE", +} + +export type SavingStateHandler = ( + isSaving: boolean, + state?: SavingState, +) => void; + +export enum SavingState { + NOT_STARTED = "NOT_STARTED", + SUCCESS = "SUCCESS", + ERROR = "ERROR", +} + +type EditableTextProps = { + defaultValue: string; + onTextChanged: (value: string) => void; + placeholder: string; + className?: string; + valueTransform?: (value: string) => string; + isEditingDefault?: boolean; + forceDefault?: boolean; + updating?: boolean; + isInvalid?: (value: string) => string | boolean; + editInteractionKind: EditInteractionKind; + hideEditIcon?: boolean; + fill?: boolean; + onSubmit: ( + value: string, + callback: SavingStateHandler, + ) => { saving: SavingState }; +}; + +const EditableTextWrapper = styled.div<{ + fill?: boolean; +}>` + width: ${props => (!props.fill ? "234px" : "100%")}; + .error-message { + color: ${props => props.theme.colors.danger.main}; + } +`; + +const editModeBgcolor = ( + isInvalid: boolean, + isEditing: boolean, + savingState: { isSaving: boolean; name?: SavingState }, +): string => { + if ( + (isInvalid && isEditing) || + (!savingState.isSaving && savingState.name === SavingState.ERROR) + ) { + return hexToRgba(theme.colors.danger.main, 0.08); + } else if (!isInvalid && isEditing) { + return theme.colors.blackShades[2]; + } else { + return "transparent"; + } +}; + +const TextContainer = styled.div<{ + isInvalid: boolean; + isEditing: boolean; + bgColor: string; +}>` + display: flex; + align-items: center; + ${props => + props.isEditing && props.isInvalid + ? `margin-bottom: ${props.theme.spaces[2]}px` + : null}; + .bp3-editable-text.bp3-editable-text-editing::before, + .bp3-editable-text.bp3-disabled::before { + display: none; + } + + &&& .bp3-editable-text-content, + &&& .bp3-editable-text-input { + font-size: ${props => props.theme.typography.p1.fontSize}px; + line-height: ${props => props.theme.typography.p1.lineHeight}px; + letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px; + font-weight: ${props => props.theme.typography.p1.fontWeight}px; + } + + & .bp3-editable-text-content { + cursor: pointer; + color: ${props => props.theme.colors.blackShades[9]}; + overflow: hidden; + text-overflow: ellipsis; + ${props => (props.isEditing ? "display: none" : "display: block")}; + } + + & .bp3-editable-text-input { + border: none; + outline: none; + height: ${props => props.theme.spaces[13] + 3}px; + padding: ${props => props.theme.spaces[0]}px; + color: ${props => props.theme.colors.blackShades[9]}; + min-width: 100%; + border-radius: ${props => props.theme.spaces[0]}px; + } + + & .bp3-editable-text { + overflow: hidden; + padding: ${props => props.theme.spaces[4]}px + ${props => props.theme.spaces[5]}px; + width: calc(100% - 40px); + background-color: ${props => props.bgColor}; + } + + .icon-wrapper { + background-color: ${props => props.bgColor}; + } +`; + +const IconWrapper = styled.div` + width: ${props => props.theme.spaces[13] + 4}px; + padding-right: ${props => props.theme.spaces[5]}px; + height: ${props => props.theme.spaces[13] + 3}px; + display: flex; + align-items: center; + justify-content: flex-end; +`; + +export const AdsEditableText = (props: EditableTextProps) => { + const [isEditing, setIsEditing] = useState(!!props.isEditingDefault); + const [value, setValue] = useState(props.defaultValue); + const [lastValidValue, setLastValidValue] = useState(props.defaultValue); + const [isInvalid, setIsInvalid] = useState(false); + const [changeStarted, setChangeStarted] = useState(false); + const [savingState, setSavingState] = useState<{ + isSaving: boolean; + name?: SavingState; + }>({ isSaving: false, name: SavingState.NOT_STARTED }); + + useEffect(() => { + setValue(props.defaultValue); + setIsEditing(!!props.isEditingDefault); + }, [props.defaultValue, props.isEditingDefault]); + + useEffect(() => { + if (props.forceDefault === true) setValue(props.defaultValue); + }, [props.forceDefault, props.defaultValue]); + + const bgColor = useMemo( + () => editModeBgcolor(!!isInvalid, isEditing, savingState), + [isInvalid, isEditing, savingState], + ); + + /* should I write ? */ + const editMode = useCallback((e: React.MouseEvent) => { + setIsEditing(true); + const errorMessage = props.isInvalid && props.isInvalid(props.defaultValue); + setIsInvalid(errorMessage ? errorMessage : false); + e.preventDefault(); + e.stopPropagation(); + }, []); + + const onConfirm = (_value: string) => { + if ( + (!savingState.isSaving && savingState.name === SavingState.ERROR) || + isInvalid + ) { + setValue(lastValidValue); + setSavingState({ isSaving: false, name: SavingState.NOT_STARTED }); + } else if (changeStarted) { + props.onTextChanged(_value); + props.onSubmit(_value, SavingStateHandler); + } + setIsEditing(false); + setChangeStarted(false); + }; + + const onInputchange = useCallback((_value: string) => { + let finalVal: string = _value; + if (props.valueTransform) { + finalVal = props.valueTransform(_value); + } + setValue(finalVal); + + const errorMessage = props.isInvalid && props.isInvalid(finalVal); + const error = errorMessage ? errorMessage : false; + if (!error) { + setLastValidValue(finalVal); + } + setIsInvalid(error); + setChangeStarted(true); + }, []); + + const SavingStateHandler = (isSaving: boolean, state?: SavingState) => { + setIsEditing(false); + if (isSaving) { + setSavingState({ isSaving: true }); + } else { + switch (state) { + case SavingState.SUCCESS: + setSavingState({ isSaving: false, name: SavingState.SUCCESS }); + break; + default: + setValue(props.defaultValue); + setSavingState({ isSaving: false, name: SavingState.NOT_STARTED }); + break; + } + } + }; + + const iconName = + !isEditing && savingState.name === SavingState.NOT_STARTED + ? "edit" + : !isEditing && savingState.name === SavingState.SUCCESS + ? "success" + : (isEditing && savingState.name === SavingState.ERROR) || + (isEditing && !!isInvalid) + ? "error" + : undefined; + + const nonEditMode = () => { + if ( + !isEditing && + !savingState.isSaving && + savingState.name === SavingState.SUCCESS + ) { + setSavingState({ isSaving: false, name: SavingState.NOT_STARTED }); + } + }; + + return ( + + + + + + {savingState.isSaving ? ( + + ) : ( + + )} + + + {isEditing && !!isInvalid ? ( + + {isInvalid} + + ) : null} + + ); +}; + +AdsEditableText.defaultProps = { + fill: false, +}; + +export default AdsEditableText; diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index c6a3a078fb..3f547a05d9 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -3,6 +3,9 @@ import { ReactComponent as DeleteIcon } from "assets/icons/ads/delete.svg"; import { ReactComponent as UserIcon } from "assets/icons/ads/user.svg"; import { ReactComponent as GeneralIcon } from "assets/icons/ads/general.svg"; import { ReactComponent as BillingIcon } from "assets/icons/ads/billing.svg"; +import { ReactComponent as EditIcon } from "assets/icons/ads/edit.svg"; +import { ReactComponent as ErrorIcon } from "assets/icons/ads/error.svg"; +import { ReactComponent as SuccessIcon } from "assets/icons/ads/success.svg"; import { ReactComponent as SearchIcon } from "assets/icons/ads/search.svg"; import { ReactComponent as CloseIcon } from "assets/icons/ads/close.svg"; import styled from "styled-components"; @@ -15,6 +18,9 @@ export type IconName = | "user" | "general" | "billing" + | "edit" + | "error" + | "success" | "search" | "close" | undefined; @@ -25,8 +31,10 @@ const IconWrapper = styled.div` } display: flex; svg { - width: ${props => sizeHandler(props)}px; - height: ${props => sizeHandler(props)}px; + width: ${props => + props.size ? sizeHandler(props) : props.theme.spaces[9]}px; + height: ${props => + props.size ? sizeHandler(props) : props.theme.spaces[9]}px; path { fill: ${props => props.theme.colors.blackShades[4]}; } @@ -71,6 +79,15 @@ const Icon = (props: IconProps) => { case "billing": returnIcon = ; break; + case "edit": + returnIcon = ; + break; + case "error": + returnIcon = ; + break; + case "success": + returnIcon = ; + break; case "search": returnIcon = ; break; diff --git a/app/client/src/components/stories/ColorSelector.stories.tsx b/app/client/src/components/stories/ColorSelector.stories.tsx index 8303226525..9ca90b491c 100644 --- a/app/client/src/components/stories/ColorSelector.stories.tsx +++ b/app/client/src/components/stories/ColorSelector.stories.tsx @@ -1,6 +1,6 @@ import React from "react"; import { action } from "@storybook/addon-actions"; -import ColorSelector, { appColorPalette } from "../ads/ColorSelector"; +import ColorSelector, { appColorPalette } from "components/ads/ColorSelector"; import { withKnobs, array, boolean } from "@storybook/addon-knobs"; import { withDesign } from "storybook-addon-designs"; diff --git a/app/client/src/components/stories/EditableText.stories.tsx b/app/client/src/components/stories/EditableText.stories.tsx new file mode 100644 index 0000000000..de5a12f3b3 --- /dev/null +++ b/app/client/src/components/stories/EditableText.stories.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { boolean, select, text, withKnobs } from "@storybook/addon-knobs"; +import { withDesign } from "storybook-addon-designs"; +import AdsEditableText, { + EditInteractionKind, + SavingStateHandler, + SavingState, +} from "../ads/EditableText"; +import { action } from "@storybook/addon-actions"; + +export default { + title: "EditableText", + component: AdsEditableText, + decorators: [withKnobs, withDesign], +}; + +const calls = (value: string, callback: any) => { + console.log("value", value); + + // setTimeout(() => { + // return callback(SavingState.ERROR); + // }, 2000); + + setTimeout(() => { + return callback(false, SavingState.SUCCESS); + }, 2000); + + return callback(true); +}; + +const errorFunction = (name: string) => { + if (name === "") { + return "Name cannot be empty"; + } else { + return false; + } +}; + +export const EditableTextStory = () => ( +
+ value.toUpperCase()} + placeholder={text("placeholder", "Edit input")} + hideEditIcon={boolean("hideEditIcon", false)} + isInvalid={name => errorFunction(name)} + isEditingDefault={boolean("isEditingDefault", false)} + fill={boolean("fill", false)} + onSubmit={(value: string, callback: SavingStateHandler) => + calls(value, callback) + } + > +
+); From 5eb4d272976d29c53eaef5b73a4fcf64132e2270 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 26 Aug 2020 14:46:20 +0530 Subject: [PATCH 08/11] Stringify nested objects in sql query responses (#430) --- .../pages/Editor/DataSourceEditor/DBForm.tsx | 2 +- .../src/pages/Editor/QueryEditor/Table.tsx | 35 +++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx index 842416c00a..0d867162b1 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"; diff --git a/app/client/src/pages/Editor/QueryEditor/Table.tsx b/app/client/src/pages/Editor/QueryEditor/Table.tsx index 36d8e4e627..9dc40037f5 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, }; }); } From f744f3aacdf31b06bd9643215e1d700f36fdfef2 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 26 Aug 2020 14:54:44 +0530 Subject: [PATCH 09/11] add support for smart look (#431) --- app/client/public/index.html | 12 ++++++++++++ app/client/src/configs/index.ts | 2 ++ 2 files changed, 14 insertions(+) diff --git a/app/client/public/index.html b/app/client/public/index.html index 5702864a80..05e60b0deb 100755 --- a/app/client/public/index.html +++ b/app/client/public/index.html @@ -33,6 +33,18 @@ gtag('config', "%REACT_APP_GOOGLE_ANALYTICS_ID%"); + diff --git a/app/client/src/configs/index.ts b/app/client/src/configs/index.ts index eab451cd81..56e6d1b02b 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 || "", }; }; From aa06bc2d3d5fc236ad959debc6abd4783eed63b4 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Wed, 26 Aug 2020 15:51:57 +0530 Subject: [PATCH 10/11] Fix cloud hosting error (#433) --- app/client/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/public/index.html b/app/client/public/index.html index 05e60b0deb..7a51cdaa5e 100755 --- a/app/client/public/index.html +++ b/app/client/public/index.html @@ -34,8 +34,8 @@ gtag('config', "%REACT_APP_GOOGLE_ANALYTICS_ID%");