hunk.code_window:     dispatch(
         createDatasource({
           // Datasource name should not end with /
           name: value.endsWith("/") ? value.slice(0, -1) : value,
           datasourceConfiguration: {
             // Datasource url should end with /
  
hunk.labels: keep keep keep replace keep keep
hunk.after_edit:         name: trimmedValue.endsWith("/")
             ? trimmedValue.slice(0, -1)
             : trimmedValue,
  
hunk.file_path: app/client/src/components/editorComponents/form/fields/DatasourcesField.tsx
hunk.type: replace
file: import * as React from "react";
  import { Text, Classes } from "@blueprintjs/core";
  import styled from "styled-components";
  import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
  import { TextStyle } from "widgets/TextWidget";
  import Interweave from "interweave";
  import { UrlMatcher, EmailMatcher } from "interweave-autolink";
  import { labelStyle } from "constants/DefaultTheme";
  type TextStyleProps = {
    accent: "primary" | "secondary" | "error";
  };
  
  export const BaseText = styled(Text)<TextStyleProps>``;
  
  /*
    Note:
    -webkit-line-clamp may seem like a wierd way to doing this
    however, it is getting more and more useful with more browser support.
    It suffices for our target browsers
    More info: https://css-tricks.com/line-clampin/
  */
  
  export const TextContainer = styled.div`
    && {
      height: 100%;
      width: 100%;
    }
  `;
  export const StyledText = styled(Text)<{ scroll: boolean }>`
    height: 100%;
    overflow-y: ${props => (props.scroll ? "auto" : "hidden")};
    text-overflow: ellipsis;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: ${props => (props.scroll ? "flex-start" : "center")};
    &.bp3-heading {
      font-weight: ${props => props.theme.fontWeights[3]};
      font-size: ${props => props.theme.fontSizes[4]}px;
    }
    &.bp3-ui-text {
      ${labelStyle}
    }
  `;
  
  export interface TextComponentProps extends ComponentProps {
    text?: string;
    ellipsize?: boolean;
    textStyle?: TextStyle;
    isLoading: boolean;
    shouldScroll?: boolean;
  }
  
  class TextComponent extends React.Component<TextComponentProps> {
    getTextClass(textStyle?: TextStyle) {
      const className = [];
  
      if (this.props.isLoading) {
        className.push("bp3-skeleton");
      }
      switch (textStyle) {
        case "HEADING":
          className.push(Classes.HEADING);
          break;
        case "BODY":
          className.push(Classes.RUNNING_TEXT);
          break;
        case "LABEL":
          className.push(Classes.UI_TEXT);
          break;
        default:
          break;
      }
  
      return className.join(" ");
    }
  
    render() {
      const { textStyle, text, ellipsize } = this.props;
      return (
        <TextContainer>
          <StyledText
            scroll={!!this.props.shouldScroll}
            className={this.getTextClass(textStyle)}
            ellipsize={ellipsize}
          >
            <Interweave
              content={text}
              matchers={[new UrlMatcher("url"), new EmailMatcher("email")]}
            />
          </StyledText>
        </TextContainer>
      );
    }
  }
  
  export default TextComponent;
  