[PR #12588] [CLOSED] feat: connections admin settings UI enhancements #22981

Closed
opened 2026-04-20 04:32:55 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/12588
Author: @Coffee-Boyy
Created: 4/8/2025
Status: Closed

Base: devHead: ui-setting-updates


📝 Commits (1)

  • 0252711 feat: connections admin settings UI enhancements

📊 Changes

11 files changed (+65 additions, -97 deletions)

View changed files

📝 src/app.css (+4 -0)
📝 src/lib/components/AddConnectionModal.svelte (+19 -40)
📝 src/lib/components/admin/Settings/Connections.svelte (+8 -10)
📝 src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte (+2 -10)
📝 src/lib/components/admin/Settings/Connections/OllamaConnection.svelte (+8 -10)
📝 src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte (+6 -6)
📝 src/lib/components/admin/Settings/Models/Manage/ManageMultipleOllama.svelte (+1 -1)
📝 src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte (+7 -10)
📝 src/lib/components/chat/Settings/Tools/Connection.svelte (+5 -4)
📝 src/lib/components/common/SensitiveInput.svelte (+4 -5)
📝 src/lib/components/common/Textarea.svelte (+1 -1)

📄 Description

Pull Request Checklist

Note to first-time contributors: Please open a discussion post in Discussions and describe your changes before submitting a pull request.

Before submitting, make sure you've checked the following:

  • Target branch: Please verify that the pull request targets the dev branch.
  • Description: Provide a concise description of the changes made in this pull request.
  • Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
  • Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
  • Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
  • Testing: Have you written and run sufficient tests to validate the changes?
  • Code review: Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards?
  • Prefix: To clearly categorize this pull request, prefix the pull request title using one of the following:
    • BREAKING CHANGE: Significant changes that may affect compatibility
    • build: Changes that affect the build system or external dependencies
    • ci: Changes to our continuous integration processes or workflows
    • chore: Refactor, cleanup, or other non-functional code changes
    • docs: Documentation update or addition
    • feat: Introduces a new feature or enhancement to the codebase
    • fix: Bug fix or error correction
    • i18n: Internationalization or localization changes
    • perf: Performance improvement
    • refactor: Code restructuring for better maintainability, readability, or scalability
    • style: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.)
    • test: Adding missing tests or correcting existing tests
    • WIP: Work in progress, a temporary label for incomplete or ongoing work

Changelog Entry

Description

This change updates the connections settings page to use a text box that has a different background color (if on dark mode) or a border (if on light mode) to differentiate it from non-input fields. I often struggled to find user-editable fields in the settings pages since everything was the same color. I also noticed this text box that I am switching the page to was being used in some pages so I decided to make a common CSS class for it and update the connections page as a first pass before applying to the remaining pages.

If you approve of these styling changes, I have already made the changes to the remaining settings pages and modals so I can submit that PR afterwards but wanted to get signoff before doing so since there are several files that were edited.

Added

  • New input-setting CSS class that makes the input box standout instead of having the same background color as the page itself.

Changed

  • Updated connections settings screen to use text boxes with a different background color.
  • Change "Manage Ollama" button icon to the gear cog and change the "Edit Connection" button to the pencil.
  • Use common XMark and Reset icons instead of custom SVG code for X buttons and Test Connection buttons.

Deprecated

None

Removed

None

Fixed

None

Security

None

Breaking Changes

None


Additional Information

None

Screenshots or Videos

Connections tab:

Screenshot from 2025-04-07 17-55-12

Edit/Add connection modal:

Screenshot from 2025-04-07 17-59-02

Manage Ollama modal with GGUF file upload:

Screenshot from 2025-04-07 18-02-18

Manage Ollama modal with HF url input:

Screenshot from 2025-04-07 18-02-30

Light mode screenshots:

Screenshot from 2025-04-07 18-13-08

