-
-
-
-
-
-
-
-
-
-
- {/*
- * /}
-
-
-
-
-
-
-
-
-
-
- {/*
- * /}
-
-
-
-
-
-
-
-
-
-
+
+ }
+ onClose={onClose}
+ open={open}
+ >
+
+
+
+ );
+}
+
+export default MobileSidebar;
diff --git a/studio/src/components/GlobalNav/Sidebar.js b/studio/src/components/GlobalNav/Sidebar.js
index ce9079e46..24a09c33c 100644
--- a/studio/src/components/GlobalNav/Sidebar.js
+++ b/studio/src/components/GlobalNav/Sidebar.js
@@ -5,11 +5,18 @@ import { Layout, Menu, Popover, List, Avatar, Button } from 'antd';
import routes, { sidebarMenu } from '../../config/routesConfig';
import _ from 'lodash';
import { setCollapse } from './../../actions/sidebar';
-import SpaceSelector from './SpaceSelector';
+import { setSpaceSelectorPage } from './../../actions/spaceSelectorPage';
import AccountMenu from './AccountMenu';
-import { AppstoreOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import {
+ AppstoreOutlined,
+ DownOutlined,
+ MenuFoldOutlined,
+ SettingOutlined,
+ MenuUnfoldOutlined,
+} from '@ant-design/icons';
import Search from '../Search';
import { maker } from '../../utils/sluger';
+import degaImg from '../../assets/dega.png';
const { Sider } = Layout;
const { SubMenu } = Menu;
@@ -17,11 +24,28 @@ const { SubMenu } = Menu;
function Sidebar({ superOrg, permission, orgs, loading, applications, services, menuKey }) {
const { collapsed } = useSelector((state) => state.sidebar);
const dispatch = useDispatch();
+ const { details, selected } = useSelector((state) => state.spaces);
const { navTheme } = useSelector((state) => state.settings);
const [showCoreMenu, setCoreMenu] = useState(false);
const onCollapse = (collapsed) => {
collapsed ? dispatch(setCollapse(true)) : dispatch(setCollapse(false));
};
+
+ const [isMobileScreen, setIsMobileScreen] = React.useState(false);
+
+ React.useEffect(() => {
+ const handleResize = () => {
+ if (window.innerWidth <= 460) {
+ setIsMobileScreen(true);
+ } else {
+ setIsMobileScreen(false);
+ }
+ };
+ window.addEventListener('resize', handleResize);
+ handleResize();
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
if (loading) {
return null;
}
@@ -61,7 +85,10 @@ function Sidebar({ superOrg, permission, orgs, loading, applications, services,
'permissions',
];
let buttonStyle = {
- borderRadius: '50px',
+ width: '40px',
+ height: '40px',
+ background: '#DCE4E7',
+ borderRadius: '21px',
padding: '0.25rem 0.5rem',
};
permission.forEach((each) => {
@@ -93,7 +120,11 @@ function Sidebar({ superOrg, permission, orgs, loading, applications, services,
});
const getSubMenuItems = (menu, index, Icon) => (
-
+
+ (
+
+
+ {item.medium && item.medium.url ? (
+ 
+ ) : (
+
+ {item.name.charAt(0)}
+
+ )}
+ {item.name}
+
+
+ )}
+ />
+ }
+ trigger="click"
+ >
+
+
+
+ ) : null}
+
+
+
-
-
- {!collapsed ? (
-
-
-
- 
{
+ // Initialize an empty array to store the search results
+ let results = [];
+
+ // Loop through each organization in the `orgs` array
+ for (const org of orgs) {
+ // Initialize an empty array to store the spaces that match the search query
+ const matchingSpaces = [];
+
+ // Loop through each space associated with the current organization
+ for (const space of org.spaces) {
+ // Check if the name of the current space contains the search query
+ if (details[space].name.toLowerCase().includes(query.toLowerCase())) {
+ // If it does, add the space to the `matchingSpaces` array
+ matchingSpaces.push(space);
+ }
+ }
+
+ // Check if the name of the current organization contains the search query
+ const orgTitleMatches = org.title.toLowerCase().includes(query.toLowerCase());
+
+ // Check if any spaces matched the search query and the current organization title matches
+ if (matchingSpaces.length > 0 && orgTitleMatches) {
+ // If so, add the current organization to the `results` array
+ results.push({ ...org, spaces: matchingSpaces });
+ } else if (matchingSpaces.length > 0) {
+ // If only the spaces matched, create a new object with the matching spaces
+ results.push({ ...org, spaces: matchingSpaces });
+ } else if (orgTitleMatches) {
+ // If only the organization title matched, add the current organization to the `results` array
+ results.push(org);
+ }
+ }
+
+ // Set the search results to the `results` array
+ setSearchResults(results);
+ };
+
+ const OrgSpaceList = ({ org }) => {
+ return (
+
- {applications.length > 0 ? (
- <>
- (
-
-
- {item.medium && item.medium.url ? (
-
- ) : (
-
- {item.name.charAt(0)}
-
- )}
- {item.name}
-
-
- )}
- />
- }
- trigger="click"
- >
-
-
-
- ) : null}
-
+
- ) : (
-
+ {collapsed ? (
+
+ ) : (
+
+ )}
+
-
-
- )}
-
+ {sidebarMenu.map((menu, index) => {
+ const { Icon } = menu;
+ return menu.title === 'CORE' && !showCoreMenu
+ ? null
+ : !menu.isService
+ ? !menu.isAdmin
+ ? getSubMenuItems(menu, index, Icon)
+ : permission.filter((each) => each.resource === 'admin').length > 0
+ ? getSubMenuItems(menu, index, Icon)
+ : null
+ : services?.includes(maker(menu.title))
+ ? getSubMenuItems(menu, index, Icon)
+ : null;
+ })}
+
+ {!collapsed ? (
+
+
+ ) : (
+
+
+ {applications.length > 0 ? (
+ <>
+ (
+
+
+ {item.medium && item.medium.url ? (
+
+ ) : (
+
+ {item.name.charAt(0)}
+
+ )}
+ {item.name}
+
+
+ )}
+ />
+ }
+ trigger="click"
+ >
+
+
+
+ ) : null}
+
+
+
+
+
+ )}
+
+
);
}
export default Sidebar;
diff --git a/studio/src/components/GlobalNav/SpaceSelector.css b/studio/src/components/GlobalNav/SpaceSelector.css
new file mode 100644
index 000000000..c7a8fe107
--- /dev/null
+++ b/studio/src/components/GlobalNav/SpaceSelector.css
@@ -0,0 +1,101 @@
+.list-item-action {
+ transition: opacity 0.2s ease-in-out;
+}
+
+.list-item-action:hover {
+ background: #f5f5f5 !important;
+ border: 0 !important;
+}
+
+.list-item {
+ transition: background 0.2s ease-in-out;
+ padding: 10px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ background-color: #fff;
+ padding: 14px 18px !important;
+ margin-bottom: 0.5rem;
+ border-radius: 8px;
+}
+
+.list-item:hover {
+ border-bottom: 3px solid #1890ff !important;
+ border-radius: 8px !important;
+}
+
+.list-item:hover .list-item-action {
+ opacity: 1;
+}
+
+.list-item-action {
+ background-color: transparent;
+ color: #858585;
+ opacity: 0;
+ border-radius: 4px;
+ border: 2px solid #e0e0e0;
+}
+
+.list-item-meta {
+ display: flex;
+ align-items: center !important;
+}
+
+.list-item-avatar {
+ margin-right: 16px;
+}
+
+.list-item-name {
+ color: #101828;
+ font-size: 14px;
+ font-weight: 500;
+ margin: 0;
+}
+
+.highlighted-text {
+ background-color: #1890ff;
+ color: #fff;
+}
+
+.delete-modal-container .ant-modal-content {
+ width: 311px;
+}
+
+.org-space-list .ant-list-header {
+ padding: 0 0 8px;
+}
+
+.space-list-header {
+ padding: 0 0 8px;
+ color: #6c6c6c;
+ font-size: 12px;
+ line-height: 20px;
+ text-transform: uppercase;
+}
+
+.org-space-list .ant-empty {
+ margin: 0;
+}
+
+.org-space-list-container {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ margin-bottom: 1rem;
+}
+
+.org-space-list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ padding: 14px 27px 21px 27px;
+ border-radius: 8px;
+ background-color: #f1f4f8;
+}
+
+.org-space-list > div {
+ width: 100%;
+}
diff --git a/studio/src/components/GlobalNav/SpaceSelector.js b/studio/src/components/GlobalNav/SpaceSelector.js
index 58c179e1b..b88e7a33e 100644
--- a/studio/src/components/GlobalNav/SpaceSelector.js
+++ b/studio/src/components/GlobalNav/SpaceSelector.js
@@ -1,63 +1,289 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
import { useSelector, useDispatch } from 'react-redux';
-import { Select, Avatar } from 'antd';
+import { Avatar, Button, Row, Col, Modal, Layout, Input, List, Typography, Empty } from 'antd';
+import { LeftOutlined, PlusOutlined, SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import { setSelectedSpace } from '../../actions/spaces';
+import { Link } from 'react-router-dom';
+import { deleteSpace } from '../../actions/spaces';
import degaImg from '../../assets/dega.png';
+import './SpaceSelector.css';
+
+const ListsStyle = {
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ backgroundColor: '#F9FAFB',
+ color: '#1E1E1E',
+};
+
+function SpaceSelector({ onClose }) {
+ const [isMobileScreen, setIsMobileScreen] = React.useState(false);
-const { Option, OptGroup } = Select;
+ React.useEffect(() => {
+ const handleResize = () => {
+ if (window.innerWidth <= 768) {
+ setIsMobileScreen(true);
+ } else {
+ setIsMobileScreen(false);
+ }
+ };
+ window.addEventListener('resize', handleResize);
+ handleResize();
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
-function SpaceSelector({ collapsed }) {
- const { orgs, details, selected } = useSelector((state) => state.spaces);
+ const { orgs, details } = useSelector((state) => {
+ // orgs with spaces
+ const orgsSpaces = state.spaces.orgs.filter((org) => org.spaces.length > 0);
+ // orgs without spaces
+ const orgsNoSpaces = state.spaces.orgs.filter((org) => org.spaces.length === 0);
+ return {
+ orgs: [...orgsSpaces, ...orgsNoSpaces],
+ details: state.spaces.details,
+ };
+ });
+ const [searchquery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState([]);
+ const [modalOpen, setModalOpen] = useState(false);
+ const [itemToDelete, setItemToDelete] = useState(null);
const dispatch = useDispatch();
+ const { Header, Content } = Layout;
- const handleSpaceChange = (space) => {
- dispatch(setSelectedSpace(space));
+ const onSearch = (e) => {
+ setSearchQuery(e.target.value);
+
+ if (e.target.value.length > 0) {
+ filterData(e.target.value);
+ }
};
- return (
- <>
- {collapsed ? (
-
+
-
+ {org.title.split(new RegExp(`(${searchquery})`, 'gi')).map((text, i) =>
+ text.toLowerCase() === searchquery.toLowerCase() ? (
+
+ {text}
+
+ ) : (
+ {text}
+ ),
+ )}
+
+ ) : (
+
{item.title}
+ {/* */} +Published on {dayjs(item.published_date).format('MMMM Do YYYY')}
)} -by {getAuthorsList(item.authors)}
+by {getAuthorsList(item.authors)}
*/} ), }, { - title: 'Categories', - dataIndex: 'categories', + title: 'Published Date', + dataIndex: ['published_date', 'updated_at'], key: 'categories', ellipsis: true, - render: (item) => { - return item.length > 0 ? getCategoryList(item) : null; - }, - }, - { - title: 'Tags', - dataIndex: 'tags', - key: 'tags', - ellipsis: true, - render: (item) => { - return getTagList(item); + width: 200, + render: (_, item) => { + return ( + item && ( + <> ++
+ + )); }, }, { title: 'Actions', dataIndex: 'actions', - fixed: 'right', - align: 'center', - width: 240, + // fixed: 'right', + width: 200, render: (_, item, idx) => { const isOpen = item.id === expandedRowKeys[0]; return ( - <> -
-
- }
- disabled={!(actions.includes('admin') || actions.includes('update'))}
- style={{
- margin: '0.5rem',
- padding: '4px 22px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- }}
- />
-
+
+
);
},
},
@@ -178,6 +216,28 @@ function PostList({ actions, format, filters, onPagination, data, fetchPosts })
dataSource={data.posts}
columns={columns}
rowKey={(record) => record.id}
+ loading={data.loading}
+ onRow={(record, rowIndex) => {
+ return {
+ onClick: (event) => {
+ history.push(
+ format.slug === 'article'
+ ? `/posts/${record.id}/edit`
+ : `/fact-checks/${record.id}/edit`,
+ );
+ },
+ onMouseEnter: (event) => {
+ document.body.style.cursor = 'pointer';
+ },
+ onMouseLeave: (event) => {
+ document.body.style.cursor = 'default';
+ },
+ };
+ }}
+ // style={{ maxWidth: '100vw', overflowX: 'auto' }}
+ scroll={{
+ x: '1000',
+ }}
expandable={{
expandIconColumnIndex: -1,
expandedRowKeys,
diff --git a/studio/src/components/PageHeader/index.js b/studio/src/components/PageHeader/index.js
index 391954c4e..b9e29d3da 100644
--- a/studio/src/components/PageHeader/index.js
+++ b/studio/src/components/PageHeader/index.js
@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import { Link, useLocation, useHistory } from 'react-router-dom';
+import { LeftOutlined } from '@ant-design/icons';
import { PageHeader as AntPageHeader } from '@ant-design/pro-layout';
import routes from '../../config/routesConfig';
import _ from 'lodash';
@@ -136,6 +137,7 @@ function Pageheader() {
)
return (
{
- setOpen(true);
- setTimeout(() => inputRef.current.focus(), 0); // antd dialog prevents using inputRef directly, don't modify this while refactoring dega studio
- }}
- />
-
+ {!collapsed ? (
+ }
+ onClick={(e) => {
+ setOpen(true);
+ setTimeout(() => inputRef.current.focus(), 0); // antd dialog prevents using inputRef directly, don't modify this while refactoring dega studio
+ }}
+ style={{
+ borderRadius: '8px',
+ padding: '12px, 14px, 12px, 6px',
+ width: '100%',
+ height: '36px',
+ }}
+ placeholder={'Search..'}
+ />
+ ) : Icon ? (
+ }
+ onClick={(e) => {
+ setOpen(true);
+ setTimeout(() => inputRef.current.focus(), 0);
+ }}
+ />
+ ) : (
+ {
+ setOpen(true);
+ setTimeout(() => inputRef.current.focus(), 0); // antd dialog prevents using inputRef directly, don't modify this while refactoring dega studio
+ }}
+ style={{ fontSize: collapsed ? '16px' : '20px', margin: '4px 0' }}
+ />
+ )}
+
- dispatch(deletePost(item.id)).then(() => fetchPosts())}
+ icon={
+ isOpen ? (
+ {
+ e.stopPropagation();
+ dispatch(deletePost(item.id)).then(() => fetchPosts());
+ setModalOpen(false);
+ }}
+ onCancel={(e) => {
+ e.stopPropagation();
+ setModalOpen(false);
+ }}
>
- }
- disabled={!(actions.includes('admin') || actions.includes('delete'))}
- danger
- style={{ margin: '0.5rem' }}
- >
-
+ Are you sure you want to delete this post?
+
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ alert('this do nothing');
+ }}
+ />
-
+
{
diff --git a/studio/src/config/routesConfig.js b/studio/src/config/routesConfig.js
index 419859470..8c92cdc46 100644
--- a/studio/src/config/routesConfig.js
+++ b/studio/src/config/routesConfig.js
@@ -1,10 +1,11 @@
+import React from 'react';
import {
- PieChartTwoTone,
- ControlTwoTone,
- AudioTwoTone,
- ToolTwoTone,
- SettingTwoTone,
- SecurityScanTwoTone,
+ HomeOutlined,
+ InfoCircleOutlined,
+ AudioOutlined,
+ GlobalOutlined,
+ SettingOutlined,
+ SecurityScanOutlined,
} from '@ant-design/icons';
//Pages
@@ -127,16 +128,16 @@ import EditWebhook from '../pages/webhooks/EditWebhook';
//profile
import Profile from '../pages/profile';
+// Settings
+import Settings from '../pages/settings';
// Website
import Website from '../pages/website';
import EditWebsite from '../pages/website/EditWebsite';
import CodeInjection from '../pages/website/CodeInjection';
import Branding from '../pages/website/Branding';
import AnalyticsForm from '../pages/website/AnalyticsForm';
-
// Advanced
import Advanced from '../pages/advanced';
-
// Members
import Members from '../pages/members';
import Requests from '../pages/requests';
@@ -196,7 +197,7 @@ const routes = {
},
},
editWebsite: {
- path: '/website/general',
+ path: '/settings/website/general',
menuKey: '/website',
Component: EditWebsite,
title: 'General',
@@ -206,7 +207,7 @@ const routes = {
},
},
codeInjection: {
- path: '/website/code-injection',
+ path: '/settings/website/code-injection',
menuKey: '/website',
Component: CodeInjection,
title: 'Code Injection',
@@ -216,7 +217,7 @@ const routes = {
},
},
branding: {
- path: '/website/branding',
+ path: '/settings/website/branding',
menuKey: '/website',
Component: Branding,
title: 'Branding',
@@ -226,7 +227,7 @@ const routes = {
},
},
analyticsForm: {
- path: '/website/analytics',
+ path: '/settings/website/analytics',
menuKey: '/website',
Component: AnalyticsForm,
title: 'Analytics',
@@ -236,7 +237,7 @@ const routes = {
},
},
reindex: {
- path: '/advanced/reindex',
+ path: '/settings/advanced/reindex',
menuKey: '/advanced',
Component: Reindex,
title: 'Reindex',
@@ -408,31 +409,31 @@ const routes = {
},
},
policies: {
- path: '/members/policies',
+ path: '/settings/members/policies',
menuKey: '/members',
Component: Policies,
title: 'Policies',
},
roles: {
- path: '/members/roles',
+ path: '/settings/members/roles',
menuKey: '/members',
Component: Roles,
title: 'Roles',
},
roleEdit: {
- path: '/members/roles/:id/edit',
+ path: '/settings/members/roles/:id/edit',
Component: EditRole,
menuKey: '/members/roles/edit',
title: 'Edit Role',
},
roleUsers: {
- path: '/members/roles/:roleID/users',
+ path: '/settings/members/roles/:roleID/users',
menuKey: '/members',
Component: RoleUsers,
title: 'Role Users',
},
createPolicy: {
- path: '/members/policies/create',
+ path: '/settings/members/policies/create',
menuKey: '/members',
Component: CreatePolicy,
title: 'New Policy',
@@ -442,13 +443,13 @@ const routes = {
},
},
ViewPolicy: {
- path: '/members/policies/:policyID/view',
+ path: '/settings/members/policies/:policyID/view',
menuKey: '/members',
Component: ViewPolicy,
title: 'Policy',
},
createRole: {
- path: '/members/roles/create',
+ path: '/settings/members/roles/create',
menuKey: '/members',
Component: CreateRole,
title: 'New Role',
@@ -458,7 +459,7 @@ const routes = {
// },
},
editPolicy: {
- path: '/members/policies/:id/edit',
+ path: '/settings/members/policies/:id/edit',
menuKey: '/members',
Component: EditPolicy,
title: 'Edit',
@@ -468,7 +469,7 @@ const routes = {
},
},
formats: {
- path: '/advanced/formats',
+ path: '/settings/advanced/formats',
menuKey: '/advanced',
Component: Formats,
title: 'Formats',
@@ -478,7 +479,7 @@ const routes = {
},
},
createFormat: {
- path: '/advanced/formats/create',
+ path: '/settings/advanced/formats/create',
menuKey: '/advanced',
Component: CreateFormat,
title: 'New Format',
@@ -488,7 +489,7 @@ const routes = {
},
},
editFormat: {
- path: '/advanced/formats/:id/edit',
+ path: '/settings/advanced/formats/:id/edit',
menuKey: '/advanced',
Component: EditFormat,
title: 'Edit',
@@ -712,13 +713,13 @@ const routes = {
title: 'Sach',
},
users: {
- path: '/members/users',
+ path: '/settings/members/users',
menuKey: '/members',
Component: Users,
title: 'Users',
},
usersPermission: {
- path: '/members/users/:id/permissions',
+ path: '/settings/members/users/:id/permissions',
menuKey: '/members',
Component: PermissionList,
title: 'Users Permission ',
@@ -728,13 +729,13 @@ const routes = {
},
},
menu: {
- path: '/website/menus',
+ path: '/settings/website/menus',
menuKey: '/website',
Component: Menu,
title: 'Menus',
},
createMenu: {
- path: '/website/menus/create',
+ path: '/settings/website/menus/create',
menuKey: '/website',
Component: CreateMenu,
title: 'New Menu',
@@ -744,7 +745,7 @@ const routes = {
},
},
editMenu: {
- path: '/website/menus/:id/edit',
+ path: '/settings/website/menus/:id/edit',
menuKey: '/website',
Component: EditMenu,
title: 'Edit',
@@ -801,7 +802,7 @@ const routes = {
isAdmin: true,
},
webhooks: {
- path: '/advanced/webhooks',
+ path: '/settings/advanced/webhooks',
menuKey: '/advanced',
Component: Webhooks,
title: 'Webhooks',
@@ -811,7 +812,7 @@ const routes = {
},
},
createWebhook: {
- path: '/advanced/webhooks/create',
+ path: '/settings/advanced/webhooks/create',
menuKey: '/advanced',
Component: CreateWebhook,
title: 'New Webhook',
@@ -821,7 +822,7 @@ const routes = {
},
},
editWebhook: {
- path: '/advanced/webhooks/:id/edit',
+ path: '/settings/advanced/webhooks/:id/edit',
menuKey: '/advanced',
Component: EditWebhook,
title: 'Edit',
@@ -836,6 +837,12 @@ const routes = {
Component: Profile,
title: 'Edit Profile',
},
+ settings: {
+ path: '/settings',
+ menuKey: '/settings',
+ title: 'Settings',
+ Component: Settings,
+ },
website: {
path: '/website',
menuKey: '/website',
@@ -858,19 +865,19 @@ const routes = {
export const sidebarMenu = [
{
title: 'Dashboard',
- Icon: PieChartTwoTone,
+ Icon: (props) => dispatch(setSpaceSelectorPage(false))}
+ />
+ );
+ }
const hideSidebar =
(location.pathname.includes('posts') ||
@@ -114,24 +142,55 @@ function BasicLayout(props) {
(location.pathname.includes('edit') || location.pathname.includes('create'));
return (
+ {isMobileScreen && !hideSidebar && (
+ <>
+
+
+
+ )}
{/*
-
{children}
diff --git a/studio/src/pages/advanced/index.js b/studio/src/pages/advanced/index.js
index d07ad6b91..60169eb0b 100644
--- a/studio/src/pages/advanced/index.js
+++ b/studio/src/pages/advanced/index.js
@@ -3,7 +3,7 @@ import { Card, Avatar, Row, Col } from 'antd';
import { InteractionTwoTone, FileTextTwoTone, ApiTwoTone } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';
-const Advanced = () => {
+const Advanced = (children) => {
const { Meta } = Card;
const gridStyle = {
textAlign: 'left',
@@ -11,55 +11,22 @@ const Advanced = () => {
return (
-
- }
- style={{ backgroundColor: 'transparent' }}
+
+ {children.map((child) => {
+ return (
+
+
- }
- title="Webhooks"
- description="Create/ Modify Webhooks"
- />
-
-
-
-
- }
- style={{ backgroundColor: 'transparent' }}
- />
- }
- title="Re-Indexing Meili"
- description="Re-Index Meili Database"
- />
-
-
-
-
- }
- style={{ backgroundColor: 'transparent' }}
- />
- }
- title="Formats"
- description="Add/Edit formats"
- />
-
-
-
+
+
+
+ );
+ })}
);
diff --git a/studio/src/pages/categories/components/CategoryForm.js b/studio/src/pages/categories/components/CategoryForm.js
index 88848d1be..f0ce19ed3 100644
--- a/studio/src/pages/categories/components/CategoryForm.js
+++ b/studio/src/pages/categories/components/CategoryForm.js
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Row, Col, Button, Form, Space, Switch } from 'antd';
+import { Row, Col, Button, Form, Space, Switch, Collapse, ConfigProvider } from 'antd';
import { maker } from '../../../utils/sluger';
import MediaSelector from '../../../components/MediaSelector';
import { SketchPicker } from 'react-color';
@@ -59,154 +59,198 @@ const CategoryForm = ({ onCreate, data = {} }) => {
};
return (
-