Merge branch 'main' into bugfix/filename-validation

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,13 @@
+# Description
+
+<!-- Explain here the changes your PR introduces and text to help us understand the context of this change. -->
+
+### Contribution Checklist:
+
+- [ ] **The pull request only addresses one issue or adds one feature.**
+- [ ] **The pull request does not introduce any breaking changes**
+- [ ] **I have added screenshots or gifs to help explain the change if applicable.**
+- [ ] **I have read the [contribution guidelines](https://github.com/usebruno/bruno/blob/main/contributing.md).**
+- [ ] **Create an issue and link to the pull request.**
+
+Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

.github/workflows/unit-tests.yml

@@ -5,18 +5,16 @@ on:
   pull_request:
     branches: [main]
 jobs:
-  test:
+  tests:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
-      - name: Check package-lock.json
-        run: npm ci
+          node-version-file: '.nvmrc'
       - name: Install dependencies
-        run: npm i --legacy-peer-deps
+        run: npm ci --legacy-peer-deps
       - name: Test Package bruno-query
         run: npm run test --workspace=packages/bruno-query
       - name: Build Package bruno-query
@@ -33,3 +31,15 @@ jobs:
         run: npm run test --workspace=packages/bruno-cli
       - name: Test Package bruno-electron
         run: npm run test --workspace=packages/bruno-electron
+
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+      - name: Run Prettier
+        run: npm run test:prettier:web

contributing.md

@@ -1,4 +1,4 @@
-**English** | [Русский](/contributing_ru.md)
+**English** | [Українська](/contributing_ua.md) | [Русский](/contributing_ru.md)
 
 ## Lets make bruno better, together !!
 

contributing_ru.md

@@ -1,4 +1,4 @@
-[English](/contributing.md) | **Русский**
+[English](/contributing.md) | [Українська](/contributing_ua.md) | **Русский**
 
 ## Давайте вместе сделаем Бруно лучше!!!
 

contributing_ua.md

@@ -0,0 +1,37 @@
+[English](/contributing.md) | **Українська** | [Русский](/contributing_ru.md)
+
+## Давайте зробимо Bruno краще, разом !!
+
+Я дуже радий що Ви бажаєте покращити Bruno. Нижче наведені вказівки як розпочати розробку Bruno на Вашому комп'ютері.
+
+### Стек технологій
+
+Bruno побудований на NextJs та React. Також для десктопної версії (яка підтримує локальні колекції) використовується Electron
+
+Бібліотеки, які ми використовуємо
+
+- CSS - Tailwind
+- Редактори коду - Codemirror
+- Керування станом - Redux
+- Іконки - Tabler Icons
+- Форми - formik
+- Валідація по схемі - Yup
+- Клієнт запитів - axios
+- Спостерігач за файловою системою - chokidar
+
+### Залежності
+
+Вам знадобиться [Node v18.x або остання LTS версія](https://nodejs.org/en/) та npm 8.x. Ми використовуєм npm workspaces в цьому проекті
+
+### Починаєм писати код
+
+Будь ласка, зверніться до [development_ua.md](docs/development_ua.md) за інструкціями щодо запуску локального середовища розробки.
+
+### Створення Pull Request-ів
+
+- Будь ласка, робіть PR-и маленькими і сфокусованими на одній речі
+- Будь ласка, слідуйте формату назв гілок
+  - feature/[назва feature]: Така гілка має містити зміни лише щодо конкретної feature
+    - Приклад: feature/dark-mode
+  - bugfix/[назва баґу]: Така гілка має містити лише виправлення конкретного багу
+    - Приклад: bugfix/bug-1

docs/development.md

@@ -1,4 +1,4 @@
-**English** | [Русский](/docs/development_ru.md)
+**English** | [Українська](/docs/development_ua.md) | [Русский](/docs/development_ru.md)
 
 ## Development
 

docs/development_ru.md

@@ -1,4 +1,4 @@
-[English](/docs/development.md) | **Русский**
+[English](/docs/development.md) | [Українська](/docs/development_ua.md) | **Русский**
 
 ## Разработка
 

docs/development_ua.md

@@ -0,0 +1,55 @@
+[English](/docs/development.md) | **Українська** | [Русский](/docs/development_ru.md)
+
+## Розробка
+
+Bruno розробляється як декстопний застосунок. Вам потрібно запустити nextjs в одній сесії терміналу, та запустити застосунок Electron в іншій сесії терміналу.
+
+### Залежності
+
+- NodeJS v18
+
+### Локальна розробка
+
+```bash
+# Використовуйте nodejs 18-ї версії
+nvm use
+
+# встановіть залежності
+npm i --legacy-peer-deps
+
+# зберіть документацію graphql
+npm run build:graphql-docs
+
+# зберіть bruno query
+npm run build:bruno-query
+
+# запустіть додаток next (термінал 1)
+npm run dev:web
+
+# запустіть додаток електрон (термінал 2)
+npm run dev:electron
+```
+
+### Усунення несправностей
+
+Ви можете зтикнутись із помилкою `Unsupported platform` коли запускаєте `npm install`. Щоб усунути цю проблему, вам потрібно видалити `node_modules` та `package-lock.json`, і тоді запустити `npm install`. Це має встановити всі потрібні для запуску додатку пекеджі.
+
+```shell
+# Видаліть node_modules в піддиректоріях
+find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
+  rm -rf "$dir"
+done
+
+# Видаліть package-lock в піддиректоріях
+find . -type f -name "package-lock.json" -delete
+```
+
+### Тестування
+
+```bash
+# bruno-schema
+npm test --workspace=packages/bruno-schema
+
+# bruno-lang
+npm test --workspace=packages/bruno-lang
+```

package.json

@@ -41,6 +41,7 @@
     "build:electron:snap": "./scripts/build-electron.sh snap",
     "test:e2e": "npx playwright test",
     "test:report": "npx playwright show-report",
+    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
     "prepare": "husky install"
   },
   "overrides": {

packages/bruno-app/package.json

@@ -8,6 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
+    "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
   },
   "dependencies": {

packages/bruno-app/src/components/CodeEditor/StyledWrapper.js

@@ -4,6 +4,7 @@ const StyledWrapper = styled.div`
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
+    font-family: ${(props) => (props.font ? props.font : 'default')};
   }
 
   .CodeMirror-overlayscroll-horizontal div,

packages/bruno-app/src/components/CodeEditor/index.js

@@ -121,6 +121,7 @@ export default class CodeEditor extends React.Component {
       <StyledWrapper
         className="h-full w-full"
         aria-label="Code Editor"
+        font={this.props.font}
         ref={(node) => {
           this._node = node;
         }}

packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js

@@ -12,7 +12,6 @@ const AwsV4Auth = ({ collection }) => {
   const { storedTheme } = useTheme();
 
   const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
-  console.log('saved auth', awsv4Auth);
 
   const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
 

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .settings-label {
+    width: 90px;
+  }
+
+  .certificate-icon {
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
+
+  input {
+    width: 300px;
+  }
+
+  .available-certificates {
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
+
+    button.remove-certificate {
+      color: ${(props) => props.theme.colors.text.danger};
+    }
+  }
+
+  .textbox {
+    border: 1px solid #ccc;
+    padding: 0.15rem 0.45rem;
+    box-shadow: none;
+    border-radius: 0px;
+    outline: none;
+    box-shadow: none;
+    transition: border-color ease-in-out 0.1s;
+    border-radius: 3px;
+    background-color: ${(props) => props.theme.modal.input.bg};
+    border: 1px solid ${(props) => props.theme.modal.input.border};
+
+    &:focus {
+      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
+      outline: none !important;
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
+import { useFormik } from 'formik';
+import { uuid } from 'utils/common';
+import * as Yup from 'yup';
+
+import StyledWrapper from './StyledWrapper';
+
+const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
+  const formik = useFormik({
+    initialValues: {
+      domain: '',
+      certFilePath: '',
+      keyFilePath: '',
+      passphrase: ''
+    },
+    validationSchema: Yup.object({
+      domain: Yup.string().required(),
+      certFilePath: Yup.string().required(),
+      keyFilePath: Yup.string().required(),
+      passphrase: Yup.string()
+    }),
+    onSubmit: (values) => {
+      onUpdate(values);
+    }
+  });
+
+  const getFile = (e) => {
+    formik.values[e.name] = e.files[0].path;
+  };
+
+  return (
+    <StyledWrapper>
+      <div className="flex items-center font-semibold mt-4 mb-2">
+        <IconCertificate className="mr-1 certificate-icon" size={24} strokeWidth={1.5} /> Client Certificates
+      </div>
+      <ul className="mt-4">
+        {!clientCertConfig.length
+          ? 'None'
+          : clientCertConfig.map((clientCert) => (
+              <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
+                <div className="flex items-center w-full justify-between">
+                  <div className="flex items-center">
+                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
+                    {clientCert.domain}
+                  </div>
+                  <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
+                    <IconTrash size={18} strokeWidth={1.5} />
+                  </button>
+                </div>
+              </li>
+            ))}
+      </ul>
+
+      <h1 className="font-semibold mt-8 mb-2">Add Client Certicate</h1>
+      <form className="bruno-form" onSubmit={formik.handleSubmit}>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="domain">
+            Domain
+          </label>
+          <input
+            id="domain"
+            type="text"
+            name="domain"
+            placeholder="*.example.org"
+            className="block textbox"
+            onChange={formik.handleChange}
+            value={formik.values.domain || ''}
+          />
+          {formik.touched.domain && formik.errors.domain ? (
+            <div className="ml-1 text-red-500">{formik.errors.domain}</div>
+          ) : null}
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="certFilePath">
+            Cert file
+          </label>
+          <input
+            id="certFilePath"
+            type="file"
+            name="certFilePath"
+            className="block"
+            onChange={(e) => getFile(e.target)}
+          />
+          {formik.touched.certFilePath && formik.errors.certFilePath ? (
+            <div className="ml-1 text-red-500">{formik.errors.certFilePath}</div>
+          ) : null}
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="keyFilePath">
+            Key file
+          </label>
+          <input
+            id="keyFilePath"
+            type="file"
+            name="keyFilePath"
+            className="block"
+            onChange={(e) => getFile(e.target)}
+          />
+          {formik.touched.keyFilePath && formik.errors.keyFilePath ? (
+            <div className="ml-1 text-red-500">{formik.errors.keyFilePath}</div>
+          ) : null}
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="passphrase">
+            Passphrase
+          </label>
+          <input
+            id="passphrase"
+            type="text"
+            name="passphrase"
+            className="block textbox"
+            onChange={formik.handleChange}
+            value={formik.values.passphrase || ''}
+          />
+          {formik.touched.passphrase && formik.errors.passphrase ? (
+            <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
+          ) : null}
+        </div>
+        <div className="mt-6">
+          <button type="submit" className="submit btn btn-sm btn-secondary">
+            Add
+          </button>
+        </div>
+      </form>
+    </StyledWrapper>
+  );
+};
+
+export default ClientCertSettings;