first fixes

pull/5371/head
bunsenstraat 3 weeks ago
parent 6ffdb154f6
commit 0dfc70e7a1
  1. 49
      apps/remix-ide/src/app/components/popup-panel.tsx
  2. 2
      libs/remix-ui/app/src/lib/remix-app/actions/app.ts
  3. 1
      libs/remix-ui/app/src/lib/remix-app/interface/index.ts
  4. 47
      libs/remix-ui/app/src/lib/remix-app/reducer/app.ts
  5. 3
      libs/remix-ui/app/src/lib/remix-app/state/app.ts
  6. 14
      libs/remix-ui/helper/src/lib/components/PluginViewWrapper.tsx
  7. 4
      libs/remix-ui/panel/src/lib/plugins/remix-ui-panel.tsx
  8. 10
      libs/remix-ui/statusbar/src/lib/components/aiStatus.tsx

@ -1,9 +1,11 @@
import React from 'react' // eslint-disable-line import React from 'react' // eslint-disable-line
import { AbstractPanel } from './panel' import { AbstractPanel } from './panel'
import { RemixPluginPanel } from '@remix-ui/panel' import { PluginRecord, RemixPluginPanel } from '@remix-ui/panel'
import packageJson from '../../../../../package.json' import packageJson from '../../../../../package.json'
import { PluginViewWrapper } from '@remix-ui/helper' import { PluginViewWrapper } from '@remix-ui/helper'
import {EventEmitter} from 'events' import { EventEmitter } from 'events'
import { AppState } from 'libs/remix-ui/app/src/lib/remix-app/interface'
import { AppAction, appActionTypes } from '@remix-ui/app'
const profile = { const profile = {
name: 'popupPanel', name: 'popupPanel',
@ -13,22 +15,28 @@ const profile = {
events: ['popupPanelShown'], events: ['popupPanelShown'],
methods: ['addView', 'removeView', 'showContent', 'showPopupPanel'] methods: ['addView', 'removeView', 'showContent', 'showPopupPanel']
} }
type popupPanelState = {
plugins: Record<string, PluginRecord>
}
export class PopupPanel extends AbstractPanel { export class PopupPanel extends AbstractPanel {
element: HTMLDivElement element: HTMLDivElement
dispatch: React.Dispatch<any> = () => {} dispatch: React.Dispatch<any> = () => { }
showPanel: boolean appStateDispatch: React.Dispatch<AppAction> = () => { }
constructor(config) { constructor(config) {
super(profile) super(profile)
this.event = new EventEmitter() this.event = new EventEmitter()
this.showPanel = true
} }
setDispatch(dispatch: React.Dispatch<any>) { setDispatch(dispatch: React.Dispatch<any>) {
this.dispatch = dispatch this.dispatch = dispatch
} }
setAppStateDispatch(appStateDispatch: React.Dispatch<AppAction>) {
this.appStateDispatch = appStateDispatch
}
onActivation() { onActivation() {
this.renderComponent() this.renderComponent()
} }
@ -56,23 +64,31 @@ export class PopupPanel extends AbstractPanel {
} }
async showPopupPanel(show) { async showPopupPanel(show) {
console.log("hide in popup-panel =", show)
this.showPanel = show this.appStateDispatch({
this.event.emit('popupPanelShown', show) type: appActionTypes.setShowPopupPanel,
payload: show
})
this.renderComponent() this.renderComponent()
} }
renderComponent() { renderComponent() {
this.dispatch({ this.dispatch({
plugins: this.plugins, plugins: this.plugins
showPpPanel: this.showPanel
}) })
} }
render() { render() {
return (
<PluginViewWrapper plugin={this} />
)
}
updateComponent(state: popupPanelState & Partial<AppState>) {
console.log("state in updateComponent =", state)
return ( return (
<div <div
className={'px-0 bg-light border-info ' + (!this.showPanel ? 'd-none' : 'd-flex')} className={'px-0 bg-light border-info ' + (!state.showPopupPanel ? 'd-none' : 'd-flex')}
style={{ style={{
maxHeight: '40rem', maxHeight: '40rem',
maxWidth: '25rem', maxWidth: '25rem',
@ -86,14 +102,6 @@ export class PopupPanel extends AbstractPanel {
}} }}
data-id="popupPanelPluginsContainer" data-id="popupPanelPluginsContainer"
> >
{this.showPanel && <PluginViewWrapper plugin={this} />}
</div>
)
}
updateComponent(state: any) {
return (
<div className={!state.showPpPanel ? 'd-none' : 'd-flex'}>
<RemixPluginPanel <RemixPluginPanel
header={ header={
<span id='menubarAIChat' className='pb-2 d-flex flex-row'> <span id='menubarAIChat' className='pb-2 d-flex flex-row'>
@ -108,6 +116,7 @@ export class PopupPanel extends AbstractPanel {
</span> </span>
} }
plugins={state.plugins} /> plugins={state.plugins} />
</div>) </div>
)
} }
} }

@ -17,6 +17,7 @@ export const enum appActionTypes {
setCurrentBranch = 'SET_CURRENT_BRANCH', setCurrentBranch = 'SET_CURRENT_BRANCH',
setNeedsGitInit = 'SET_NEEDS_GIT_INIT', setNeedsGitInit = 'SET_NEEDS_GIT_INIT',
setCanUseGit = 'SET_CAN_USE_GIT', setCanUseGit = 'SET_CAN_USE_GIT',
setShowPopupPanel = 'SET_SHOW_POPUP_PANEL',
} }
type AppPayload = { type AppPayload = {
@ -24,6 +25,7 @@ type AppPayload = {
[appActionTypes.setCurrentBranch]: branch, [appActionTypes.setCurrentBranch]: branch,
[appActionTypes.setNeedsGitInit]: boolean, [appActionTypes.setNeedsGitInit]: boolean,
[appActionTypes.setCanUseGit]: boolean, [appActionTypes.setCanUseGit]: boolean,
[appActionTypes.setShowPopupPanel]: boolean,
} }
export type AppAction = ActionMap<AppPayload>[keyof ActionMap< export type AppAction = ActionMap<AppPayload>[keyof ActionMap<

@ -52,5 +52,6 @@ export interface AppState {
currentBranch: branch currentBranch: branch
needsGitInit: boolean needsGitInit: boolean
canUseGit: boolean canUseGit: boolean
showPopupPanel: boolean
} }

@ -3,29 +3,36 @@ import { AppState } from "../interface";
export const appReducer = (state: AppState, action: AppAction): AppState => { export const appReducer = (state: AppState, action: AppAction): AppState => {
switch (action.type) { switch (action.type) {
case appActionTypes.setGitHubUser: { case appActionTypes.setGitHubUser: {
return { return {
...state, ...state,
gitHubUser: action.payload gitHubUser: action.payload
}
} }
} case appActionTypes.setCurrentBranch: {
case appActionTypes.setCurrentBranch: { return {
return { ...state,
...state, currentBranch: action.payload
currentBranch: action.payload }
} }
} case appActionTypes.setNeedsGitInit: {
case appActionTypes.setNeedsGitInit: { return {
return { ...state,
...state, needsGitInit: action.payload
needsGitInit: action.payload }
} }
} case appActionTypes.setCanUseGit: {
case appActionTypes.setCanUseGit: { return {
return { ...state,
...state, canUseGit: action.payload
canUseGit: action.payload }
}
case appActionTypes.setShowPopupPanel: {
return {
...state,
showPopupPanel: action.payload
}
} }
}
} }
} }

@ -5,5 +5,6 @@ export const appInitialState: AppState = {
gitHubUser: {} as GitHubUser, gitHubUser: {} as GitHubUser,
currentBranch: null, currentBranch: null,
needsGitInit: true, needsGitInit: true,
canUseGit: false canUseGit: false,
showPopupPanel: true
} }

@ -1,4 +1,5 @@
import React from 'react' import { AppContext } from '@remix-ui/app'
import React, { useContext } from 'react'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
interface IPluginViewWrapperProps { interface IPluginViewWrapperProps {
@ -7,12 +8,21 @@ interface IPluginViewWrapperProps {
export const PluginViewWrapper = (props: IPluginViewWrapperProps) => { export const PluginViewWrapper = (props: IPluginViewWrapperProps) => {
const [state, setState] = useState<any>(null) const [state, setState] = useState<any>(null)
const appContext = useContext(AppContext)
useEffect(() => { useEffect(() => {
if (props.plugin.setDispatch) { if (props.plugin.setDispatch) {
props.plugin.setDispatch(setState) props.plugin.setDispatch(setState)
} }
if(props.plugin.setAppStateDispatch) {
props.plugin.setAppStateDispatch(appContext.appStateDispatch)
}
}, []) }, [])
return <>{state ? <>{props.plugin.updateComponent(state)}</> : <></>}</> return <>{state ? <>{props.plugin.updateComponent(
{
...state,
...appContext['appState']
})}
</> : <></>}</>
} }

@ -14,7 +14,7 @@ export interface RemixPanelProps {
export function RemixPluginPanel(props: RemixPanelProps) { export function RemixPluginPanel(props: RemixPanelProps) {
return ( return (
<div className='d-flex flex-column'> <>
{props.header} {props.header}
<div className="pluginsContainer"> <div className="pluginsContainer">
<div className="plugins" id="plugins"> <div className="plugins" id="plugins">
@ -28,7 +28,7 @@ export function RemixPluginPanel(props: RemixPanelProps) {
}) } }) }
</div> </div>
</div> </div>
</div> </>
) )
} }

@ -12,14 +12,8 @@ interface AIStatusProps {
export default function AIStatus(props: AIStatusProps) { export default function AIStatus(props: AIStatusProps) {
const [copilotActive, setCopilotActive] = useState(false) const [copilotActive, setCopilotActive] = useState(false)
const [expandAIChat, setExpandAIChat] = useState(true)
useEffect(() => { useEffect(() => {
const popupPanelListener = async (show) => {
setTimeout(() => setExpandAIChat(show), 0);
};
props.plugin.on('popupPanel', 'popupPanelShown', popupPanelListener)
const run = async () => { const run = async () => {
const aiActivate = await props.plugin.call('settings', 'get', 'settings/copilot/suggest/activate') const aiActivate = await props.plugin.call('settings', 'get', 'settings/copilot/suggest/activate')
@ -71,10 +65,10 @@ export default function AIStatus(props: AIStatusProps) {
}} }}
className='p-1 alert alert-info border border-info fa-solid fa-message-bot' className='p-1 alert alert-info border border-info fa-solid fa-message-bot'
onClick={async () => { onClick={async () => {
await props.plugin.call('popupPanel', 'showPopupPanel', !expandAIChat) await props.plugin.call('popupPanel', 'showPopupPanel', true)
}} }}
> >
{expandAIChat ? '1' : '0'}
</button> </button>
</div> </div>
</div> </div>

Loading…
Cancel
Save