gitstatus changes

pull/4774/head
Joseph Izang 6 months ago
parent 988014408e
commit e453aafad4
  1. 31
      apps/remix-ide/src/app/components/status-bar.tsx
  2. 5
      apps/remix-ide/src/types/index.d.ts
  3. 15
      libs/remix-ui/statusbar/src/lib/components/gitStatus.tsx
  4. 47
      libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
  5. 2
      libs/remix-ui/statusbar/src/lib/types/index.ts

@ -3,20 +3,22 @@ import { EventEmitter } from 'events'
import { Plugin } from '@remixproject/engine' import { Plugin } from '@remixproject/engine'
import packageJson from '../../../../../package.json' import packageJson from '../../../../../package.json'
import { PluginViewWrapper } from '@remix-ui/helper' import { PluginViewWrapper } from '@remix-ui/helper'
import { PluginProfile } from '../../types' import { PluginProfile, StatusBarInterface } from '../../types'
import { RemixUIStatusBar } from '@remix-ui/statusbar' import { RemixUIStatusBar } from '@remix-ui/statusbar'
const statusBarProfile: PluginProfile = { const statusBarProfile: PluginProfile = {
name: 'statusBar', name: 'statusBar',
displayName: 'Status Bar', displayName: 'Status Bar',
description: 'Remix IDE status bar panel', description: 'Remix IDE status bar panel',
version: packageJson.version methods: ['getGitBranchName'],
version: packageJson.version,
} }
export class StatusBar extends Plugin { export class StatusBar extends Plugin implements StatusBarInterface {
htmlElement: HTMLDivElement htmlElement: HTMLDivElement
events: EventEmitter events: EventEmitter
dispatch: React.Dispatch<any> = () => {} dispatch: React.Dispatch<any> = () => {}
currentWorkspaceName: string = ''
constructor() { constructor() {
super(statusBarProfile) super(statusBarProfile)
this.events = new EventEmitter() this.events = new EventEmitter()
@ -25,15 +27,27 @@ export class StatusBar extends Plugin {
} }
onActivation(): void { onActivation(): void {
this.on('filePanel', 'setWorkspace', async () => {
await this.getGitBranchName()
})
this.renderComponent() this.renderComponent()
} }
async getGitBranchName() {
const isGitRepo = await this.call('fileManager', 'isGitRepo')
if (!isGitRepo) return
const repoName = await this.call('filePanel', 'getCurrentWorkspace')
repoName && repoName?.name.length > 0 ? this.currentWorkspaceName = repoName.name : this.currentWorkspaceName = ''
return { repoWorkspaceName: repoName }
}
setDispatch(dispatch: React.Dispatch<any>) { setDispatch(dispatch: React.Dispatch<any>) {
this.dispatch = dispatch this.dispatch = dispatch
} }
renderComponent() { renderComponent() {
this.dispatch({ this.dispatch({
plugins: this plugins: this,
}) })
} }
@ -42,9 +56,10 @@ export class StatusBar extends Plugin {
} }
render() { render() {
return (<div data-id="status-bar-container"> return (
<PluginViewWrapper plugin={this} /> <div data-id="status-bar-container">
</div>) <PluginViewWrapper plugin={this} />
</div>
)
} }
} }

