PromucFlow_constructor/app/client/src/pages/common/datasourceAuth/AuthMessage.tsx

import type { AppState } from "@appsmith/reducers";
import { redirectAuthorizationCode } from "actions/datasourceActions";
import type { CalloutKind } from "design-system";
import { Callout } from "design-system";
import type { Datasource } from "entities/Datasource";
import { ActionType } from "entities/Datasource";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { getPluginTypeFromDatasourceId } from "selectors/entitiesSelector";
import styled from "styled-components";
import {
  setGlobalSearchQuery,
  toggleShowGlobalSearchModal,
} from "actions/globalSearchActions";
import AnalyticsUtil from "utils/AnalyticsUtil";
import {
  GOOGLE_SHEETS_AUTHORIZE_DATASOURCE,
  GOOGLE_SHEETS_LEARN_MORE,
  createMessage,
} from "@appsmith/constants/messages";

const StyledAuthMessage = styled.div<{ isInViewMode: boolean }>`
  width: fit-content;
  ${(props) =>
    !props.isInViewMode &&
    `margin-top: var(--ads-v2-spaces-5);margin-bottom: var(--ads-v2-spaces-4);`}
`;

type AuthMessageProps = {
  // We can handle for other action types as well eg. save, delete etc.
  actionType?: string;
  datasource: Datasource;
  description: string;
  pageId?: string;
  style?: any;
  calloutType?: CalloutKind;
  isInViewMode?: boolean;
};

export default function AuthMessage(props: AuthMessageProps) {
  const {
    actionType,
    calloutType = "error",
    datasource,
    description,
    pageId,
    style = {},
    isInViewMode = false,
  } = props;
  const dispatch = useDispatch();
  const pluginType = useSelector((state: AppState) =>
    getPluginTypeFromDatasourceId(state, datasource.id),
  );
  const handleOauthAuthorization: any = (e: React.MouseEvent) => {
    e.preventDefault();
    if (!pluginType || !pageId) return;
    dispatch(redirectAuthorizationCode(pageId, datasource.id, pluginType));
  };
  const handleDocumentationClick: any = (e: React.MouseEvent) => {
    e.stopPropagation();
    e.preventDefault();
    const query = "Google Sheets";
    dispatch(setGlobalSearchQuery(query));
    dispatch(toggleShowGlobalSearchModal());
    AnalyticsUtil.logEvent("OPEN_OMNIBAR", {
      source: "DATASOURCE_DOCUMENTATION_CLICK",
      query,
    });
  };

  return (
    <StyledAuthMessage isInViewMode={isInViewMode} style={style}>
      <Callout
        kind={calloutType}
        links={
          actionType === ActionType.AUTHORIZE
            ? [
                {
                  children: createMessage(GOOGLE_SHEETS_AUTHORIZE_DATASOURCE),
                  onClick: handleOauthAuthorization,
                },
              ]
            : actionType === ActionType.DOCUMENTATION
            ? [
                {
                  children: createMessage(GOOGLE_SHEETS_LEARN_MORE),
                  onClick: handleDocumentationClick,
                },
              ]
            : undefined
        }
      >
        {description}
      </Callout>
    </StyledAuthMessage>
  );
}