Skip to content

Commit

Permalink
correct mui integration based on new findings
Browse files Browse the repository at this point in the history
  • Loading branch information
@mahmoudmoravej
mahmoudmoravej committed Mar 21, 2024
1 parent 7af0174 commit cdbd946
Show file tree
Hide file tree
Showing 12 changed files with 186 additions and 281 deletions.
258 changes: 115 additions & 143 deletions app/components/OrganizationForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import { Form } from "@remix-run/react";
import { Radio } from "@material-tailwind/react";

import { OrganizationUpdate } from "@app-types/graphql";
import { ChangeEventHandler } from "react";

import {
Input,
Typography,
Radio,
Button,
TextField as Input,
TextareaAutosize,
Card,
CardContent,
List,
ListItem,
CardBody,
Textarea,
} from "@material-tailwind/react";

import { OrganizationUpdate } from "@app-types/graphql";
import { ChangeEventHandler } from "react";
import { Button } from "@mui/material";
Typography,
CardHeader,
} from "@mui/material";

export type OrganizationFormData = Omit<OrganizationUpdate, "aiEngines"> & {
isPersonal: boolean;
Expand Down Expand Up @@ -64,35 +66,23 @@ export function OrganizationForm<T extends OrganizationFormData>({
<div className="mb-1 flex flex-col gap-6">
{!organization.isPersonal && !organization.isSystem && (
<>
<Typography variant="h6" color="blue-gray" className="-mb-3">
Name
</Typography>
<Input
size="lg"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
crossOrigin={undefined}
label="Name"
value={organization.name ?? ""}
readOnly={organization.isSystem}
InputProps={{
readOnly: organization.isSystem,
}}
onChange={({ target }) => {
updateData({ ...organization, name: target.value });
}}
/>

<Typography variant="h6" color="blue-gray" className="-mb-3">
Owner
</Typography>
<Input
size="lg"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
crossOrigin={undefined}
label="Owner Email"
value={organization.ownerEmail ?? ""}
readOnly={organization.isSystem}
InputProps={{
readOnly: organization.isSystem,
}}
onChange={({ target }) => {
updateData({ ...organization, ownerEmail: target.value });
}}
Expand All @@ -101,145 +91,127 @@ export function OrganizationForm<T extends OrganizationFormData>({
)}
{!organization.isSystem && (
<>
<Typography variant="h6" color="blue-gray" className="-mb-3">
Github Organizations (comma separated)
</Typography>
<Input
size="lg"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
crossOrigin={undefined}
label="Github Organizations (comma separated)"
value={organization.githubOrgs ?? ""}
onChange={({ target }) => {
updateData({ ...organization, githubOrgs: target.value });
}}
/>
</>
)}
<Typography variant="h6" color="blue-gray" className="-mb-3">
Github API Key
</Typography>

<Card>
<List>
{!organization.isSystem && (
<ListItem className="p-0">
<Card variant="outlined">
<CardHeader subheader="Github API Key" />
<CardContent>
<List>
{!organization.isSystem && (
<ListItem>
<Radio
name="github_token"
label="system default"
crossOrigin={undefined}
value={true.toString()}
checked={organization.useSystemGithubToken}
onChange={onUseSystemDefaultGithubToken}
/>
</ListItem>
)}
<ListItem>
<Radio
name="github_token"
label="system default"
label="custom: "
labelProps={{
className: "text-nowrap",
}}
crossOrigin={undefined}
value={true.toString()}
checked={organization.useSystemGithubToken}
value={false.toString()}
checked={!organization.useSystemGithubToken}
onChange={onUseSystemDefaultGithubToken}
/>
<Input
value={
organization.useSystemGithubToken
? ""
: organization.githubToken ?? ""
}
disabled={organization.useSystemGithubToken}
onChange={({ target }) => {
updateData({
...organization,
githubToken: target.value,
});
}}
/>
</ListItem>
)}
<ListItem className="p-0">
<Radio
name="github_token"
label="custom: "
labelProps={{
className: "text-nowrap",
}}
crossOrigin={undefined}
value={false.toString()}
checked={!organization.useSystemGithubToken}
onChange={onUseSystemDefaultGithubToken}
/>
<Input
size="lg"
className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
labelProps={{
className: "before:content-none after:content-none",
}}
crossOrigin={undefined}
value={
organization.useSystemGithubToken
? ""
: organization.githubToken ?? ""
}
disabled={organization.useSystemGithubToken}
onChange={({ target }) => {
updateData({
...organization,
githubToken: target.value,
});
}}
/>
</ListItem>
</List>
</List>
</CardContent>
</Card>

<Typography variant="h6" color="blue-gray" className="-mb-3">
AI Engines Settings
</Typography>
{!organization.isSystem && (
<Card>
<List>
<ListItem className="p-0">
<Radio
name="ai_engine"
label={
<div>
<Typography color="blue-gray" className="font-medium">
system default
</Typography>
{!organization.isSystem && (
<Card variant="outlined">
<CardHeader subheader="AI Engines Settings" />
<CardContent>
<List>
<ListItem>
<Radio
name="ai_engine"
label={
<div>
<Typography
variant="small"
color="gray"
className="font-normal italic"
color="blue-gray"
className="font-medium"
>
consumed{" "}
{(
organization.systemAiEngineUsedCompletionTokens +
organization.systemAiEngineUsedPromptTokens
).toLocaleString()}{" "}
of{" "}
{organization.systemAiEngineMaxTokens.toLocaleString()}{" "}
allowed tokens.
system default
</Typography>
)}
</div>
}
crossOrigin={undefined}
value={true.toString()}
checked={organization.useSystemAiEngine}
onChange={onUseSystemAiEngine}
/>
</ListItem>
<ListItem className="p-0">
<Radio
name="ai_engine"
label="custom"
crossOrigin={undefined}
value={false.toString()}
checked={!organization.useSystemAiEngine}
onChange={onUseSystemAiEngine}
/>
</ListItem>
</List>
{!organization.isSystem && (
<Typography
variant="body2"
color="gray"
className="font-normal italic"
>
consumed{" "}
{(
organization.systemAiEngineUsedCompletionTokens +
organization.systemAiEngineUsedPromptTokens
).toLocaleString()}{" "}
of{" "}
{organization.systemAiEngineMaxTokens.toLocaleString()}{" "}
allowed tokens.
</Typography>
)}
</div>
}
crossOrigin={undefined}
value={true.toString()}
checked={organization.useSystemAiEngine}
onChange={onUseSystemAiEngine}
/>
</ListItem>
<ListItem>
<Radio
name="ai_engine"
label="custom"
crossOrigin={undefined}
value={false.toString()}
checked={!organization.useSystemAiEngine}
onChange={onUseSystemAiEngine}
/>
</ListItem>
</List>
</CardContent>
</Card>
)}
{!organization.useSystemAiEngine && (
<>
{organization?.aiEngines?.map(({ id, title, settings }) => (
<div key={id}>
<Card>
<CardBody>
<Typography color="blue-gray" variant="h6">
{title}
</Typography>
<Textarea
size="lg"
className=" h-48 !border-t-blue-gray-200 focus:!border-t-gray-900"
resize={true}
rows={15}
labelProps={{
className: "before:content-none after:content-none",
}}
<Card variant="outlined">
<CardHeader subheader={title} />
<CardContent>
<TextareaAutosize
className=" w-full"
maxRows={15}
value={formatJson(settings)}
onChange={({ target }) => {
const aiEngines = [
Expand All @@ -257,7 +229,7 @@ export function OrganizationForm<T extends OrganizationFormData>({
});
}}
/>
</CardBody>
</CardContent>
</Card>
</div>
))}
Expand Down
6 changes: 3 additions & 3 deletions app/entry.client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
AuthenticationClientProvider,
SettingsClientProvider,
} from "./contexts";
import { MuiClientProvider } from "./mui/MuiClientProvider";
import { MuiProvider } from "./mui/MuiProvider";

startTransition(() => {
hydrateRoot(
Expand All @@ -23,9 +23,9 @@ startTransition(() => {
<AuthenticationClientProvider>
<ApolloClientProvider>
<ThemeProvider>
<MuiClientProvider>
<MuiProvider>
<RemixBrowser />
</MuiClientProvider>
</MuiProvider>
</ThemeProvider>
</ApolloClientProvider>
</AuthenticationClientProvider>
Expand Down
6 changes: 3 additions & 3 deletions app/entry.server.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
SettingsServerProvider,
} from "./contexts";
import { User } from "./models/user";
import { MuiServerProvider } from "./mui/MuiServerProvider";
import { MuiProvider } from "./mui/MuiProvider";

const ABORT_DELAY = 5_000;
// process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; //TODO: remove this line. It is dangerous. We have it because there is an issue with the SSL certificate chain of render.com in production
Expand Down Expand Up @@ -208,11 +208,11 @@ function getServerApp(
}
>
<AuthenticationServerProvider user={user}>
<MuiServerProvider>
<MuiProvider>
<ApolloServerProvider client={client}>
{remixServer}
</ApolloServerProvider>
</MuiServerProvider>
</MuiProvider>
</AuthenticationServerProvider>
</SettingsServerProvider>
);
Expand Down
Loading

0 comments on commit cdbd946

Please sign in to comment.