@ -1,4 +1,3 @@
export interface PluginProfile { export interface PluginProfile {
name: string name: string
displayName: string displayName: string
@ -11,10 +10,10 @@ export interface PluginProfile {
version?: string version?: string
} }
export interface StatusBarInterface extends Plugin { export interface StatusBarInterface {
htmlElement: HTMLDivElement htmlElement: HTMLDivElement
events: EventEmitter events: EventEmitter
dispatch: React.Dispatch<any> dispatch: React.Dispatch<any>
setDispatch(dispatch: React.Dispatch<any>): void setDispatch(dispatch: React.Dispatch<any>): void
getGitBranchName: () => Promise<any>
} }

@ -1,15 +1,20 @@
import React, { useState } from 'react' import React, { useEffect, useState } from 'react'
import { StatusBarInterface } from '../types'
export interface GitStatusProps { export interface GitStatusProps {
workspaceName: string plugin: StatusBarInterface
} }
export default function GitStatus({ workspaceName }: GitStatusProps) { export default function GitStatus({ plugin }: GitStatusProps) {
const [gitBranchName, setGitBranchName] = useState('')
return ( return (
<div className="d-flex flex-row p-1 text-white justify-content-center align-items-center"> <div
className="d-flex flex-row p-1 text-white justify-content-center align-items-center"
>
<span className="fa-regular fa-code-branch ml-1"></span> <span className="fa-regular fa-code-branch ml-1"></span>
<span className="small mx-1">{`${workspaceName}`}</span> <span className="small mx-1">{`${gitBranchName}`}</span>
<span className="fa-solid fa-arrows-rotate fa-1"></span> <span className="fa-solid fa-arrows-rotate fa-1"></span>
</div> </div>
) )

@ -6,8 +6,6 @@ import ScamAlertStatus from './components/scamAlertStatus'
import ScamDetails from './components/scamDetails' import ScamDetails from './components/scamDetails'
import { FloatingFocusManager, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react' import { FloatingFocusManager, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react'
import axios from 'axios' import axios from 'axios'
import { get } from 'lodash'
import { current } from '@reduxjs/toolkit'
export interface RemixUIStatusBarProps { export interface RemixUIStatusBarProps {
statusBarPlugin: StatusBarInterface statusBarPlugin: StatusBarInterface
@ -18,12 +16,11 @@ export type ScamAlert = {
url: string url: string
} }
type GetCurrentWorkspace = type GetCurrentWorkspace = {
{ name: string
name: string isLocalhost: boolean
isLocalhost: boolean absolutePath: string
absolutePath: string }
}
export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) { export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
const [showScamDetails, setShowScamDetails] = useState(false) const [showScamDetails, setShowScamDetails] = useState(false)
@ -54,31 +51,13 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
} }
}, []) }, [])
useEffect(() => { const t = async () => {
async function getGitBranchName() { const isGit = await statusBarPlugin.call('fileManager', 'isGitRepo')
const gitRepo = await statusBarPlugin.call('fileManager', 'isGitRepo') if (!isGit) return
console.log('gitRepo', gitRepo) const repoName = await statusBarPlugin.call('filePanel', 'getCurrentWorkspace')
return gitRepo repoName && repoName?.name.length > 0 ? statusBarPlugin.currentWorkspaceName = repoName.name : statusBarPlugin.currentWorkspaceName = ''
} return { repoWorkspaceName: repoName }
async function getWorkspaceName() { }
const thing = await statusBarPlugin.call('filePanel', 'getCurrentWorkspace')
console.log('thing', thing)
return thing
}
async function getWorkspaceGitBranchName() {
if (!getGitBranchName()) return
let currentWorkspace: GetCurrentWorkspace = {} as GetCurrentWorkspace
currentWorkspace = await getWorkspaceName()
console.log('currentWorkspace', currentWorkspace)
setWorkspaceName(currentWorkspace?.name)
}
getWorkspaceGitBranchName()
return () => {
getWorkspaceGitBranchName()
}
}, [statusBarPlugin])
return ( return (
<> <>
@ -89,7 +68,7 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
)} )}
<div className="d-flex flex-row bg-primary justify-content-between align-items-center"> <div className="d-flex flex-row bg-primary justify-content-between align-items-center">
<div className="remixui_statusbar"> <div className="remixui_statusbar">
<GitStatus workspaceName={workspaceName ?? 'none'} /> <GitStatus plugin={statusBarPlugin} />
</div> </div>
<div className="remixui_statusbar"></div> <div className="remixui_statusbar"></div>
<div className="remixui_statusbar d-flex flex-row"> <div className="remixui_statusbar d-flex flex-row">

@ -17,4 +17,6 @@ export interface StatusBarInterface extends Plugin {
events: EventEmitter events: EventEmitter
dispatch: React.Dispatch<any> dispatch: React.Dispatch<any>
setDispatch(dispatch: React.Dispatch<any>): void setDispatch(dispatch: React.Dispatch<any>): void
getGitBranchName: () => Promise<any>
currentWorkspaceName: string
} }

Loading…
Cancel
Save