[SL-3] Cosmetic fixes in OSS UI (#6404)

keydunov · web-flow · commit 10d9264379f4 · 2023-04-10T10:50:57.000-07:00
diff --git a/packages/cubejs-playground/src/components/CopiableInput.tsx b/packages/cubejs-playground/src/components/CopiableInput.tsx
@@ -11,13 +11,15 @@ const IconButton: typeof Button = styled(Button)`
 
 type CopiableInputProps = {
   label?: string;
+  wrapperStyle?: object;
   onCopyClick?: (value: string) => void;
 } & InputProps;
 
 export function CopiableInput({
   label,
   value,
   onCopyClick,
+  wrapperStyle,
   ...props
 }: CopiableInputProps) {
   const suffix = (
@@ -41,6 +43,7 @@ export function CopiableInput({
       label={label ? <b>{label}</b> : null}
       labelCol={{ span: 24 }}
       wrapperCol={{ span: 24 }}
+      style={wrapperStyle}
     >
       <Input
         data-testid={`localhost-tipbox-${label?.toLowerCase()}-input`}
diff --git a/packages/cubejs-playground/src/pages/ConnectToBI/ConnectToBiPage.tsx b/packages/cubejs-playground/src/pages/ConnectToBI/ConnectToBiPage.tsx
@@ -20,6 +20,8 @@ import hightouchSvg from '../../img/bi/hightouch.svg';
 import thoughtSpot from '../../img/bi/thoughtspot.svg';
 import { Content, Header } from '../components/Ui';
 
+const { Paragraph, Link } = Typography;
+
 const SpaceFlex = styled(Space)`
   div.ant-space {
     display: flex;
@@ -36,21 +38,21 @@ type CubeSqlCredentials = {
 
 const BI_KEYS = {
   Generic: 'BIs and Visualization Tools',
-  Tableau: 'Tableau',
-  PowerBI: 'Power BI',
   Superset: 'Apache Superset',
   Metabase: 'Metabase',
+  Tableau: 'Tableau',
+  ThoughtSpot: 'ThoughtSpot',
+  PowerBI: 'Power BI',
   Hex: 'Hex',
   Jupyter: 'Jupyter notebook',
   Streamlit: 'Streamlit',
+  Observable: 'Observable',
   // Not listed on the integration page:
   Deepnote: 'Deepnote',
   Excel: 'Excel',
   GoogleStudio: 'Google Data Studio',
   GoogleSheets: 'Google Sheets',
   Hightouch: 'Hightouch',
-  Observable: 'Observable',
-  ThoughtSpot: 'ThoughtSpot',
 } as const;
 
 type BiKeyNames = keyof typeof BI_KEYS;
@@ -290,11 +292,6 @@ type BIFields = {
 const BI_FIELDS: BIFields = {
   Generic: [
     POSTGRESQL_FIELD,
-    {
-      type: 'alert',
-      value:
-        'Warning: some BI tools are not fully supported yet and you may encounter problems when querying',
-    },
     PG_SNIPPET_FIELD,
     ...BASE_CREDENTIALS,
   ],
@@ -532,6 +529,11 @@ export function ConnectToBiPage() {
       </Header>
 
       <Content>
+        <Paragraph>
+          With Cube SQL API you can query Cube via Postgres-compatible SQL.
+          It enables the use of BI applications and other visualization tools on top of Cube. <br />
+          <Link href="https://cube.dev/docs/config/downstream" target="_blank">Learn more about SQL API and connecting to BI tools in Cube docs ↗ </Link>
+        </Paragraph>
         <Tabs defaultActiveKey="1" tabPosition="left" size="small">
           {Object.entries(BI_KEYS).map(([key, title]) => (
             <Tabs.TabPane
diff --git a/packages/cubejs-playground/src/pages/FrontendIntegrations/FrontendIntegrationsPage.tsx b/packages/cubejs-playground/src/pages/FrontendIntegrations/FrontendIntegrationsPage.tsx
@@ -1,12 +1,57 @@
-import { Card, Layout, Space, Tabs, Typography } from 'antd';
+import { Card, Layout, Space, Tabs, Typography, Table, Col, Row } from 'antd';
 import { CodeSnippet } from '../../atoms';
 import { Content, Header } from '../components/Ui';
+import { CopiableInput } from '../../components/CopiableInput';
 
 const { Paragraph, Link, Title } = Typography;
 
 export function FrontendIntegrationsPage() {
   const token = 'token';
   const apiUrl = 'http://localhost:4000/cubejs-api';
+  const restUrl = `${apiUrl}/v1/load`;
+  const wsUrl = "ws://localhost:4000/";
+  const graphqlUrl = `${apiUrl}/v1/graphql`;
+
+  const dataSource = [
+    {
+      key: '1',
+      name: 'REST API Endpoint',
+      url: restUrl,
+      docsUrl: 'https://cube.dev/docs/rest-api',
+    },
+    {
+      key: '2',
+      name: 'Websockets Endpoint',
+      url: wsUrl,
+      docsUrl: 'https://cube.dev/docs/real-time-data-fetch',
+    },
+    {
+      key: '2',
+      name: 'GraphQL Endpoint',
+      url: graphqlUrl,
+      docsUrl: 'https://cube.dev/docs/backend/graphql',
+    },
+  ];
+  
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'URL',
+      dataIndex: 'url',
+      key: 'url',
+      render: (text) => <CopiableInput wrapperStyle={{ margin: 0 }} value={text} />
+    },
+    {
+      title: 'Docs',
+      dataIndex: 'docsUrl',
+      key: 'docsUrl',
+      render: (text) => <a href={text} target="_blank">Docs</a>
+    }
+  ];
 
   return (
     <Layout>
@@ -15,27 +60,32 @@ export function FrontendIntegrationsPage() {
       </Header>
 
       <Content>
-        <Space direction="vertical" size="large">
-          <Paragraph>
-            Learn more about{' '}
-            <Link href="https://cube.dev/docs/rest-api" target="_blank">
-              REST
-            </Link>
-            ,{' '}
-            <Link href="https://cube.dev/docs/backend/graphql" target="_blank">
-              GraphQL
-            </Link>{' '}
-            APIs and{' '}
-            <Link
-              href="https://cube.dev/docs/frontend-introduction"
-              target="_blank"
-            >
-              integration with frontend frameworks
-            </Link>
-            .
-          </Paragraph>
-
-          <Tabs defaultActiveKey="1" size="small">
+          <Row gutter={48}>
+            <Col span={12}>
+              <Paragraph>
+                You can refer to Cube docs to learn more about{' '}
+                <Link href="https://cube.dev/docs/rest-api" target="_blank">
+                  REST
+                </Link>
+                ,{' '}
+                <Link href="https://cube.dev/docs/backend/graphql" target="_blank">
+                  GraphQL
+                </Link>{' '}
+                APIs and{' '}
+                <Link
+                  href="https://cube.dev/docs/frontend-introduction"
+                  target="_blank"
+                >
+                  integration with frontend frameworks
+                </Link>
+                .
+              </Paragraph>
+              <Paragraph>
+                <Table dataSource={dataSource} columns={columns} pagination={false} showHeader={false} />
+              </Paragraph>
+            </Col>
+            <Col span={12}>
+            <Tabs defaultActiveKey="1" size="small">
             <Tabs.TabPane key="terminal" tab="Terminal">
               <Space direction="vertical" size="large">
                 <Card>
@@ -194,7 +244,8 @@ const cubeApi = cube(
               </Space>
             </Tabs.TabPane>
           </Tabs>
-        </Space>
+            </Col>
+          </Row>
       </Content>
     </Layout>
   );
diff --git a/packages/cubejs-playground/src/pages/Schema/SchemaPage.tsx b/packages/cubejs-playground/src/pages/Schema/SchemaPage.tsx
@@ -99,6 +99,7 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
     const result = await res.json();
     this.setState({
       files: result.files,
+      activeTab: (result.files && result.files.length > 0) ? "files" : "schema"
     });
   }
 
@@ -128,8 +129,8 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
       await this.loadFiles();
       this.setState({ checkedKeys: [], activeTab: 'files' });
       Modal.success({
-        title: 'Schema files successfully generated!',
-        content: 'You can start building the charts',
+        title: 'Data model files successfully generated!',
+        content: 'You can start exploring your data model and building the charts',
         okText: 'Build',
         cancelText: 'Close',
         okCancel: true,
@@ -254,10 +255,6 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
                 data-testid="chart-type-btn"
                 overlay={
                   <Menu data-testid="generate-schema">
-                    <Menu.Item onClick={() => this.generateSchema()}>
-                      JavaScript
-                    </Menu.Item>
-
                     <Menu.Item
                       title={
                         !isYamlFormatSupported
@@ -269,11 +266,14 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
                     >
                       YAML
                     </Menu.Item>
+                    <Menu.Item onClick={() => this.generateSchema()}>
+                      JavaScript
+                    </Menu.Item>
                   </Menu>
                 }
                 style={{ border: 0 }}
               >
-                Generate Schema
+                Generate Data Model
               </ButtonDropdown>
             }
           >
@@ -298,13 +298,13 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
               message={
                 isDocker ? (
                   <span>
-                    Schema files are located and can be edited in the mount
+                    Data model files are located and can be edited in the mount
                     volume directory.{' '}
                     <Typography.Link
                       href="https://cube.dev/docs/schema/getting-started"
                       target="_blank"
                     >
-                      Learn more about working with Cube data schema in the docs
+                      Learn more about working with Cube data model in the docs
                     </Typography.Link>
                   </span>
                 ) : (
@@ -329,7 +329,7 @@ export class SchemaPage extends Component<SchemaPageProps, any> {
           ) : (
             <Empty
               style={{ marginTop: 50 }}
-              description="Select tables to generate Cube schema"
+              description="Select tables to generate Cube data model"
             />
           )}
 
