Skip to content

Commit

Permalink
Kbar implemented (#51)
Browse files Browse the repository at this point in the history 
* Added Kbar

* Removed extra flow

* cleanup

---------

Co-authored-by: iberdinsky-skilld <[email protected]>
  • Loading branch information
@iberdinsky-skilld
iberdinsky-skilld and iberdinsky-skilld authored Sep 12, 2024
1 parent ef00980 commit b536345
Show file tree
Hide file tree
Showing 13 changed files with 168 additions and 302 deletions.
59 changes: 29 additions & 30 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Refine } from '@refinedev/core'
import { RefineKbar, RefineKbarProvider } from '@refinedev/kbar'
import { RefineKbar } from '@refinedev/kbar'
import { ErrorComponent, useNotificationProvider } from '@refinedev/mui'
import routerBindings, {
DocumentTitleHandler,
Expand All @@ -14,6 +14,7 @@ import {
Routes,
} from 'react-router-dom'

import { GlobalKBarProvider } from './components/GlobalKBarProvider'
import { ThemedLayoutV2 } from './components/layout'
import { ThemedHeaderV2 } from './components/layout/Header'
import { ThemedSiderV2 } from './components/layout/Sider'
Expand Down Expand Up @@ -43,30 +44,29 @@ export function App() {
<AppProvider>
<ActionProvider>
<BrowserRouter>
<RefineKbarProvider>
<ThemeProvider>
<Refine
dataProvider={{
default: launchrDataProvider(apiUrl),
}}
liveProvider={liveProvider}
notificationProvider={useNotificationProvider}
routerProvider={routerBindings}
resources={[
{
name: 'actions',
list: '/actions',
show: '/actions/:id/show',
// edit: "/actions/:id/edit",
meta: {
canDelete: false,
},
<ThemeProvider>
<Refine
dataProvider={{
default: launchrDataProvider(apiUrl),
}}
liveProvider={liveProvider}
notificationProvider={useNotificationProvider}
routerProvider={routerBindings}
resources={[
{
name: 'actions',
list: '/actions',
show: '/actions/:id/show',
meta: {
canDelete: false,
},
]}
options={{
liveMode: 'manual',
}}
>
},
]}
options={{
liveMode: 'manual',
}}
>
<GlobalKBarProvider>
<Routes>
<Route
element={
Expand All @@ -83,21 +83,20 @@ export function App() {
<Route path="/actions">
<Route index element={<ActionList />} />
<Route path=":id/show" element={<ActionShow />} />
{/*<Route path=":id/running/:runId" element={<ActionAttach />} />*/}
{/*<Route path=":id/edit" element={<ActionEdit />} />*/}
</Route>
<Route path="/flow">
<Route index element={<FlowShow />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>
</Routes>
<RefineKbar />

<UnsavedChangesNotifier />
<DocumentTitleHandler handler={customTitleHandler} />
</Refine>
</ThemeProvider>
</RefineKbarProvider>
<RefineKbar />
</GlobalKBarProvider>
</Refine>
</ThemeProvider>
</BrowserRouter>
</ActionProvider>
</AppProvider>
Expand Down
100 changes: 29 additions & 71 deletions client/src/components/ActionsFlow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
useEffect,
useState,
} from 'react'
import * as React from 'react'
import Flow, {
Background,
Controls,
Expand All @@ -30,12 +29,8 @@ import CheckIcon from '/images/check.svg'
import FlowBg from '/images/flow-bg.svg'
import FlowBgDark from '/images/flow-bg-dark.svg'

import { useActionDispatch } from '../hooks/ActionHooks'
import { useFlowClickedActionID } from '../hooks/ActionsFlowHooks'
import {
useSidebarTreeItemClickStates,
useSidebarTreeItemMouseStates,
} from '../hooks/SidebarTreeItemStatesHooks'
import { useAction, useActionDispatch } from '../hooks/ActionHooks'
import { useSidebarTreeItemMouseStates } from '../hooks/SidebarTreeItemStatesHooks'
import { IFlowNodeType } from '../types'
import {
actionHeight,
Expand Down Expand Up @@ -319,10 +314,9 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {
const [nodes, setNodes] = useNodesState([])
const [edges, setEdges] = useEdgesState([])
const dispatch = useActionDispatch()
const { state: nodeClickState } = useSidebarTreeItemClickStates()
const { id: nodeId } = useAction()
const { state: nodeMouseState } = useSidebarTreeItemMouseStates()
const [flowInstance, setFlowInstance] = useState<ReactFlowInstance>()
const { setFlowClickedActionId } = useFlowClickedActionID()

useEffect(() => {
const [receivedNodes, receivedEdges] = getNodesAndEdges(
Expand All @@ -338,45 +332,41 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {
}, [actions])

useEffect(() => {
if (
nodeClickState &&
nodeClickState.id &&
nodes &&
nodes.some((a) => a.id === nodeClickState.id)
) {
if (nodeId && nodes && nodes.some((a) => a.id === nodeId)) {
setNodes((prev) => {
if (nodeClickState.isActive) {
if (nodeId) {
for (const prevMatched of prev.filter(
(a) => a.id !== nodeClickState.id && a.data.isActive === true
(a) => a.id !== nodeId && a.data.isActive === true
)) {
prevMatched.data.isActive = false
}
}
const matched = prev.find((a) => a.id === nodeClickState.id)
const matched = prev.find((a) => a.id === nodeId)
if (matched) {
matched.data.isActive = nodeClickState.isActive
matched.data.isActive = true
}
return [...prev]
})
if (nodeClickState.isActive) {
let maxZoom = 0.6
if (nodeClickState.id.includes(':')) {
maxZoom = 0.8
}
if (nodeClickState.isActionsGroup) {
maxZoom = 0.7
}
if (nodeId) {
const maxZoom = 0.6
// TODO: Check this feature.
// if (nodeClickState.id.includes(':')) {
// maxZoom = 0.8
// }
// if (nodeClickState.isActionsGroup) {
// maxZoom = 0.7
// }
if (flowInstance) {
flowInstance.fitView({
duration: 400,
maxZoom,
nodes: [{ id: nodeClickState.id }],
nodes: [{ id: nodeId }],
})
}
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [nodeClickState])
}, [nodeId])

useEffect(() => {
const componentUpdate = (initial = false) => {
Expand Down Expand Up @@ -445,44 +435,33 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {

return [...prev]
})
setFlowClickedActionId({
id: node.id,
isActive: false,
})
if (nodeClickState) {
nodeClickState.isActive = false
}

setNodeData(undefined)
dispatch?.({
type: 'set-actions-sidebar',
type: 'set-active-action',
id: node.id,
})

return
}
if (node.type !== 'node-action') return
if (nodeClickState?.isActive) {
if (nodeClickState.id === node.id) {
if (nodeId) {
if (nodeId === node.id) {
setNodes((prev) => {
const matched = prev.find((a) => a.id === nodeClickState.id)
const matched = prev.find((a) => a.id === nodeId)
if (matched) {
matched.data.isActive = false
}

return [...prev]
})
setFlowClickedActionId({
id: node.id,
isActive: false,
})
setNodeData(undefined)
dispatch?.({
id: '',
})
nodeClickState.isActive = false
} else {
setNodes((prev) => {
const oldMatched = prev.find((a) => a.id === nodeClickState.id)
const oldMatched = prev.find((a) => a.id === nodeId)
if (oldMatched) {
oldMatched.data.isActive = false
}
Expand All @@ -494,16 +473,11 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {

return [...prev]
})
setFlowClickedActionId({
id: node.id,
isActive: true,
})
setNodeData(node)
dispatch?.({
type: 'set-actions-sidebar',
type: 'set-active-action',
id: node.id,
})
nodeClickState.isActive = false
}
} else {
if (nodeData) {
Expand All @@ -516,14 +490,10 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {

return [...prev]
})
setFlowClickedActionId({
id: node.id,
isActive: true,
})
node.data.isActive = true
setNodeData(node)
dispatch?.({
type: 'set-actions-sidebar',
type: 'set-active-action',
id: node.id,
})
} else if (node.id === nodeData.id && nodeData.data.isActive) {
Expand All @@ -535,10 +505,6 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {

return [...prev]
})
setFlowClickedActionId({
id: node.id,
isActive: false,
})
setNodeData(undefined)
dispatch?.({
id: '',
Expand All @@ -557,13 +523,9 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {

return [...prev]
})
setFlowClickedActionId({
id: node.id,
isActive: true,
})
setNodeData(node)
dispatch?.({
type: 'set-actions-sidebar',
type: 'set-active-action',
id: node.id,
})
}
Expand All @@ -576,14 +538,10 @@ export const ActionsFlow: FC<IActionsFlowProps> = ({ actions }) => {

return [...prev]
})
setFlowClickedActionId({
id: node.id,
isActive: true,
})
node.data.isActive = true
setNodeData(node)
dispatch?.({
type: 'set-actions-sidebar',
type: 'set-active-action',
id: node.id,
})
}
Expand Down
15 changes: 2 additions & 13 deletions client/src/components/ActionsListFlow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,14 @@ import ArrowRightIcon from '/images/arrow-right.svg'

import { components } from '../../openapi'
import { useActionDispatch } from '../hooks/ActionHooks'
import { useFlowClickedActionID } from '../hooks/ActionsFlowHooks'
import {
useSidebarTreeItemClickStates,
useSidebarTreeItemMouseStates,
} from '../hooks/SidebarTreeItemStatesHooks'
import { useSidebarTreeItemMouseStates } from '../hooks/SidebarTreeItemStatesHooks'
import { sentenceCase, splitActionId } from '../utils/helpers'
import { type IActionsGroup } from './SecondSidebarFlow'
interface ActionsListFlowProps {
actionsGroup: IActionsGroup
}

export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {
const { setFlowClickedActionId } = useFlowClickedActionID()
const { handleSelect } = useSidebarTreeItemClickStates()
const { handleMouseEnter, handleMouseLeave } = useSidebarTreeItemMouseStates()
const [hoveredId, setHoveredId] = useState('')

Expand Down Expand Up @@ -134,18 +128,13 @@ export const ActionsListFlow: FC<ActionsListFlowProps> = ({ actionsGroup }) => {

const actionClickHandler = (id: string) => {
dispatch?.({
type: 'set-actions-sidebar',
type: 'set-active-action',
id,
})
setFlowClickedActionId({
id,
isActive: true,
})
if (hoveredId) {
handleMouseLeave(hoveredId, true)
setHoveredId('')
}
handleSelect(id)
}

return (
Expand Down
Loading

0 comments on commit b536345

Please sign in to comment.