Make PSQL shell work end-to-end

src/Contracts/DataModels.ts

@@ -33,6 +33,7 @@ export interface DatabaseAccountExtendedProperties {
   privateEndpointConnections?: unknown[];
   capacity?: { totalThroughputLimit: number };
   locations?: DatabaseAccountResponseLocation[];
+  postgresqlEndpoint?: string;
 }
 
 export interface DatabaseAccountResponseLocation {

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -77,7 +77,7 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
     } else if (StringUtils.endsWith(notebookServerEndpoint, "cassandra")) {
       terminalEndpoint = this.props.databaseAccount?.properties.cassandraEndpoint;
     } else if (StringUtils.endsWith(notebookServerEndpoint, "postgresql")) {
-      return "c.vimeng-postgre-citus.postgres.database.azure.com";
+      return this.props.databaseAccount?.properties.postgresqlEndpoint;
     }
 
     if (terminalEndpoint) {

src/Explorer/Notebook/useNotebook.ts

@@ -124,8 +124,9 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     }
 
     const firstWriteLocation =
-      databaseAccount?.properties?.writeLocations &&
-      databaseAccount?.properties?.writeLocations[0]?.locationName.toLowerCase();
+      userContext.apiType === "Postgres"
+        ? databaseAccount?.location
+        : databaseAccount?.properties?.writeLocations?.[0]?.locationName.toLowerCase();
     const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
     const authorizationHeader = getAuthorizationHeader();
     try {
@@ -313,7 +314,10 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       if (dbAccountAllowedInfo.status === HttpStatusCodes.OK) {
         if (dbAccountAllowedInfo?.type === PhoenixErrorType.PhoenixFlightFallback) {
           isPhoenixNotebooks = isPublicInternetAllowed && userContext.features.phoenixNotebooks === true;
-          isPhoenixFeatures = isPublicInternetAllowed && userContext.features.phoenixFeatures === true;
+          isPhoenixFeatures =
+            isPublicInternetAllowed &&
+            // phoenix needs to be enabled for Postgres accounts since the PSQL shell requires phoenix containers
+            (userContext.features.phoenixFeatures === true || userContext.apiType === "Postgres");
         } else {
           isPhoenixNotebooks = isPhoenixFeatures = isPublicInternetAllowed;
         }

src/Explorer/Quickstart/PostgreQuickstartCommands.ts

@@ -71,16 +71,16 @@ SELECT create_distributed_table('github_users', 'user_id');
 SELECT create_distributed_table('github_events', 'user_id');`;
 
 export const loadDataCommand = `SET search_path to cosmosdb_tutorial;
-\\COPY github_users FROM PROGRAM 'curl https://examples.citusdata.com/users.csv' WITH (FORMAT CSV)
-\\COPY github_events FROM PROGRAM 'curl https://examples.citusdata.com/events.csv' WITH (FORMAT CSV)
+\\COPY github_users FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/users.csv"' WITH (FORMAT CSV);
+\\COPY github_events FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/events.csv"' WITH (FORMAT CSV);
 `;
 
 export const loadDataCommandForDisplay = `-- Using schema created for the tutorial
 SET search_path to cosmosdb_tutorial;
 
 -- download users and store in table
-\\COPY github_users FROM PROGRAM 'curl https://examples.citusdata.com/users.csv' WITH (FORMAT CSV)
-\\COPY github_events FROM PROGRAM 'curl https://examples.citusdata.com/events.csv' WITH (FORMAT CSV)`;
+\\COPY github_users FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/users.csv"' WITH (FORMAT CSV);
+\\COPY github_events FROM PROGRAM 'wget -q -O - "$@" "https://examples.citusdata.com/events.csv"' WITH (FORMAT CSV);`;
 
 export const queryCommand = `SET search_path to cosmosdb_tutorial;
 SELECT count(*) FROM github_users;

src/Explorer/Quickstart/QuickstartGuide.tsx

@@ -95,7 +95,6 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
     <Stack style={{ paddingTop: 8, height: "100%", width: "100%" }}>
       <Stack style={{ flexGrow: 1, padding: "0 20px", overflow: "auto" }}>
         <Text variant="xxLarge">Quick start guide</Text>
-        <Text variant="medium">Gettings started in Cosmos DB</Text>
         {currentStep < 5 && (
           <Pivot style={{ marginTop: 10, width: "100%" }} selectedKey={GuideSteps[currentStep]}>
             <PivotItem
@@ -111,7 +110,7 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
                   <br />
                   To begin, please enter the cluster&apos;s password in the PostgreSQL terminal.
                 </Text>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
+                <Youtube videoId="UaBDXHMQAUw" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
               </Stack>
             </PivotItem>
             <PivotItem
@@ -151,7 +150,7 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
                     onClick={() => onCopyBtnClicked("#newTableCommand")}
                   />
                 </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
+                <Youtube videoId="VJqupvSQ-mw" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
               </Stack>
             </PivotItem>
             <PivotItem
@@ -196,7 +195,7 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
                     onClick={() => onCopyBtnClicked("#distributeTableCommand")}
                   />
                 </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
+                <Youtube videoId="Q-AW7q1GLDY" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
               </Stack>
             </PivotItem>
             <PivotItem
@@ -236,7 +235,7 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
                     onClick={() => onCopyBtnClicked("#loadDataCommand")}
                   />
                 </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
+                <Youtube videoId="h15fvLKXzRo" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
               </Stack>
             </PivotItem>
             <PivotItem
@@ -278,7 +277,7 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
                     onClick={() => onCopyBtnClicked("#queryCommand")}
                   />
                 </Stack>
-                <Youtube videoId="Jvgh64rvdXU" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
+                <Youtube videoId="p46nRnE4b8Y" style={{ margin: "20px 0" }} opts={{ width: "90%" }} />
               </Stack>
             </PivotItem>
           </Pivot>

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -117,7 +117,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           <div className="splashScreenContainer">
             <div className="splashScreen">
               <div className="title">
-                {userContext.apiType === "Postgres" ? "Welcome to Cosmos DB - PostgreSQL" : "Welcome to Cosmos DB"}
+                {userContext.apiType === "Postgres"
+                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                  : "Welcome to Cosmos DB"}
                 <FeaturePanelLauncher />
               </div>
               <div className="subtitle">
@@ -327,7 +329,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: PowerShellIcon,
         title: "PostgreSQL Shell",
         description: "Create table and interact with data using PostgreSQL’s shell interface",
-        onClick: () => this.container.openNotebookTerminal(TerminalKind.Mongo),
+        onClick: () => this.container.openNotebookTerminal(TerminalKind.Postgres),
       };
       heroes.push(postgreShellBtn);
     } else {