Fix-The tabs should scroll with the increase in the number of tabs. (#131)

* Fixed tabs widget bugs and other updates:
1. Moved drag icon to the left of tab name field in the tabs widget property pane
2. Change drag icon
3. Add scroll when the tabs occupy more width than the width of tabs widget.
4. Add selected tab name validation.
5. Hide overflow tabs.
6. Avoid vertical scrollbars in tabs widget header

app/client/src/assets/icons/control/drag.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33268 11.9998C7.33268 12.7332 6.73268 13.3332 5.99935 13.3332C5.26602 13.3332 4.66602 12.7332 4.66602 11.9998C4.66602 11.2665 5.26602 10.6665 5.99935 10.6665C6.73268 10.6665 7.33268 11.2665 7.33268 11.9998ZM5.99935 6.6665C5.26602 6.6665 4.66602 7.2665 4.66602 7.99984C4.66602 8.73317 5.26602 9.33317 5.99935 9.33317C6.73268 9.33317 7.33268 8.73317 7.33268 7.99984C7.33268 7.2665 6.73268 6.6665 5.99935 6.6665ZM5.99935 2.6665C5.26602 2.6665 4.66602 3.2665 4.66602 3.99984C4.66602 4.73317 5.26602 5.33317 5.99935 5.33317C6.73268 5.33317 7.33268 4.73317 7.33268 3.99984C7.33268 3.2665 6.73268 2.6665 5.99935 2.6665ZM9.99935 5.33317C10.7327 5.33317 11.3327 4.73317 11.3327 3.99984C11.3327 3.2665 10.7327 2.6665 9.99935 2.6665C9.26602 2.6665 8.66602 3.2665 8.66602 3.99984C8.66602 4.73317 9.26602 5.33317 9.99935 5.33317ZM9.99935 6.6665C9.26602 6.6665 8.66602 7.2665 8.66602 7.99984C8.66602 8.73317 9.26602 9.33317 9.99935 9.33317C10.7327 9.33317 11.3327 8.73317 11.3327 7.99984C11.3327 7.2665 10.7327 6.6665 9.99935 6.6665ZM9.99935 10.6665C9.26602 10.6665 8.66602 11.2665 8.66602 11.9998C8.66602 12.7332 9.26602 13.3332 9.99935 13.3332C10.7327 13.3332 11.3327 12.7332 11.3327 11.9998C11.3327 11.2665 10.7327 10.6665 9.99935 10.6665Z" fill="#768896"/>
+</svg>

app/client/src/components/designSystems/appsmith/Table.tsx

@@ -69,7 +69,7 @@ export const Table = (props: TableProps) => {
   const data = React.useMemo(() => props.data, [JSON.stringify(props.data)]);
   const columns = React.useMemo(() => props.columns, [
     JSON.stringify(props.columns),
-    props.columnActions,
+    JSON.stringify(props.columnActions),
   ]);
   const {
     getTableProps,

app/client/src/components/designSystems/appsmith/TabsComponent.tsx

@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 import { ComponentProps } from "./BaseComponent";
 import { TabsWidgetProps, TabContainerWidgetProps } from "widgets/TabsWidget";
 import { generateClassName, getCanvasClassName } from "utils/generators";
+import { scrollbarLight } from "constants/DefaultTheme";
 
 interface TabsComponentProps extends ComponentProps {
   children?: ReactNode;
@@ -53,8 +54,13 @@ const ScrollableCanvasWrapper = styled.div<
 `;
 
 const TabsContainer = styled.div`
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  ${scrollbarLight};
+  background: ${props => props.theme.colors.builderBodyBG};
   && {
-    height: 32px;
+    height: 38px;
     width: 100%;
     display: flex;
     justify-content: flex-start;

app/client/src/components/propertyControls/TabControl.tsx

@@ -16,12 +16,10 @@ const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
   cursor: pointer;
 `;
 
-const StyledDragIcon = styled(
-  ControlIcons.DRAGGABLE_CONTROL as AnyStyledComponent,
-)`
+const StyledDragIcon = styled(ControlIcons.DRAG_CONTROL as AnyStyledComponent)`
   padding: 0;
   position: relative;
-  margin-left: 15px;
+  margin-right: 15px;
   cursor: move;
   svg {
     path {
@@ -40,6 +38,7 @@ const StyledPropertyPaneButtonWrapper = styled.div`
 const ItemWrapper = styled.div`
   display: flex;
   justify-content: flex-start;
+  align-items: center;
 `;
 
 const TabsWrapper = styled.div`
@@ -77,6 +76,7 @@ function TabControlComponent(props: RenderComponentProps) {
   const { deleteOption, updateOption, item, index } = props;
   return (
     <ItemWrapper>
+      <StyledDragIcon height={20} width={20} />
       <StyledOptionControlInputGroup
         type="text"
         placeholder="Tab Title"
@@ -92,7 +92,6 @@ function TabControlComponent(props: RenderComponentProps) {
           deleteOption(index);
         }}
       />
-      <StyledDragIcon height={20} width={20} />
     </ItemWrapper>
   );
 }

app/client/src/constants/DefaultTheme.tsx

@@ -564,5 +564,23 @@ export const theme: Theme = {
   },
 };
 
+export const scrollbarLight = css`
+  scrollbar-color: ${props => props.theme.colors.paneText}
+    
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px
+      ${props => getColorWithOpacity(props.theme.colors.paneText, 0.3)};
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: ${props => props.theme.colors.paneText};
+    border-radius: ${props => props.theme.radii[1]}px;
+  }
+`;
+
 export { css, createGlobalStyle, keyframes, ThemeProvider };
 export default styled;

app/client/src/constants/WidgetValidation.ts

@@ -17,6 +17,7 @@ export const VALIDATION_TYPES = {
   MARKERS: "MARKERS",
   ACTION_SELECTOR: "ACTION_SELECTOR",
   ARRAY_ACTION_SELECTOR: "ARRAY_ACTION_SELECTOR",
+  SELECTED_TAB: "SELECTED_TAB",
 };
 
 export type ValidationResponse = {

app/client/src/icons/ControlIcons.tsx

@@ -15,6 +15,7 @@ import { ReactComponent as HelpIcon } from "assets/icons/control/help.svg";
 
 import { ReactComponent as PickMyLocationSelectedIcon } from "assets/icons/control/pick-location-selected.svg";
 import { ReactComponent as SettingsIcon } from "assets/icons/control/settings.svg";
+import { ReactComponent as DragIcon } from "assets/icons/control/drag.svg";
 import PlayIcon from "assets/icons/control/play-icon.png";
 
 /* eslint-disable react/display-name */
@@ -101,6 +102,11 @@ export const ControlIcons: {
       />
     </IconWrapper>
   ),
+  DRAG_CONTROL: (props: IconProps) => (
+    <IconWrapper {...props}>
+      <DragIcon />
+    </IconWrapper>
+  ),
 };
 
 export type ControlIconName = keyof typeof ControlIcons;

app/client/src/utils/Validators.ts

@@ -499,4 +499,25 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
       message: message,
     };
   },
+  [VALIDATION_TYPES.SELECTED_TAB]: (
+    value: any,
+    props: WidgetProps,
+    dataTree?: DataTree,
+  ): ValidationResponse => {
+    const tabs =
+      props.tabs && _.isString(props.tabs)
+        ? JSON.parse(props.tabs)
+        : props.tabs && Array.isArray(props.tabs)
+        ? props.tabs
+        : [];
+    const tabNames = tabs.map((i: { label: string; id: string }) => i.label);
+    const isValidTabName = tabNames.includes(value);
+    return {
+      isValid: isValidTabName,
+      parsed: value,
+      message: isValidTabName
+        ? ""
+        : `${WIDGET_TYPE_VALIDATION_ERROR}: Invalid tab name.`,
+    };
+  },
 };

app/client/src/widgets/TabsWidget.tsx

@@ -14,6 +14,7 @@ class TabsWidget extends BaseWidget<
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
       tabs: VALIDATION_TYPES.TABS_DATA,
+      selectedTab: VALIDATION_TYPES.SELECTED_TAB,
     };
   }