Screenshot from 2025-04-07 18-13-32


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/12588 **Author:** [@Coffee-Boyy](https://github.com/Coffee-Boyy) **Created:** 4/8/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `ui-setting-updates` --- ### 📝 Commits (1) - [`0252711`](https://github.com/open-webui/open-webui/commit/0252711a2d232714389be9b7b8efd61526af9a99) feat: connections admin settings UI enhancements ### 📊 Changes **11 files changed** (+65 additions, -97 deletions) <details> <summary>View changed files</summary> 📝 `src/app.css` (+4 -0) 📝 `src/lib/components/AddConnectionModal.svelte` (+19 -40) 📝 `src/lib/components/admin/Settings/Connections.svelte` (+8 -10) 📝 `src/lib/components/admin/Settings/Connections/ManageOllamaModal.svelte` (+2 -10) 📝 `src/lib/components/admin/Settings/Connections/OllamaConnection.svelte` (+8 -10) 📝 `src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte` (+6 -6) 📝 `src/lib/components/admin/Settings/Models/Manage/ManageMultipleOllama.svelte` (+1 -1) 📝 `src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte` (+7 -10) 📝 `src/lib/components/chat/Settings/Tools/Connection.svelte` (+5 -4) 📝 `src/lib/components/common/SensitiveInput.svelte` (+4 -5) 📝 `src/lib/components/common/Textarea.svelte` (+1 -1) </details> ### 📄 Description # Pull Request Checklist ### Note to first-time contributors: Please open a discussion post in [Discussions](https://github.com/open-webui/open-webui/discussions) and describe your changes before submitting a pull request. **Before submitting, make sure you've checked the following:** - [x] **Target branch:** Please verify that the pull request targets the `dev` branch. - [X] **Description:** Provide a concise description of the changes made in this pull request. - [X] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description. - [ ] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources? - [ ] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation? - [ ] **Testing:** Have you written and run sufficient tests to validate the changes? - [x] **Code review:** Have you performed a self-review of your code, addressing any coding standard issues and ensuring adherence to the project's coding standards? - [x] **Prefix:** To clearly categorize this pull request, prefix the pull request title using one of the following: - **BREAKING CHANGE**: Significant changes that may affect compatibility - **build**: Changes that affect the build system or external dependencies - **ci**: Changes to our continuous integration processes or workflows - **chore**: Refactor, cleanup, or other non-functional code changes - **docs**: Documentation update or addition - **feat**: Introduces a new feature or enhancement to the codebase - **fix**: Bug fix or error correction - **i18n**: Internationalization or localization changes - **perf**: Performance improvement - **refactor**: Code restructuring for better maintainability, readability, or scalability - **style**: Changes that do not affect the meaning of the code (white space, formatting, missing semi-colons, etc.) - **test**: Adding missing tests or correcting existing tests - **WIP**: Work in progress, a temporary label for incomplete or ongoing work # Changelog Entry ### Description This change updates the connections settings page to use a text box that has a different background color (if on dark mode) or a border (if on light mode) to differentiate it from non-input fields. I often struggled to find user-editable fields in the settings pages since everything was the same color. I also noticed this text box that I am switching the page to was being used in some pages so I decided to make a common CSS class for it and update the connections page as a first pass before applying to the remaining pages. If you approve of these styling changes, I have already made the changes to the remaining settings pages and modals so I can submit that PR afterwards but wanted to get signoff before doing so since there are several files that were edited. ### Added - New `input-setting` CSS class that makes the input box standout instead of having the same background color as the page itself. ### Changed - Updated connections settings screen to use text boxes with a different background color. - Change "Manage Ollama" button icon to the gear cog and change the "Edit Connection" button to the pencil. - Use common `XMark` and `Reset` icons instead of custom SVG code for X buttons and Test Connection buttons. ### Deprecated None ### Removed None ### Fixed None ### Security None ### Breaking Changes None --- ### Additional Information None ### Screenshots or Videos Connections tab: ![Screenshot from 2025-04-07 17-55-12](https://github.com/user-attachments/assets/1becfcc5-ef01-4fb3-9aac-3077eef1edb2) Edit/Add connection modal: ![Screenshot from 2025-04-07 17-59-02](https://github.com/user-attachments/assets/9cf63766-2764-4c13-ba96-a822f963a199) Manage Ollama modal with GGUF file upload: ![Screenshot from 2025-04-07 18-02-18](https://github.com/user-attachments/assets/11005cf6-d181-42bd-b662-4c9daa0f56ad) Manage Ollama modal with HF url input: ![Screenshot from 2025-04-07 18-02-30](https://github.com/user-attachments/assets/f5908e6a-9c63-4498-9e3d-766df3609412) Light mode screenshots: ![Screenshot from 2025-04-07 18-13-08](https://github.com/user-attachments/assets/cc13e3cd-79f9-48d3-866d-e19d4abaff8f) ![Screenshot from 2025-04-07 18-13-32](https://github.com/user-attachments/assets/974cc853-c458-4b3d-be6f-4bd0a327be77) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-20 04:32:55 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#22981