From cc12c7aaa87e23b2d79ff324a59ae255fe5511fc Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Thu, 10 Feb 2022 02:21:11 +0800
Subject: [PATCH] added more InformationBox apis

---
 .../ColumnEditor/ColumnForeignKey.tsx              |  4 ++++
 .../ForeignKeySelector/ForeignKeySelector.tsx      |  1 +
 .../TableEditor/ColumnManagement.tsx               |  1 +
 studio/components/ui/InformationBox.tsx            | 14 +++++++++++++-
 studio/pages/new/[slug].tsx                        |  7 +++++--
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
index 9d5b4c70c10..e36cfe5186f 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
@@ -87,6 +87,7 @@ const ColumnForeignKeyInformation: FC<{
 }> = ({ columnName, foreignKey, onSelectEditRelation, onSelectRemoveRelation }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">
@@ -125,6 +126,7 @@ const ColumnForeignKeyAdded: FC<{
 }> = ({ columnName, foreignKey, onSelectEditRelation, onSelectRemoveRelation }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">
@@ -165,6 +167,7 @@ const ColumnForeignKeyRemoved: FC<{
 }> = ({ columnName, originalForeignKey, onSelectEditRelation }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">
@@ -210,6 +213,7 @@ const ColumnForeignKeyUpdated: FC<{
 }) => {
   return (
     <InformationBox
+      block
       icon={<IconLink />}
       title={
         <div className="flex items-center justify-between">
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index 924384e642e..7716ddf3b0a 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -126,6 +126,7 @@ const ForeignKeySelector: FC<Props> = ({
     >
       <div className="space-y-6">
         <InformationBox
+          block
           icon={<IconHelpCircle size="large" strokeWidth={1.5} />}
           title="What are foreign keys?"
           description={
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
index f48fa8fa067..cb5e070743e 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
@@ -178,6 +178,7 @@ const ColumnManagement: FC<Props> = ({
 
         {primaryKeyColumns.length > 1 && (
           <InformationBox
+            block
             icon={<IconKey className="text-white" size="large" />}
             title="Composite primary key selected"
             description="The columns that you've selected will grouped as a primary key, and will serve
diff --git a/studio/components/ui/InformationBox.tsx b/studio/components/ui/InformationBox.tsx
index 1281218e201..accf153a641 100644
--- a/studio/components/ui/InformationBox.tsx
+++ b/studio/components/ui/InformationBox.tsx
@@ -9,6 +9,9 @@ interface Props {
   urlLabel?: string
   defaultVisibility?: boolean
   hideCollapse?: boolean
+  className?: string
+  block?: boolean
+  size?: 'tiny' | 'small' | 'normal' | 'large'
 }
 
 const InformationBox: FC<Props> = ({
@@ -19,10 +22,19 @@ const InformationBox: FC<Props> = ({
   urlLabel = 'Read more',
   defaultVisibility = false,
   hideCollapse = false,
+  className = '',
+  block = false,
+  size = 'normal',
 }) => {
   const [isExpanded, setIsExpanded] = useState<boolean>(defaultVisibility)
+
+  const padding = { tiny: 'py-1', small: 'py-2', normal: 'py-3', large: 'py-4' }[size]
   return (
-    <div className="block w-full bg-gray-100 dark:bg-gray-600 py-3 border border-gray-600 dark:border-gray-500 border-opacity-20 rounded">
+    <div
+      className={`${
+        block ? 'block w-full' : ''
+      } bg-gray-100 dark:bg-gray-600 ${padding} border border-gray-600 dark:border-gray-500 border-opacity-20 rounded ${className}`}
+    >
       <div className="flex flex-col">
         <div className="flex items-center justify-between px-3">
           <div className="flex space-x-3 w-full lg:items-center">
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index f5c1c6d1450..dd98cd1a181 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -335,6 +335,7 @@ const NotOrganizationOwnerWarning = () => {
   return (
     <div className="mt-4">
       <InformationBox
+        block
         icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
         defaultVisibility={true}
         hideCollapse
@@ -342,8 +343,8 @@ const NotOrganizationOwnerWarning = () => {
         description={
           <div className="space-y-3">
             <p className="text-sm leading-normal">
-              Only the organization owner can create new projects. Contact your organization owner to
-              create a new project for this organization.
+              Only the organization owner can create new projects. Contact your organization owner
+              to create a new project for this organization.
             </p>
           </div>
         }
@@ -356,6 +357,7 @@ const FreeProjectLimitWarning = () => {
   return (
     <div className="mt-4">
       <InformationBox
+        block
         icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
         defaultVisibility={true}
         hideCollapse
@@ -411,6 +413,7 @@ const EmptyPaymentMethodWarning = observer(
     return (
       <div className="mt-4">
         <InformationBox
+          block
           icon={<IconAlertCircle className="text-white" size="large" strokeWidth={1.5} />}
           defaultVisibility={true}
           hideCollapse