Commit Graph

18 Commits

Author SHA1 Message Date
Ivan Akulov
424d2f6965
chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
## Description

This PR upgrades Prettier to v2 + enforces TypeScript’s [`import
type`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export)
syntax where applicable. It’s submitted as a separate PR so we can merge
it easily.

As a part of this PR, we reformat the codebase heavily:
- add `import type` everywhere where it’s required, and
- re-format the code to account for Prettier 2’s breaking changes:
https://prettier.io/blog/2020/03/21/2.0.0.html#breaking-changes

This PR is submitted against `release` to make sure all new code by team
members will adhere to new formatting standards, and we’ll have fewer
conflicts when merging `bundle-optimizations` into `release`. (I’ll
merge `release` back into `bundle-optimizations` once this PR is
merged.)

### Why is this needed?

This PR is needed because, for the Lodash optimization from
7cbb12af88,
we need to use `import type`. Otherwise, `babel-plugin-lodash` complains
that `LoDashStatic` is not a lodash function.

However, just using `import type` in the current codebase will give you
this:

<img width="962" alt="Screenshot 2023-03-08 at 17 45 59"
src="https://user-images.githubusercontent.com/2953267/223775744-407afa0c-e8b9-44a1-90f9-b879348da57f.png">

That’s because Prettier 1 can’t parse `import type` at all. To parse it,
we need to upgrade to Prettier 2.

### Why enforce `import type`?

Apart from just enabling `import type` support, this PR enforces
specifying `import type` everywhere it’s needed. (Developers will get
immediate TypeScript and ESLint errors when they forget to do so.)

I’m doing this because I believe `import type` improves DX and makes
refactorings easier.

Let’s say you had a few imports like below. Can you tell which of these
imports will increase the bundle size? (Tip: it’s not all of them!)

```ts
// app/client/src/workers/Linting/utils.ts
import { Position } from "codemirror";
import { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```

It’s pretty hard, right?

What about now?

```ts
// app/client/src/workers/Linting/utils.ts
import type { Position } from "codemirror";
import type { LintError as JSHintError, LintOptions } from "jshint";
import { get, isEmpty, isNumber, keys, last, set } from "lodash";
```

Now, it’s clear that only `lodash` will be bundled.

This helps developers to see which imports are problematic, but it
_also_ helps with refactorings. Now, if you want to see where
`codemirror` is bundled, you can just grep for `import \{.*\} from
"codemirror"` – and you won’t get any type-only imports.

This also helps (some) bundlers. Upon transpiling, TypeScript erases
type-only imports completely. In some environment (not ours), this makes
the bundle smaller, as the bundler doesn’t need to bundle type-only
imports anymore.

## Type of change

