Skip to content

Commit

Permalink
feat: add update button and finalize the feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@lorenzo-cavazzi
lorenzo-cavazzi committed Sep 27, 2024
1 parent f0af031 commit 13bfef7
Show file tree
Hide file tree
Showing 7 changed files with 434 additions and 214 deletions.
230 changes: 25 additions & 205 deletions client/src/features/admin/AddConnectedServiceButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
import cx from "classnames";
import { useCallback, useEffect, useState } from "react";
import { PlusLg, XLg } from "react-bootstrap-icons";
import { Control, Controller, FieldErrors, useForm } from "react-hook-form";
import { Controller, useForm } from "react-hook-form";
import {
Button,
Form,
Expand All @@ -32,11 +32,12 @@ import {
} from "reactstrap";
import {
ConnectedServiceForm,
Provider,
CreateProviderParams,
} from "../connectedServices/connectedServices.types";
import { useCreateProviderMutation } from "../connectedServices/connectedServices.api";
import { RtkOrNotebooksError } from "../../components/errors/RtkErrorAlert";
import { Loader } from "../../components/Loader";
import ConnectedServiceFormContent from "./ConnectedServiceFormContent";

export default function AddConnectedServiceButton() {
const [isOpen, setIsOpen] = useState(false);
Expand Down Expand Up @@ -73,7 +74,7 @@ function AddConnectedServiceModal({
} = useForm<ConnectedServiceForm>({
defaultValues: {
id: "",
kind: "",
kind: "gitlab",
client_id: "",
client_secret: "",
display_name: "",
Expand All @@ -83,7 +84,7 @@ function AddConnectedServiceModal({
},
});
const onSubmit = useCallback(
(data: Provider) => {
(data: CreateProviderParams) => {
createProvider({
id: data.id,
kind: data.kind,
Expand Down Expand Up @@ -130,6 +131,26 @@ function AddConnectedServiceModal({
<ModalBody>
{result.error && <RtkOrNotebooksError error={result.error} />}

<div className="mb-3">
<Label className="form-label" for="addConnectedServiceId">
Id
</Label>
<Controller
control={control}
name="id"
render={({ field }) => (
<Input
className={cx("form-control", errors.id && "is-invalid")}
id="addConnectedServiceId"
placeholder="Provider id"
type="text"
{...field}
/>
)}
rules={{ required: true }}
/>
</div>

<ConnectedServiceFormContent control={control} errors={errors} />
</ModalBody>
<ModalFooter>
Expand All @@ -150,204 +171,3 @@ function AddConnectedServiceModal({
</Modal>
);
}

interface ConnectedServiceFormContentProps {
control: Control<ConnectedServiceForm, unknown>;
errors: FieldErrors<ConnectedServiceForm>;
}
function ConnectedServiceFormContent({
control,
errors,
}: ConnectedServiceFormContentProps) {
return (
<>
<div className="mb-3">
<Label className="form-label" for="addConnectedServiceId">
Id
</Label>
<Controller
control={control}
name="id"
render={({ field }) => (
<Input
className={cx("form-control", errors.id && "is-invalid")}
id="addConnectedServiceId"
placeholder="Provider id"
type="text"
{...field}
/>
)}
rules={{ required: true }}
/>
</div>

<div className="mb-3">
<Label className="form-label" for="addConnectedServiceKind">
Kind
</Label>
<Controller
control={control}
name="kind"
render={({ field }) => (
<>
<Input
className={cx("form-control", errors.kind && "is-invalid")}
id="addConnectedServiceKind"
list="addConnectedServiceKindList"
placeholder="Provider (gitlab or github)"
type="text"
{...field}
/>
<datalist id="addConnectedServiceKindList">
<option value="gitlab" />
<option value="github" />
</datalist>
</>
)}
rules={{ required: true }}
/>
<div className="invalid-feedback">Please provide a kind</div>
</div>

<div className="mb-3">
<Label className="form-label" for="addConnectedServiceDisplayName">
Display Name
</Label>
<Controller
control={control}
name="display_name"
render={({ field }) => (
<Input
className={cx(
"form-control",
errors.display_name && "is-invalid"
)}
id="addConnectedServiceDisplayName"
placeholder="Display name"
type="text"
{...field}
/>
)}
rules={{ required: true }}
/>
<div className="invalid-feedback">Please provide a display name</div>
</div>

<div className="mb-3">
<Label className="form-label" for="addConnectedServiceUrl">
URL
</Label>
<Controller
control={control}
name="url"
render={({ field }) => (
<Input
className={cx("form-control", errors.url && "is-invalid")}
id="addConnectedServiceUrl"
placeholder="URL"
type="text"
{...field}
/>
)}
rules={{ required: true }}
/>
<div className="invalid-feedback">Please provide a URL</div>
</div>

<div className="mb-3">
<Controller
control={control}
name="use_pkce"
render={({ field }) => (
<Input
className={cx(
"form-check-input",
errors.use_pkce && "is-invalid"
)}
id="addConnectedServiceUsePkce"
type="checkbox"
checked={field.value}
innerRef={field.ref}
onBlur={field.onBlur}
onChange={field.onChange}
/>
)}
/>
<Label
className={cx("form-check-label", "ms-2")}
for="addConnectedServiceUsePkce"
>
Use PKCE
</Label>
</div>

<div className="mb-3">
<Label className="form-label" for="addConnectedServiceClientId">
Client ID
</Label>
<Controller
control={control}
name="id"
render={({ field }) => (
<Input
className={cx("form-control", errors.id && "is-invalid")}
id="addConnectedServiceClientId"
placeholder="Client ID"
type="text"
{...field}
/>
)}
rules={{ required: true }}
/>
<div className="invalid-feedback">Please provide an id</div>
</div>

<div className="mb-3">
<Label className="form-label" for="addConnectedServiceClientSecret">
Client Secret (optional)
</Label>
<Controller
control={control}
name="client_secret"
render={({ field }) => (
<Input
className={cx(
"form-control",
errors.client_secret && "is-invalid"
)}
id="addConnectedServiceClientSecret"
placeholder="Client Secret"
type="text"
{...field}
/>
)}
/>
<div className="invalid-feedback">
Please provide a valid client secret or leave it empty
</div>
</div>

<div className="mb-3">
<Label className="form-label" for="addConnectedServiceScope">
Scope (optional)
</Label>
<Controller
control={control}
name="scope"
render={({ field }) => (
<Input
className={cx("form-control", errors.scope && "is-invalid")}
id="addConnectedServiceScope"
placeholder="Scope"
type="text"
{...field}
/>
)}
/>
<div className="invalid-feedback">
Please provide a valid scope or leave it empty
</div>
</div>
</>
);
}
2 changes: 1 addition & 1 deletion client/src/features/admin/AdminPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ export default function AdminPage() {
<h1 className={cx("fs-2", "mb-3")}>Admin Panel</h1>
<IncidentsAndMaintenanceSection />
<ComputeResourcesSection />
<SessionEnvironmentsSection />
<ConnectedServicesSection />
<SessionEnvironmentsSection />
</>
);
}
Expand Down
Loading

0 comments on commit 13bfef7

Please sign in to comment.