Skip to content

Commit

Permalink
feature(postman_scripts_translations): import options, shadcn button,…
Browse files Browse the repository at this point in the history
… input and dropdown menu added (zinc color)
  • Loading branch information
bpoulaindev committed Feb 21, 2024
1 parent 7b7e023 commit 5c365dd
Show file tree
Hide file tree
Showing 14 changed files with 513 additions and 107 deletions.
17 changes: 17 additions & 0 deletions packages/bruno-app/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": false,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/styles/globals.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "src/components",
"utils": "src/utils/styling/cn.js"
}
}
8 changes: 8 additions & 0 deletions packages/bruno-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,19 @@
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-slot": "^1.0.2",
"@reduxjs/toolkit": "^1.8.0",
"@tabler/icons": "^1.46.0",
"@tippyjs/react": "^4.2.6",
"@usebruno/common": "0.1.0",
"@usebruno/graphql-docs": "0.1.0",
"@usebruno/schema": "0.6.0",
"axios": "^1.5.1",
"class-variance-authority": "^0.7.0",
"classnames": "^2.3.1",
"clsx": "^2.1.0",
"codemirror": "5.65.2",
"codemirror-graphql": "1.2.5",
"cookie": "^0.6.0",
Expand All @@ -45,6 +50,7 @@
"jsonpath-plus": "^7.2.0",
"know-your-http-well": "^0.5.0",
"lodash": "^4.17.21",
"lucide-react": "^0.335.0",
"markdown-it": "^13.0.2",
"mousetrap": "^1.6.5",
"nanoid": "3.3.4",
Expand All @@ -70,6 +76,8 @@
"strip-json-comments": "^5.0.1",
"styled-components": "^5.3.3",
"system": "^2.0.1",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7",
"url": "^0.11.3",
"xml-formatter": "^3.5.0",
"yargs-parser": "^21.1.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import {
DropdownMenu, DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger
} from 'components/ui/dropdown-menu';
import React from 'react';
import { Button } from 'components/ui/button';

export const ImportCollectionOptions = ({options, setOptions, className}) => {
const toggleOptions = (event, optionKey) => {
event?.preventDefault();
setOptions({ ...options, [optionKey]: {
...options[optionKey],
enabled: !options[optionKey].enabled
} });
};
return (
<DropdownMenu>
<DropdownMenuTrigger>
<Button variant="secondary" className={className}>
Options
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Import options</DropdownMenuLabel>
<DropdownMenuSeparator />
{Object.entries(options || {}).map(([key, option]) => (
<DropdownMenuCheckboxItem
checked={option.enabled}
onSelect={(e) => toggleOptions(e,key)}
>
{option.label}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)
}
41 changes: 27 additions & 14 deletions packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
import React from 'react';
import React, { useState } from 'react';
import importBrunoCollection from 'utils/importers/bruno-collection';
import importPostmanCollection from 'utils/importers/postman-collection';
import importInsomniaCollection from 'utils/importers/insomnia-collection';
import importOpenapiCollection from 'utils/importers/openapi-collection';
import { toastError } from 'utils/common/error';
import Modal from 'components/Modal';
import { Button } from 'components/ui/button';
import { ImportCollectionOptions } from 'components/Sidebar/ImportCollection/ImportCollectionOptions';

const ImportCollection = ({ onClose, handleSubmit }) => {
const [options, setOptions] = useState({
enablePostmanTranslations: {
enabled: true,
label: 'Enable Postman translations',
}
})
const handleImportBrunoCollection = () => {
importBrunoCollection()
.then((collection) => {
Expand All @@ -16,7 +24,7 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
};

const handleImportPostmanCollection = () => {
importPostmanCollection()
importPostmanCollection(options)
.then((collection) => {
handleSubmit(collection);
})
Expand All @@ -38,21 +46,26 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
})
.catch((err) => toastError(err, 'OpenAPI v3 Import collection failed'));
};

return (
<Modal size="sm" title="Import Collection" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
<div>
<div className="text-link hover:underline cursor-pointer" onClick={handleImportBrunoCollection}>
Bruno Collection
</div>
<div className="text-link hover:underline cursor-pointer mt-2" onClick={handleImportPostmanCollection}>
Postman Collection
</div>
<div className="text-link hover:underline cursor-pointer mt-2" onClick={handleImportInsomniaCollection}>
Insomnia Collection
<div className="flex flex-col">
<h3 className="text-sm">Select the type of your existing collection :</h3>
<div className="mt-4 grid grid-rows-2 grid-flow-col gap-2">
<Button variant="outline" className="" onClick={handleImportBrunoCollection}>
Bruno Collection
</Button>
<Button variant="outline" onClick={handleImportPostmanCollection}>
Postman Collection
</Button>
<Button variant="outline" className="" onClick={handleImportInsomniaCollection}>
Insomnia Collection
</Button>
<Button variant="outline" className="" onClick={handleImportOpenapiCollection}>
OpenAPI V3 Spec
</Button>
</div>
<div className="text-link hover:underline cursor-pointer mt-2" onClick={handleImportOpenapiCollection}>
OpenAPI V3 Spec
<div className="flex justify-end w-full mt-4">
<ImportCollectionOptions options={options} setOptions={setOptions} />
</div>
</div>
</Modal>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { useFormik } from 'formik';
import * as Yup from 'yup';
import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions';
import Modal from 'components/Modal';
import { Input } from 'components/ui/input';
import { Button } from 'components/ui/button';

const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) => {
const inputRef = useRef();
Expand Down Expand Up @@ -45,7 +47,11 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
const onSubmit = () => formik.handleSubmit();

return (
<Modal size="sm" title="Import Collection" confirmText="Import" handleConfirm={onSubmit} handleCancel={onClose}>
<Modal
size="sm"
title="Import Collection"
confirmText="Import"
handleConfirm={onSubmit} handleCancel={onClose}>
<form className="bruno-form" onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="collectionName" className="block font-semibold">
Expand All @@ -57,30 +63,26 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, collectionName }) =>
<label htmlFor="collectionLocation" className="block font-semibold mt-3">
Location
</label>
<input
<div className="flex w-full max-w-sm items-center space-x-2 mt-1">
<Input
id="collection-location"
type="text"
name="collectionLocation"
readOnly={true}
className="block textbox mt-2 w-full"
placeholder="Select a location"
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
value={formik.values.collectionLocation || ''}
onClick={browse}
/>
<Button onClick={browse}>Browse</Button>
</div>
</>
{formik.touched.collectionLocation && formik.errors.collectionLocation ? (
<div className="text-red-500">{formik.errors.collectionLocation}</div>
) : null}

<div className="mt-1">
<span className="text-link cursor-pointer hover:underline" onClick={browse}>
Browse
</span>
</div>
<span>wesh alors</span>
</div>
</form>
</Modal>
Expand Down
47 changes: 47 additions & 0 deletions packages/bruno-app/src/components/ui/button.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";

import { cn } from "src/utils/styling/cn.js"

const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)

const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
(<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props} />)
);
})
Button.displayName = "Button"

export { Button, buttonVariants }
Loading

0 comments on commit 5c365dd

Please sign in to comment.