- Chore (housekeeping or task changes that don't impact user perception)


## How Has This Been Tested?

This was tested to not break the build.

### 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
- [ ] I have performed a self-review of my own code
- [ ] 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
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

---------

Co-authored-by: Satish Gandham <hello@satishgandham.com>
Co-authored-by: Satish Gandham <satish.iitg@gmail.com>
2023-03-16 17:11:47 +05:30
albinAppsmith
110e6085b8
feat: Renamed design system package (#19854)
## Description

This PR includes changes for renaming design system package. Since we
are building new package for the refactored design system components,
the old package is renaming to design-system-old.

Fixes #19536 

## Type of change

- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)


## How Has This Been Tested?

- Manual
- 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
- [ ] 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
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
2023-01-23 09:20:47 +05:30
ankurrsinghal
68d21fba7c
feat: multi-line input and auto-resize textarea (#19141)
## Description

Features:-
1. Created a new AutoResizeTextArea component in the editorComponents.
Textarea does not increase its height on adding text, but it increases
its scroll height. To accommodate Auto Height with the
textarea/Multi-line InputWidget, I have created a new TextArea component
which changes its height when its content changes based on its
scrollHeight. This is done by creating another hidden similar proxy
Textarea with contents equal to the widget's value, and whenever this
value changes we run a layout effect that sets the main text area height
equal to the scrollHeight of the proxy textarea.

2. Added a new configuration `Multi-line` for InputWidget in the
Data-Type which will decide whether to replace the `input` element with
`textarea`.
Currently, the way to decide whether we should display a textarea or not
is based on whether widget's height is greater than 8 rows or not. To
fix it, I added a proper configuration which will user to select whether
he/she wants a Single-line input or Multi-line textarea.

3. Replaced the label of `Text` configuration to `Single-line` which
remains a simple `input` element as before.
Changed the label of the Text configuration to Single-line in contrast
with Multi-line.

4. Migration
Added migration number 75 for the InputWidgetsV2. Used the same previous
logic to detect whether the input type should be multiple-line or not
and set the `inputType` to `MULTI_LINE_TEXT` if it's true.

5. Changed a lot of CSS styling in Input components (Currency and Phone
too) so that they look similar to other components like DatePicker and
Select. Currently the input component take containers height which is
different from other components.

6. The onSubmit behaviour of the Multi-line input has also changed. Now
the line-break will happen on Enter and submit will be triggered on Cmd
+ Enter.

7. Added an updateHook in the Input widget which when selected the
Multi-line input will set its dynamic height property to AutoHeight.


Fixes #19655


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

- New feature (non-breaking change which adds functionality)


## How Has This Been Tested?
- Manual
- Jest

### Test Plan

https://github.com/appsmithorg/TestSmith/issues/2151

### 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
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [x] Test plan has been approved by relevant developers
- [x] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

Co-authored-by: Apple <nandan@thinkify.io>
Co-authored-by: Parthvi Goswami <parthvigoswami@Parthvis-MacBook-Pro.local>
2023-01-17 18:46:35 +05:30
Arsalan Yaldram
23b0f74c81
fix: slider widgets remove design system label component. (#19246)
## Description
- Slider widgets were still using the `Label component from design
system package`. Replace it with the `Label component from
widgets/components`.

Fixes # (issue)

## Type of change

> Please delete options that are not relevant.

- Bug fix (non-breaking change which fixes an issue)


## How Has This Been Tested?

- Manual

### 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
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] 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
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
2023-01-13 16:38:28 +05:30
albinAppsmith
fbc3bd663b
feat: Migrate design system components import to design-system repo - I (#15562)
* Icon component deleted and changed the imports in refrence places

* design system package version changed

* import changes

* Delete TextInput.tsx

* Change imports

* Change single named import

* Update package

* Update package

* Delete ScrollIndicator.tsx

* Change imports

* Icon import completed

* Event type added

* Changed Button component imports

* import change button

* Button onclick type fix

* Label with Tooltip import changes

* Changed breadcrumbs import

* EmojiPicker and Emoji Reaction import changes

* AppIcon import change

* import bug fix

* Menu Item import chnages

* Icon selector imports changed

* Delete LabelWithTooltip.tsx

* Change imports across the app

* Update package version

* Update version number for design-system

* Delete Checkbox.tsx

* Remove the exports

* Add lock file for ds package update

* Change imports

* default import -> named

* Update release version

* Make arg type explicit

* Updated design-system to latest release

* Missing file mysteriously comes back and is updated accordingly

* changes design-system package version

* Add types to arguments in the onChange for text input

* onBlur type fix

* Search component in property pane

* WDS button changes reverted

* package version bumped

* conflict fix

* Remove Dropdown, change imports

* Category import fix

* fix: table icon size import

* Bump version of design system package

* Yarn lock

Co-authored-by: Tanvi Bhakta <tanvibhakta@gmail.com>
2022-08-22 10:39:39 +05:30
Pawan Kumar
809a633306
feat: App Theming (#9714)
* fix style bugs

* fix select styles

* test: fix font size issue for cypress tests

* incorporate ashit feedback

* test: addresed review comments for cypress tests

* add analytics events

* height issue in view mode

* incorporate code review feedbacks

* incorporate code review feedbacks

* refactor: addressed review comments; removed border radius and box shadow for text widget; Updated migrations

* feat: Makes shadow and radius controls keyboard accessible (#11547)

* makes shadow and radius controls keyboard accessible

* removes unused imports

* moves options out of render method

* fix: changed the misnomer background property name to the relevant property name

* fix: border radius issue for the map widget

* address qa bugs

* address qa bugs

* fix ux of theming pane when widget is selected

* fix:
* added backgroundColor to the video widget
* restricted pop-over border radius to 0.375rem
* added box shadow for the input group for select widget

* fix: added delete icon in the delete theme modal

* address qa bugs

* change checkbox column size in config

* add js convertible to button color

* remove unused imports

* test: fixed jest tests

* fix primary color typo

* fix: migrations for the theming

* fix:
* Removed background color from MultiTreeSelect and TreeSelect component.
* grouped button's menu button pop over border radius restricting to 0.375rem.

* test: updated Dsl migration UT

* address qa bugs

* address qa bugs

* fix: address qa comments

* address qa bugs

* fix:
* migration issue;
* unit test cases;

* fix rating widget scroll issue

* fix youtube video border radius bug

* fix select widget

* fix select widgets styles

* address qa bugs

* merge conflicts

* makes the reset button keyboard accessible (#12134)

* -resolved merge conflicts

* address qa bugs

* fix: labelTextSize migration fixes

* refactor:
* made changes to the fontSizeUtils function
* fixed the issue related to unit tests

* fix button group widget

* remove unused imports

* fix: fixed the text size migration for the table widget

* refactor: addressed review comments for the table widget theming migration

* fix button group widget

* add init calls for view mode

* json form init theme changes

* fix: added migration for boxShadow, borderRadius and textSizes for table widget

* fix broken fields

* test: fixed unit tests

* wip

* inconsistancy fixes and schemaItem update in updateHook/fieldConfiguration

* feat: init json form migration theming

* json form primaryColor -> accentColor

* update table widget

* update table widget

* object field label styling

* fix: migration related to the JSON form

* fix: fixed labelTextSize migration for JSON form nested widgets

* property control nested stylesheet lookup

* JSONForm label styles form array items

* show label for checkbox field array item

* fix button group widget

* wip

* refactor: addressed table widget review comments

* refactor: addressed ashit review comments;
* added childStylesheet for widgets

* feat: Keyboard navigable Color Picker control (#11797)

* Makes ColorPicker keyboard accessible

* seperate out keyboard and mouse interactions

* fix issue with not focusing back to input

* Adds test for Color picker

* chore: added comment for the boxShadow property

* fix:
* added unit test cases for the widget and property utils
* resolved warning messages

* wip

* theme config update

* fix merge conflicts

* refactor: moved theming migration inside the migrations folder

* fix qa bugs

* fix jest test

* fix: unit test cases

* fix table column creation logic

* refactor: addressed review comments for migrations

* fix: Overriding margin and padding for custom render in the dropdown component (#12875)

* * fix for custom render padding and margin in ADS dropdown

* * fix for removing padding from normal render options

* refactor: moved the boxShadow condition to the variable

* fix qa bugs

* fix: migration QA callouts for audio recorder widget

* refactor: added updated comments for boxShadow migration for table widget

* fix theme binfings for JSONForm fields under Object

* fix table widget theming bug

* fix: addressed code review comments

* fix: unit test cases

* fix: qa migration callouts

* fix table widget theming bug

* fix JSONForm currency input dropdown not submit form

* Added new tests - AppThemingSpec

* fix qa bugs

* fix unit test

* fix JSONForm cellBorderWidth to have default value post migration

* fix unit test

* fix qa bugs

* remove unused imports

* fix qa bugs

* fix JSONForm input height issue

* fix qa bugs

* Updating Theming spec

* * dropdown color fixes (#13249)

* fix caching issue
;

* Fixed Theming tests

* fix tests

* fix tab widget tests

* fix: json form children level migration issue

* fix table widget tests

* Updated test

* updated tests

* updated test

* updated tests

* updated tests

* updated pageload

* fix cypress tests

* remove cypress created files

* fix color picker issues

* Failure fixes

* Fixed some more tests

* fix: cypress test failures

* fix tests

* remove consoles

* fix table tests

* fix qa bugs

* updating snapshots for AppPageLayout_spec as per new UI

* fix rating widget bug

* fix qa bugs

* fix:
* cypress failing tests
* Migration QA callouts
* Removed unused imports

* update constract check algo

* fix color contrast issue

* fix: cypress failure test cases

* update font sizes labels

* fix regression bugs

* fix:
* JSON form labelTextSize issue fix
* Updated comment for the fontSizeUtility function
* migrations issues related to table widget borderRadius and boxShadow

* fix: default labelTextSize issue for the Input and Select families

* fix regression bugs

* fix regression bugs

* PassingParams spec - added wait time

* fix: font family default value issue on JS toggle

* fix js toggle issue in text widget

* fix tests

* fix tests

* fix tests

* fix cypress tests

* fix regression bugs

* fix regression bugs

* fix:
* refactored table widget migration function as per review comments,
* added default value to the widget

* fix: failing unit test cases

* fix theming spec

* fix cypress tests

* test: fixed failed cypress test

* incorporate ashit feedback

* fix cypress tests

* fix: addressed review comments

* comment out table cypress test

* fix merge conflicts

* comment out color picker tests

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
Co-authored-by: keyurparalkar <keyur@appsmith.com>
Co-authored-by: Aswath K <aswath@appsmith.com>
Co-authored-by: Nayan <nayan@appsmith.com>
Co-authored-by: Ashit Rath <ashit@appsmith.com>
Co-authored-by: balajisoundar <balaji@appsmith.com>
Co-authored-by: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
Co-authored-by: apple <nandan@thinkify.io>
Co-authored-by: Parthvi Goswami <parthvigoswami@Parthvis-MacBook-Pro.local>
2022-05-04 15:15:57 +05:30
rahulramesha
e128b2daf3
feat: new Widget Copy paste experience (#12906)
* copy paste commit

* class name generator changes

* modal widget fixes change

* addressing review comments

* bug fix for after deleting a widget by undoing action

* additional fix for modal widget

* additional tests for fixes
2022-05-04 13:28:57 +05:30
Paul Li
eb37416a2a
feat: Controls for labels in widgets to align the widgets in forms and other places (#10600)
* feat: When there are multiple input widgets with different label lengths then the input box looks misaligned

-- Create a new property control for a label position
-- Create a new property control for a label alignment
-- Prototype a label section for Input widget

* feat: When there are multiple input widgets with different label lengths then the input box looks misaligned

-- Add a property, labelWidth in the property pane

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Input widget: Implement all the requirements in case its type is Text

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Adapt the functionalty on other types of the input widget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalities into DropdownWidget
-- Clean up for the input widget and DRY

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalities into MultiSelectWidget
-- Eliminate unnecessary component prop, columns

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalties into Tree Select widget
-- Add styles for alignment between lable and input control over the widgets

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add label functionalities into MultiSelectTreeWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Introduce label functionalities into DatePickerWidget2
-- Use width instead of columns prop in InputWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into RichTextEditorWidget
-- Eliminate compactMode from StyledLabel

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into CheckboxGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement switch group for the correct meaning of right alignment

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply label functionalities into RadioGroupWidget
-- Add new properties, alignment and inline for consistency

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Adjust cols and rows for RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused StyledRadioProps

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Complete first MVP of enhanced SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Complete the first MVP of enhanced RadioGroupWidget
-- Eliminate unused StyledSwitch component for SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add min-height, align-self rules for LabelContainer

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Use original label property for RadioGroupWidget
-- Add a migration for adding isInline and alignment properties for RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Update version to latest one in DSLMigrationsUtils.test.ts

* fix failing jest test

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement label functionalities on BaseInputWidget, InputWidgetV2, CurrencyInputWidget, PhoneInputWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused imports in DSLMigrationsUtils

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on the label related test case which is failed in Input_spec.js

* feat: Controls for labels in widgets to align the widgets in forms and other places
-- Fix on #10119: The label text truncates on resizing the input widget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix scroll issue when shrink with MultiSelectWidget and MultiSelectTreeWidget

* fix: Widget Popup test

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement width and alginment features on the level of label element
-- Prevent actual inputs from DropdownWidget, MultiSelectWidget, SingleSelectTreeWidget, MultiSelectTreeWidget from overflow when resizing
-- Enable label feature on a RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Set label container's default width to 33% when width is not set

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix crash issue when labelWidth is filled by non-numeric value, eliminating passing NaN as its value

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Set flex-grow to zero on input types other than TEXT

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Implement label features on newly created MultiSelectWidgetV2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate LabelPositionTypes, directly using enum LabelPosition
-- Add a comment for a constant LABEL_MAX_WIDTH_RATE
-- Directly import React for LabelAlignmentOptionsControl
-- Remove unnecessary constructor for LabelAlignmentOptionsControl
-- Define handleAlign instance method as a higher-order function
-- Only migrate alignment property for RadioGroupWidget
-- Use Object.hasOwnProperty instead of in operator

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Migrate alignment property of RadioGroupWidget in case of currentDSL.version is 52

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Revert currentDSL.version to 52

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add a Jest test case for RadioGroupWidget's alignment property migration

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Replace all nested ternary operators with if statements

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Implement label feature on new version of SelectWidget
-- Add Cypress tests for widgets' label section

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Refactor code for BaseInputWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Change CSS selector for step buttons for Numeric BaseInputWidget
-- Directly use migrateRadioGroupAlignmentProperty migration function without using transformDSL

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on typo about migrateRadioGroupAlignmentProperty

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add data-testid attributes for Cypress selectors

* feat: Deprecate form button widget

-- Assert flex-direction to row in CheckboxGroup_spec.js

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add a missing data-testid for SelectWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on failed test cases: CheckboxGroup_spec, DatePicker_2_spec, MultiSelectWidgetV2

* fix: Select popup DSL

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Create a new property control, NumericInputControl
-- Replace all the label properties with the newly created controls

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Create a new Cypress command, checkLabelWidth and apply to all related test cases
-- Increase width in checkboxgroupDsl.json
-- Rename className for label in MultiSelectWidgetV2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Reimplement the tooltip feature for labels
-- Add missing props for labels in DateField, MultiSelectField, RadioGroupField, SelectField fields for JSONFormWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Refactor property controls, including LabelPositionOptionsControl, LabelAlignmentOptionsControl, NumericInputControl to keep consistency
-- Apply default values into label section

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Extract the label related parts from the various widgets as an independent component

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate TypeScript any type from BaseInputComponent

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Change labelPosition property type to DROP_DOWN
-- Modify LabelAlignmentOptionsControl to use ButtonTabComponent

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Define getLabelWidth method into BaseWidget
-- Extract the common CSS rules for the widget containers
-- Revert rows and columns for SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on the failed test case in DSLMigrationsUtils.test.ts

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on overflow issue on CheckboxGroupWidget
-- Create a distinctive spec file for label feature
-- Eliminate the redundant label specs with the relevant widgets

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Delete unnecessary files, including Select_spec.js, LabelButton.tsx and LabelPositionOptionsControl.tsx
-- Revise wrong comment for checkLabelForWidget Cypress command

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Do not set the label width only if its value is 0
-- Clean up the component for DatePickerWidget2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused imports in DatePickerWidget2

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Make RadioGroupWidget's layout flexible in all modes

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on Cypress test case for RadioGroupWidget in Widgets_Labels_spec
-- Change Cypress commands, including addAction, addSuccessMessage, enterActionValue to accept parentSelector

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Change getLabelWidth method to not have any argument
-- Define some constants for label numbers
-- Extract the common styles for SwitchGroupWidget and RadioGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Refactor some constants

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate unused width prop from RadioGroupWidget
-- Get labelWidth from getLabelWidth

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Eliminate the min-height restriction on a label
-- Eliminate the scroll on the earlier InputWidgetV2 which was not in compact mode

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add one more condition checking if the current input type is text

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Extract common code base for MultiSelectTreeWidget and MultiSelectWidgetV2
-- Apply a few CSS fixes on the scrollbar issue select related widgets

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Apply some tweaks for earlier widgets with labels so as not to be broken UX

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Fix on the failed Cypress test case in Widget_Popup_spec.js

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Add constants, LABEL_DEFAULT_WIDTH_RATE, SELECT_DEFAULT_HEIGHT, LABEL_MARGIN_OLD_SELECT

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Increase the widths of CheckboxGroupWidget and SwitchGroupWidget

* feat: Controls for labels in widgets to align the widgets in forms and other places

-- Set the font size to 14px for NumericInputControl

Co-authored-by: ohansFavour <fohanekwu@gmail.com>
Co-authored-by: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
2022-04-14 16:47:25 +08:00
ashit-rath
32fee08c5c
feat: JSON Form widget (#8472)
* initial layout

* updated parser to support nested array

* array field rendering

* changes

* ts fix

* minor revert FormWidget

* modified schema structure

* select and switch fields

* added checkbox field

* added RadioGroupField

* partial DateField and defaults, typing refactoring

* added label and field type change

* minor ts changes

* changes

* modified widget/utils for nested panelConfig, modified schema to object approach

* array/object label support

* hide field configuration when children not present

* added tooltip

* field visibility option

* disabled state

* upgraded tslib, form initial values

* custom field configuration - add/hide/edit

* field configuration - label change

* return input when field configuration reaches max depth

* minor changes

* form - scroll, fixedfooter, enitity defn and other minior changes

* form title

* unregister on unmount

* fixes

* zero state

* fix field padding

* patched updating form values, removed linting warnings

* configured action buttons

* minor fix

* minor change

* property pane - sort fields in field configuration

* refactor include all properties

* checkbox properties

* date properties

* refactor typings and radio group properties

* switch, multselect, select, array, object properties

* minor changes

* default value

* ts fixes

* checkbox field properties implementation

* date field prop implementation

* switch field

* select field and fix deep nested meta properties

* multiselect implementation

* minor change

* input field implementation

* fix position jump on field type change

* initial accordian

* field state property and auto-complete of JSONFormComputeControl

* merge fixes

* renamed FormBuilder to JSONForm

* source data validation minor change

* custom field default value fix

* Editable keys for custom field

* minor fixes

* replaced useFieldArray with custom logic, added widget icon

* array and object accordian with border/background styling

* minor change

* disabled states for array and objects

* default value minor fix

* form level styles

* modified logic for isDisabled for array and object, added disabledWhenInvalid, exposed isValid to fieldState for text input, removed useDisableChildren

* added isValid for all field types

* fixed reset to default values

* debounce form values update

* minor change

* minor change

* fix crash - source data change multi-select to array, fix crash - change of options

* fix positioning

* detect date type in source data

* fix crash - when object is passed to regex input field

* fixed default sourceData path for fields

* accodion keep children mounted on collapse

* jest test for schemaParser

* widget/helper and useRegisterFieldInvalid test

* tests for property config helper and generatePanelPropertyConfig

* fix input field validation not appearing

* fix date field type detection

* rename data -> formData

* handle null/undefined field value change in sourceData

* added null/undefined as valid values for defaultValue text field

* auto detect email field

* set formData default value on initial load

* switch field inline positioning

* field margin fix for row direction

* select full width

* fiex date field default value - out of range

* fix any field type to array

* array default value logic change

* base cypress test changes

* initial json form render cy test

* key sanitization

* fix fieldState update logic

* required design, object/array background color, accordion changes, fix - add new custom field

* minor change

* cypress tests

* fix date formatted value, field state cypress test

* cypress - field properties test and fixes

* rename test file

* fix accessort change to blank value, cypress tests

* fix array field default value for modified accessor

* minor fix

* added animate loading

* fix empty state, add new custom field

* test data fix

* fix warnings

* fix timePrecision visibility

* button styling

* ported input v2

* fix jest tests

* fix cypress tests

* perf changes

* perf improvement

* added comments

* multiselect changes

* input field perf refactor

* array field, object field refactor performance

* checkbox field refactor

* refectored date, radio, select and switch

* fixes

* test fixes

* fixes

* minor fix

* rename field renderer

* remove tracked fieldRenderer field

* cypress test fixes

* cypress changes

* array default value fixes

* arrayfield passedDefaultValue

* auto enabled JS mode for few properties, reverted swith and date property controls

* cypress changes

* added widget sniping mode and fixed object passedDefaultValue

* multiselect v2

* select v2

* fix jest tests

* test fixes

* field limit

* rename field type dropdown texts

* field type changes fixes

* jest fixes

* loading state submit button

* default source data for new widget

* modify limit message

* multiseelct default value changes and cypress fix

* select default value

* keep default value intact on field type change

* TextTable cypress text fix

* review changes

* fixed footer changes

* collapse styles section by default

* fixed footer changes

* form modes

* custom field key rentention

* fixed footer fix in view mode

* non ascii characters

* fix meta merge in dataTreeWidget

* minor fixes

* rename useRegisterFieldInvalid.ts -> useRegisterFieldValidity.ts

* modified dependency injection into evaluated values

* refactored fixedfooter logic

* minor change

* accessor update

* minor change

* fixes

* QA fixes date field, scroll content

* fix phone number field, removed visiblity option from array item

* fix sourceData autocomplete

* reset logic

* fix multiselect reset

* form values hydration on widget drag

* code review changes

* reverted order of merge dataTreeWidget

* fixes

* added button titles, fixed hydration issue

* default value fixes

* upgraded react hook form, modified array-level/field-level default value logic

* fixed select validation

* added icon entity explorer, modified icon align control

* modify accessor validation for mongo db _id

* update email field regex

* review changes

* explicitly handle empty source data validation
2022-03-24 12:43:25 +05:30
Pranav Kanade
b778b83ac4
refactor: admin settings (#9906)
* refactor admin settings feature

* separated save-restart bar to separate component

* created new CE dir to facilitate code split

* created separate ee dir and exporting everything we have in ce file.

* little mod

* minor fix

* splitting settings types config

* using object literals for category types instead of enums

* CE: support use of component for each category

* minor style fix

* authentication page  UI changes implemented

* github signup doc url added back

* removed comments

* routing updates

* made subcategories listing in left pane optional

* added muted saml to auth listing

* added breadcrumbs and enabled button

* created separate component for auth page and auth config

* added callout and disconnect components

* updated breadcrumbs component

* minor updates to common components

* updated warning callout and added icon

* ce: test cases fixed

* updated test file name

* warning banner callout added on auth page

* updated callout banner for form login

* CE: Split config files

* CE: moved the window declaration in EE file as its dependency will be updated in EE

* CE: Splitting ApiConstants and SocialLogin constants

* CE: split login page

* CE: moved getSocialLoginButtonProps func to EE file as it's dependencies will be updated in EE

* added key icon

* CE: created a factory class to share social auths list

* Minor style fix for social btns

* Updated the third party auth styles

* Small fixes to styling

* ce: splitting forms constants

* breadcrumbs implemented for all pages in admin settings

* Settings breadcrumbs separated

* splitted settings breadcrumbs between ce and ee

* renamed default import

* minor style fix

* added login form config.

* updated login/signup pages to use form login disabled config

* removed common functionality outside

* implemented breadcrumb component from scratch without using blueprint

* removed unwanted code

* Small style update

* updated breadcrumb categories file name and breadcrumb icon

* added cypress tests for admin settings auth page

* added comments

* update locator for upgrade button

* added link for intercom on upgrade button

* removed unnecessary file

* minor style fix

* style fix for auth option cards

* split messages constant

* fixed imports for message constants splitting.

* added message constants

* updated unit test cases

* fixed messages import in cypress index

* fixed messages import again, cypress fails to read re-exported objs.

* added OIDC auth method on authentication page

* updated import statements from ee to @appsmith

* removed dead code

* updated read more link UI

* PR comments fixes

* some UI fixes

* used color and fonts from theme

* fixed some imports

* fixed some imports

* removed warning imports

* updated OIDC logo and auth method desc copies

* css changes

* css changes

* css changes

* updated cypress test for breadcrumb

* moved callout component to ads as calloutv2

* UI changes for form fields

* updated css for spacing between form fields

* added sub-text on auth pages

* added active class for breadcrumb item

* added config for disable signup toggle and fixed UI issues of restart banner

* fixed admin settings page bugs

* assigned true as default state for signup

* fixed messages import statements

* updated code for PR comments related suggestions

* reverted file path change in cypress support

* updated cypress test

* updated cypress test

Co-authored-by: Ankita Kinger <ankita@appsmith.com>
2022-02-11 23:38:46 +05:30
Vicky Bansal
f05c92603e
fix: Improper formatting for Input Widget for DataType currency (#9050)
* Fix currency number formating and add unit tests

* Fix Input currency type cypress test

* Fix currency number formating and add unit tests

* Fix Input currency type cypress test

* Add comments for utilities formatCurrencyNumber and limitDecimalValue

* Fix currency number formating and add unit tests

* Fix Input currency type cypress test

* Fix Input currency type cypress test

* Add comments for utilities formatCurrencyNumber and limitDecimalValue

* Fix upstep and downstep button action for formated currency input

* remove crendentials from cypress.json

* Fix input currency test flakiness

* Fix cypress test for currency input type

Fix formatCurrencyNumber function and added more unit tests

* Fix cypress test for currency input

Handle group separator and decimal separator when formatting and deformatting input for currency type

* remove console.log

* Handle formatting changes for default text

* Format input widget value for currency to handle default text

* remove unused import

* Add unit tests for getGroupSeparator and getDecimalSeparator functions

* add function to get user locale

* use preventDefault in input increment/decrement button click

* Use getLocale function, use String function

* use Number function for type conversion

* fix number to string type

* Handle 0 value for numbers

Co-authored-by: Arpit Mohan <arpit@appsmith.com>
2021-12-30 00:40:01 -08:00
Anand Srinivasan
8c60a8b870
feat: unified style for disabled widgets (#8731)
* basic input fields - unified disabled style

* select widgets - unified disabled style

* icon button - change disabled color

* radio group and switch - unified disabled style

* checkbox, radio, switch - disabled label color

* change disabled text color for all input fields

* chnage lable color on disabled state

* RTE header - not allowed cursor on disabled mode

* currency label - disabled color change

* switch and radio group css clean up

* replace text colors with GREY shades

* change label color for disabled switch and radio group

* restructure numeric input css

* numeric input buttons updated

* css fixes for mozilla

* table button disabled color

* change label color - numeric input dropdown

* hover only when enabled - numeric input

* all button colors updated

* remove unwanted wrapper

* update label color

* name color in constants

* use grey palette for switch component color
2021-11-15 11:59:06 +05:30
Paul Li
d700b62ac5
feat: Spellcheck property for the input widget (#8496)
* feat: Spellcheck property for the input widget

-- Add a new widget boolean property, isSpellCheck
-- Add the corresponding Cypress test cases

* feat: Spellcheck property for the input widget

-- Place isSpellCheck property just after autoFocus property
2021-11-12 15:34:10 +08:00
Yash Vibhandik
7229ef5b37
fix: design audit input widget (#8498)
* fix: 8041 Added design changes

* updated password input design and error border design

* updated green color names
2021-11-01 20:14:08 +05:30
Bhavin K
1e6b916ff9
added auto focus for number input (#7961) 2021-10-01 15:09:59 +00:00
Vicky Bansal
2c08417829
Fix digits after decimal in input widget (#7468) 2021-09-22 12:58:56 +05:30
Aswath K
1cca96c032
fix: Currency input text overlap (#7477)
* Change currency input layout to flex

* fix: styles for normal input

* Increase space b/w icon and text. Add focus color

visual modifications as suggested by Momcilo

* fix: alignment for ISDCodeDropdown

* fix: background color for disabled

* change dropdown focus color as suggested by Momcilo

* remove unwanted conditional height

* makes disabled Numeric input consistent to disabled input
2021-09-20 14:20:46 +00:00
Abhinav Jha
b49f5097c6
refactor: Widget Development API (#6405) 2021-09-09 20:40:22 +05:30