fix(ui): Fix organization creation (platform#214)

Author: Adrinlol

ui/packages/platform/src/components/Dashboard/Dashboard.tsx

@@ -214,12 +214,13 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
   }
 
   renderProjects() {
-    const { classes, org } = this.props
+    const { classes } = this.props
+    const org = this.props.org as string | number
+    const orgId = this.props.orgId
     const projectsData =
       this.state && this.state.data && this.state.data.projects
         ? this.state.data.projects
         : null
-    const orgId = this.props.orgId
 
     const breadcrumbs = (
       <ConsoleBreadcrumbsWrapper
@@ -260,8 +261,8 @@ class Dashboard extends Component<DashboardWithStylesProps, DashboardState> {
 
     const projects = projectsData.data
 
-    const dblabPermitted = this.props.orgPermissions.dblabInstanceCreate
-    const checkupPermitted = this.props.orgPermissions.checkupReportConfigure
+    const dblabPermitted = this.props.orgPermissions?.dblabInstanceCreate
+    const checkupPermitted = this.props.orgPermissions?.checkupReportConfigure
 
     const addDblabInstanceButton = (
       <ConsoleButtonWrapper

ui/packages/platform/src/components/Dashboard/DashboardWrapper.tsx

@@ -4,12 +4,12 @@ import { RouteComponentProps } from 'react-router'
 import Dashboard from 'components/Dashboard/Dashboard'
 
 export interface DashboardProps {
-  org: string | number
-  orgId: number
+  org?: string | number
+  orgId?: number
   onlyProjects: boolean
   history: RouteComponentProps['history']
   project?: string | undefined
-  orgPermissions: {
+  orgPermissions?: {
     dblabInstanceCreate?: boolean
     checkupReportConfigure?: boolean
   }

ui/packages/platform/src/components/IndexPage/IndexPage.tsx

@@ -771,7 +771,7 @@ function OrganizationWrapper(parentProps: OrganizationWrapperProps) {
       />
       <Route
         path="/:org/explain"
-        render={(props) => <ExplainVisualizationWrapper />}
+        render={() => <ExplainVisualizationWrapper />}
       />
       <Route
         path="/:org/sessions"
@@ -1177,13 +1177,7 @@ class IndexPage extends Component<IndexPageWithStylesProps, IndexPageState> {
           <Route
             path="/:org"
             render={(props) => (
-              <OrganizationMenu
-                {...props}
-                raw={this.props.raw}
-                auth={this.props.auth}
-                classes={classes}
-                env={env}
-              />
+              <OrganizationMenu {...props} classes={classes} env={env} />
             )}
           />
         </Switch>
@@ -1268,42 +1262,18 @@ class IndexPage extends Component<IndexPageWithStylesProps, IndexPageState> {
                 path={ROUTES.ROOT.path}
                 exact
                 render={(props) => (
-                  <DashboardWrapper
-                    onlyProjects={false}
-                    {...props}
-                    org={this.props.org}
-                    orgId={this.props.orgId}
-                    orgPermissions={{
-                      dblabInstanceCreate:
-                        this.props.orgPermissions?.dblabInstanceCreate,
-                      checkupReportConfigure:
-                        this.props.orgPermissions?.checkupReportConfigure,
-                    }}
-                  />
+                  <DashboardWrapper onlyProjects={false} {...props} />
                 )}
               />
               <Route
                 path={ROUTES.CREATE_ORG.path}
-                render={(props) => (
-                  <OrgFormWrapper
-                    project={this.props.match?.params.project}
-                    mode={this.props.match?.params.mode}
-                    org={this.props.org}
-                    orgId={this.props.orgId}
-                    orgPermissions={{
-                      settingsOrganizationUpdate:
-                        this.props.orgPermissions?.settingsOrganizationUpdate,
-                    }}
-                    {...props}
-                  />
-                )}
+                render={(props) => <OrgFormWrapper mode={'new'} {...props} />}
               />
               <Route
                 path="/:org"
                 render={(props) => (
                   <OrganizationWrapper
                     {...props}
-                    raw={this.props.raw}
                     env={env}
                     auth={auth}
                     classes={classes}

ui/packages/platform/src/components/OrgForm/OrgForm.tsx

@@ -38,16 +38,10 @@ import ConsolePageTitle from '../ConsolePageTitle'
 import { WarningWrapper } from 'components/Warning/WarningWrapper'
 import { messages } from '../../assets/messages'
 import { formatAlias } from 'utils/aliases'
+import { OrgFormProps } from 'components/OrgForm/OrgFormWrapper'
 
-interface OrgFormProps {
+interface OrgFormWithStylesProps extends OrgFormProps {
   classes: ClassesType
-  mode?: string | undefined
-  project: string | undefined
-  org: string | number
-  orgId: number
-  orgPermissions: {
-    settingsOrganizationUpdate?: boolean
-  }
 }
 
 interface DomainsType {
@@ -101,7 +95,7 @@ interface OrgFormState {
   } | null
 }
 
-class OrgForm extends Component<OrgFormProps, OrgFormState> {
+class OrgForm extends Component<OrgFormWithStylesProps, OrgFormState> {
   state = {
     id: null,
     name: '',

ui/packages/platform/src/components/OrgForm/OrgFormWrapper.tsx

@@ -2,12 +2,12 @@ import { makeStyles } from '@material-ui/core'
 import { styles } from '@postgres.ai/shared/styles/styles'
 import OrgForm from 'components/OrgForm/OrgForm'
 
-interface OrgFormProps {
+export interface OrgFormProps {
   mode?: string | undefined
-  project: string | undefined
-  org: string | number
-  orgId: number
-  orgPermissions: {
+  project?: string | undefined
+  org?: string | number
+  orgId?: number
+  orgPermissions?: {
     settingsOrganizationUpdate?: boolean
   }
 }

ui/packages/platform/src/components/ReportFile/ReportFileWrapper.tsx

@@ -13,7 +13,7 @@ export interface ReportFileProps extends RouteComponentProps<MatchParams> {
   projectId: string | number | undefined
   reportId: string
   fileType: string
-  raw: boolean
+  raw?: boolean
 }
 
 export const ReportFileWrapper = (props: ReportFileProps) => {

ui/packages/platform/src/components/types/index.ts

@@ -56,7 +56,7 @@ export interface ProjectWrapperProps {
       project: string
     }
   }
-  raw: boolean
+  raw?: boolean
   org: string | number
   orgId: number
   userIsOwner: boolean
@@ -105,23 +105,17 @@ export interface OrganizationWrapperProps {
     userId: number
     token: string
   } | null
-  raw: boolean
+  raw?: boolean
 }
 
 export interface OrganizationMenuProps {
-  raw: boolean
   classes: { [classes: string]: string }
   location: RouteComponentProps['location']
   match: {
     params: {
       org: string
     }
   }
-  auth: {
-    isProcessed: boolean
-    userId: number
-    token: string
-  } | null
   env: {
     data: {
       orgs?: Orgs