Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

2020-08-13 17:05:24 +00:00 · 2020-08-13 17:05:24 +00:00 · 8826286e6c
commit 8826286e6c
parent aeb9ecb8f4 02a2d8e0a3
11 changed files with 84 additions and 90 deletions
--- a/app/client/package.json
+++ b/app/client/package.json
@ -61,6 +61,7 @@
    "instantsearch.js": "^4.4.1",
    "interweave": "^12.1.1",
    "interweave-autolink": "^4.0.1",
+    "js-base64": "^3.4.5",
    "json-fn": "^1.1.1",
    "lint-staged": "^9.2.5",
    "localforage": "^1.7.3",
@ -199,4 +200,4 @@
      "pre-commit": "lint-staged"
    }
  }
-}
+}
--- a/app/client/src/components/designSystems/appsmith/AutoToolTipComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/AutoToolTipComponent.tsx
@ -1,37 +1,6 @@
 import React, { createRef, useEffect, useState } from "react";
-import styled from "styled-components";
 import { Tooltip } from "@blueprintjs/core";
-
-const CellWrapper = styled.div<{ isHidden?: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  opacity: ${props => (props.isHidden ? "0.6" : "1")};
-  .image-cell {
-    width: 40px;
-    height: 32px;
-    margin: 0 5px 0 0;
-    border-radius: 4px;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-  video {
-    border-radius: 4px;
-  }
-  &.video-cell {
-    height: 100%;
-    iframe {
-      border: none;
-      border-radius: 4px;
-    }
-  }
-`;
+import { CellWrapper } from "components/designSystems/appsmith/TableStyledWrappers";

 const AutoToolTipComponent = (props: {
  isHidden?: boolean;
--- a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx
@ -15,7 +15,7 @@ const SearchInputWrapper = styled(InputGroup)`
  &&& svg {
    opacity: 0.6;
  }
-  margin: 14px 20px;
+  margin: 5px 20px;
  width: 250px;
  min-width: 150px;
 `;
--- a/app/client/src/components/designSystems/appsmith/Table.tsx
+++ b/app/client/src/components/designSystems/appsmith/Table.tsx
@ -114,17 +114,12 @@ export const Table = (props: TableProps) => {
  const selectedRowIndex = props.selectedRowIndex;
  const tableSizes = TABLE_SIZES[props.compactMode || CompactModeTypes.DEFAULT];
  /* Subtracting 9px to handling widget padding */
-  const tableRowHeight =
-    (props.height -
-      (tableSizes.COLUMN_HEADER_HEIGHT + tableSizes.TABLE_HEADER_HEIGHT + 9)) /
-    props.pageSize;
  return (
    <TableWrapper
      width={props.width}
      height={props.height}
      tableSizes={tableSizes}
      id={`table${props.widgetId}`}
-      tableRowHeight={tableRowHeight}
      backgroundColor={Colors.ATHENS_GRAY_DARKER}
    >
      <TableHeader
@ -152,6 +147,7 @@ export const Table = (props: TableProps) => {
        displayColumnActions={props.displayColumnActions}
        compactMode={props.compactMode}
        updateCompactMode={props.updateCompactMode}
+        tableSizes={tableSizes}
      />
      <div className={props.isLoading ? Classes.SKELETON : "tableWrap"}>
        <div {...getTableProps()} className="table">
--- a/app/client/src/components/designSystems/appsmith/TableCompactMode.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableCompactMode.tsx
@ -63,6 +63,10 @@ const CompactModes: CompactModeItem[] = [
    title: "Default",
    value: CompactModeTypes.DEFAULT,
  },
+  {
+    title: "Tall",
+    value: CompactModeTypes.TALL,
+  },
 ];

 interface TableCompactModeProps {
--- a/app/client/src/components/designSystems/appsmith/TableHeader.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableHeader.tsx
@ -13,7 +13,11 @@ import TableColumnsVisibility from "components/designSystems/appsmith/TableColum
 import TableFilters, {
  ReactTableFilter,
 } from "components/designSystems/appsmith/TableFilters";
-import { ReactTableColumnProps, CompactMode } from "widgets/TableWidget";
+import {
+  ReactTableColumnProps,
+  CompactMode,
+  TableSizes,
+} from "widgets/TableWidget";
 import TableDataDownload from "components/designSystems/appsmith/TableDataDownload";
 import TableCompactMode from "components/designSystems/appsmith/TableCompactMode";
 import { Colors } from "constants/Colors";
@ -26,7 +30,8 @@ const PageNumberInputWrapper = styled(NumericInput)`
    border: 1px solid ${Colors.GREEN};
    box-sizing: border-box;
    border-radius: 4px;
-    width: 32px;
+    width: 24px;
+    height: 24px;
    padding: 0 !important;
    text-align: center;
  }
@ -81,6 +86,7 @@ interface TableHeaderProps {
  compactMode?: CompactMode;
  updateCompactMode: (compactMode: CompactMode) => void;
  width: number;
+  tableSizes: TableSizes;
 }

 const TableHeader = (props: TableHeaderProps) => {
@ -88,6 +94,7 @@ const TableHeader = (props: TableHeaderProps) => {
    <TableHeaderWrapper
      serverSidePaginationEnabled={props.serverSidePaginationEnabled}
      width={props.width}
+      tableSizes={props.tableSizes}
      backgroundColor={Colors.WHITE}
    >
      <SearchComponent
@ -95,7 +102,7 @@ const TableHeader = (props: TableHeaderProps) => {
        placeholder="Search..."
        onSearch={props.searchTableData}
      />
-      <CommonFunctionsMenuWrapper>
+      <CommonFunctionsMenuWrapper tableSizes={props.tableSizes}>
        <TableFilters
          columns={props.columns}
          filters={props.filters}
--- a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
@ -1,13 +1,12 @@
 import styled from "styled-components";
-import { Colors, Color } from "constants/Colors";
 import { TableSizes } from "widgets/TableWidget";
+import { Colors, Color } from "constants/Colors";
 import { scrollbarLight } from "constants/DefaultTheme";

 export const TableWrapper = styled.div<{
  width: number;
  height: number;
  tableSizes: TableSizes;
-  tableRowHeight?: number;
  backgroundColor?: Color;
 }>`
  width: 100%;
@ -75,6 +74,8 @@ export const TableWrapper = styled.div<{
      border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
      border-right: 1px solid ${Colors.GEYSER_LIGHT};
      position: relative;
+      font-size: ${props => props.tableSizes.ROW_FONT_SIZE}px;
+      line-height: ${props => props.tableSizes.ROW_FONT_SIZE}px;
      :last-child {
        border-right: 0;
      }
@ -96,19 +97,13 @@ export const TableWrapper = styled.div<{
    }
    .th {
      padding: 0 10px 0 0;
-      height: 52px;
-      line-height: 52px;
+      height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px;
+      line-height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px;
      background: ${Colors.ATHENS_GRAY_DARKER};
    }
    .td {
-      height: ${props =>
-        props.tableRowHeight
-          ? props.tableRowHeight
-          : props.tableSizes.ROW_HEIGHT}px;
-      line-height: ${props =>
-        props.tableRowHeight
-          ? props.tableRowHeight
-          : props.tableSizes.ROW_HEIGHT}px;
+      height: ${props => props.tableSizes.ROW_HEIGHT}px;
+      line-height: ${props => props.tableSizes.ROW_HEIGHT}px;
      padding: 0 10px;
    }
  }
@ -136,8 +131,8 @@ export const TableWrapper = styled.div<{
  }
  .column-menu {
    cursor: pointer;
-    height: 52px;
-    line-height: 52px;
+    height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px;
+    line-height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px;
  }
  .th {
    display: flex;
@ -150,8 +145,8 @@ export const TableWrapper = styled.div<{
    }
  }
  .input-group {
-    height: 52px;
-    line-height: 52px;
+    height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px;
+    line-height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px;
    padding: 0 5px;
  }
 `;
@ -206,7 +201,7 @@ export const PaginationWrapper = styled.div`
  width: 100%;
  justify-content: flex-end;
  align-items: center;
-  padding: 14px 20px;
+  padding: 8px 20px;
 `;

 export const PaginationItemWrapper = styled.div<{
@ -218,8 +213,8 @@ export const PaginationItemWrapper = styled.div<{
    ${props => (props.selected ? Colors.GREEN : Colors.GEYSER_LIGHT)};
  box-sizing: border-box;
  border-radius: 4px;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
@ -257,7 +252,7 @@ export const ActionWrapper = styled.div`
  }
 `;

-export const CellWrapper = styled.div<{ isHidden: boolean }>`
+export const CellWrapper = styled.div<{ isHidden?: boolean }>`
  display: flex;
  align-items: center;
  justify-content: flex-start;
@ -291,6 +286,7 @@ export const CellWrapper = styled.div<{ isHidden: boolean }>`
 export const TableHeaderWrapper = styled.div<{
  serverSidePaginationEnabled: boolean;
  width: number;
+  tableSizes: TableSizes;
  backgroundColor?: Color;
 }>`
  display: flex;
@ -301,15 +297,17 @@ export const TableHeaderWrapper = styled.div<{
  }
  overflow-x: scroll;
  overflow-y: hidden;
-  height: 60px;
-  min-height: 60px;
+  height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px;
+  min-height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px;
  ${scrollbarLight};
 `;

-export const CommonFunctionsMenuWrapper = styled.div`
+export const CommonFunctionsMenuWrapper = styled.div<{
+  tableSizes: TableSizes;
+}>`
  display: flex;
  align-items: center;
-  height: 60px;
+  height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px;
 `;

 export const RowWrapper = styled.div`
@ -331,7 +329,7 @@ export const TableIconWrapper = styled.div<{
  box-shadow: ${props =>
    props.selected ? `inset 0px 4px 0px ${Colors.GREEN}` : "none"};
  width: 48px;
-  height: 60px;
+  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
--- a/app/client/src/jsExecution/JSExecutionManagerSingleton.ts
+++ b/app/client/src/jsExecution/JSExecutionManagerSingleton.ts
@ -1,6 +1,7 @@
 import RealmExecutor from "./RealmExecutor";
 import moment from "moment-timezone";
 import { ActionDescription } from "entities/DataTree/dataTreeFactory";
+import { btoa, atob } from "js-base64";

 export type JSExecutorGlobal = Record<string, object>;
 export type JSExecutorResult = {
@ -30,6 +31,14 @@ export const extraLibraries = [
    accessor: "moment",
    lib: moment,
  },
+  {
+    accessor: "btoa",
+    lib: btoa,
+  },
+  {
+    accessor: "atob",
+    lib: atob,
+  },
 ];

 class JSExecutionManager {
--- a/app/client/src/pages/organization/settings.tsx
+++ b/app/client/src/pages/organization/settings.tsx
@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import { Icon } from "@blueprintjs/core";
 import { TableWrapper } from "components/designSystems/appsmith/TableStyledWrappers";
 import { CompactModeTypes, TABLE_SIZES } from "widgets/TableWidget";
+import { Colors } from "constants/Colors";
 import { AppState } from "reducers";
 import {
  getAllUsers,
@ -64,19 +65,6 @@ const StyledDropDown = styled.div`
 const StyledTableWrapped = styled(TableWrapper)`
  min-height: 0px;
  height: auto;
-  .tableWrap {
-    display: flex;
-    flex: 1;
-  }
-  .table {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    height: auto;
-    .tbody {
-      overflow: auto;
-    }
-  }
 `;

 const StyledMenu = styled(Menu)`
@ -190,6 +178,13 @@ export const OrgSettings = (props: PageProps) => {
  }));
  const data = React.useMemo(() => userTableData, [userTableData]);

+  const tableHeight = React.useMemo(() => {
+    const tableDataLength =
+      userTableData.length * TABLE_SIZES[CompactModeTypes.DEFAULT].ROW_HEIGHT +
+      TABLE_SIZES[CompactModeTypes.DEFAULT].COLUMN_HEADER_HEIGHT;
+    return tableDataLength < 200 ? tableDataLength : 200;
+  }, [userTableData]);
+
  const columns = React.useMemo(() => {
    return [
      {
@ -238,7 +233,6 @@ export const OrgSettings = (props: PageProps) => {
    fetchAllRoles(orgId);
    fetchCurrentOrg(orgId);
  }, [orgId, fetchUser, fetchAllRoles, fetchCurrentOrg]);
-
  return (
    <React.Fragment>
      <PageSectionHeader>
@ -268,8 +262,9 @@ export const OrgSettings = (props: PageProps) => {
      ) : (
        <StyledTableWrapped
          width={200}
-          height={200}
+          height={tableHeight}
          tableSizes={TABLE_SIZES[CompactModeTypes.DEFAULT]}
+          backgroundColor={Colors.ATHENS_GRAY_DARKER}
        >
          <div className="tableWrap">
            <div {...getTableProps()} className="table">
--- a/app/client/src/widgets/TableWidget.tsx
+++ b/app/client/src/widgets/TableWidget.tsx
@ -29,23 +29,33 @@ export type TableSizes = {
  COLUMN_HEADER_HEIGHT: number;
  TABLE_HEADER_HEIGHT: number;
  ROW_HEIGHT: number;
+  ROW_FONT_SIZE: number;
 };

 export enum CompactModeTypes {
  SHORT = "SHORT",
  DEFAULT = "DEFAULT",
+  TALL = "TALL",
 }

 export const TABLE_SIZES: { [key: string]: TableSizes } = {
  [CompactModeTypes.DEFAULT]: {
-    COLUMN_HEADER_HEIGHT: 52,
-    TABLE_HEADER_HEIGHT: 61,
-    ROW_HEIGHT: 52,
+    COLUMN_HEADER_HEIGHT: 38,
+    TABLE_HEADER_HEIGHT: 45,
+    ROW_HEIGHT: 40,
+    ROW_FONT_SIZE: 12,
  },
  [CompactModeTypes.SHORT]: {
-    COLUMN_HEADER_HEIGHT: 52,
-    TABLE_HEADER_HEIGHT: 61,
-    ROW_HEIGHT: 40,
+    COLUMN_HEADER_HEIGHT: 38,
+    TABLE_HEADER_HEIGHT: 45,
+    ROW_HEIGHT: 20,
+    ROW_FONT_SIZE: 10,
+  },
+  [CompactModeTypes.TALL]: {
+    COLUMN_HEADER_HEIGHT: 38,
+    TABLE_HEADER_HEIGHT: 45,
+    ROW_HEIGHT: 60,
+    ROW_FONT_SIZE: 12,
  },
 };

@ -322,7 +332,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
        (tableSizes.TABLE_HEADER_HEIGHT +
          tableSizes.COLUMN_HEADER_HEIGHT +
          tableSizes.ROW_HEIGHT * pageSize) >
-      10
+      0
    )
      pageSize += 1;

@ -388,7 +398,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
          applyFilter={(filters: ReactTableFilter[]) => {
            super.updateWidgetMetaProperty("filters", filters);
          }}
-          compactMode={this.props.compactMode}
+          compactMode={this.props.compactMode || CompactModeTypes.DEFAULT}
          updateCompactMode={(compactMode: CompactMode) => {
            super.updateWidgetMetaProperty("compactMode", compactMode);
          }}
--- a/app/client/yarn.lock
+++ b/app/client/yarn.lock
@ -10372,6 +10372,11 @@ js-base64@^2.1.8:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"

+js-base64@^3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.4.5.tgz#6d1921e65a172cfd924604e1416dfaff45752c3e"
+  integrity sha512-Ub/AANierdcT8nm4ndBn3KzpZQ3MdHX4a+bwoVdjgeHCZ0ZEcP+UB4nmR4Z5lR6SH3Y+qAPmgVR0RxKJNHNHEg==
+
 js-string-escape@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"