Skip to content

Tshepo/f/drawer #3139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Tshepo1103-lab wants to merge 9 commits into from
Closed

Tshepo/f/drawer #3139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
53183ce
fix: fix the header and footer styles
Tshepo1103-lab Apr 10, 2025
d44a33a
chore: adding the height to the drawer
Tshepo1103-lab Apr 10, 2025
2a54655
Merge branch 'main' into tshepo/f/drawer
Tshepo1103-lab Apr 10, 2025
8d8aa0d
chore: removing readonly properties
Tshepo1103-lab Apr 10, 2025
357d433
Update shesha-io.shesha-framework-test.yml for Azure Pipelines
admin-shesha Apr 22, 2025
0e4fbdf
Merge branch 'main' of https://github.com/Tshepo1103-lab/shesha-frame…
Tshepo1103-lab Apr 22, 2025
5aecc5f
fix: fixed the id duplication from different settings
Tshepo1103-lab Apr 22, 2025
ebb1c9c
chore: chaning to use the all styles
Tshepo1103-lab Apr 23, 2025
3189558
chore: providing height and width
Tshepo1103-lab Apr 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions shesha-io.shesha-framework-test.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,7 @@ stages:
command: 'restore'
projects: 'shesha-functional-tests/backend/**/*.csproj'
feedsToUse: 'config'
nugetConfigPath: './shesha-core/.nuget/NuGet.Config'
workingDirectory: './shesha-core/.nuget'
nugetConfigPath: './shesha-core/.nuget/NuGet.Azure.Config'
- task: DotNetCoreCLI@2
displayName: dotnet build
inputs:
Expand Down
12 changes: 10 additions & 2 deletions shesha-reactjs/src/designer-components/drawer/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
footerStyle?: CSSProperties;
placement?: 'top' | 'right' | 'bottom' | 'left';
width?: string | number;
height?: string | number;
readOnly?: boolean;
background?: CSSProperties;
}
Expand All @@ -38,7 +39,6 @@
const {
id,
placement,
width,
componentName: name,
readOnly,
label,
Expand Down Expand Up @@ -140,18 +140,26 @@
</Fragment>
);
}
console.log('width', style?.width);

Check failure on line 143 in shesha-reactjs/src/designer-components/drawer/drawer.tsx

View workflow job for this annotation

GitHub Actions / build-attempt 

Unexpected console statement. Only these console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context
console.log('height', style?.height);

Check failure on line 144 in shesha-reactjs/src/designer-components/drawer/drawer.tsx

View workflow job for this annotation

GitHub Actions / build-attempt 

Unexpected console statement. Only these console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context
console.log('style', props);

Check failure on line 145 in shesha-reactjs/src/designer-components/drawer/drawer.tsx

View workflow job for this annotation

GitHub Actions / build-attempt 

Unexpected console statement. Only these console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context
Comment on lines +143 to +145
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove console.log statements causing build failures.

These console.log statements are causing pipeline failures. According to the static analysis tool, only specific console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context.

Replace with either:

-console.log('width', style?.width);
-console.log('height', style?.height);
-console.log('style', props);
+console.warn('width', style?.width);
+console.warn('height', style?.height);
+console.warn('style', props);

Or remove them entirely if they were only for debugging purposes.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
console.log('width', style?.width);
console.log('height', style?.height);
console.log('style', props);
console.warn('width', style?.width);
console.warn('height', style?.height);
console.warn('style', props);
🧰 Tools
🪛 GitHub Check: build-attempt

[failure] 143-143:
Unexpected console statement. Only these console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context

[failure] 144-144:
Unexpected console statement. Only these console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context

[failure] 145-145:
Unexpected console statement. Only these console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context

🪛 GitHub Actions: shesha-reactjs-build

[error] 143-143: Unexpected console statement. Only these console methods are allowed: warn, dir, timeLog, assert, clear, count, countReset, group, groupEnd, table, dirxml, error, groupCollapsed, Console, profile, profileEnd, timeStamp, context (no-console)


return (
<Drawer
open={state?.open}
placement={placement}
width={width}
// width='100%'
// height='100%'
Comment on lines +151 to +152
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove commented-out code.

Commented-out code should be removed rather than committed. If these properties are meant to be replaced with a different approach for handling dimensions, consider implementing the new approach directly.

-// width='100%'
-// height='100%'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// width='100%'
// height='100%'

onClose={closeDrawer}
styles={{
header: { display: showHeader ? 'block' : 'none', ...headerStyle },
footer: { display: showFooter ? 'block' : 'none', ...footerStyle },
body: background,
content: style,
// wrapper: {
// width: style?.width,
// height: style?.height,
// },
Comment on lines +159 to +162
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove commented-out styles wrapper.

Commented-out code creates confusion and clutters the codebase. Based on the AI summary, it appears you're refactoring how styles are managed. Either implement the new approach directly or remove the commented section entirely.

-// wrapper: {
-//   width: style?.width,
-//   height: style?.height,
-// },

If the dimensions are now being handled through a different mechanism (like the customStyle property mentioned in the AI summary), please ensure that's properly implemented and documented.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// wrapper: {
// width: style?.width,
// height: style?.height,
// },

}}
title={label}
size="large"
Expand Down
11 changes: 7 additions & 4 deletions shesha-reactjs/src/designer-components/drawer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,15 @@ const DrawerComponent: IToolboxComponent<IDrawerProps> = {
footerStyle,
footerBackground,
footerShadow,
allStyles,
width,
height,
...props
} = model;

const jsStyle = getStyle(style, data);
//const jsStyle = getStyle(style, data);
const [backgroundStyles, setBackgroundStyles] = useState({});
const borderStyles = useMemo(() => getBorderStyle(border, jsStyle), [border]);
const borderStyles = useMemo(() => getBorderStyle(border, allStyles?.jsStyle), [border]);
const shadowStyles = useMemo(() => getShadowStyle(shadow), [shadow]);

const headerJsStyle = getStyle(headerStyle, data);
Expand All @@ -58,7 +61,7 @@ const DrawerComponent: IToolboxComponent<IDrawerProps> = {
const fetchStyles = async () => {
getBackgroundImageUrl(background, backendUrl, httpHeaders)
.then(async (url) => {
return await getBackgroundStyle(background, jsStyle, url);
return await getBackgroundStyle(background, allStyles?.jsStyle, url);
})
.then((style) => {
setBackgroundStyles(style);
Expand Down Expand Up @@ -114,7 +117,7 @@ const DrawerComponent: IToolboxComponent<IDrawerProps> = {
...shadowStyles,
...stylingBoxAsCSS,
...borderStyles,
...jsStyle,
...model?.allStyles?.jsStyle,
});

const additionalHeaderStyles: CSSProperties = removeUndefinedProps({
Expand Down
3 changes: 2 additions & 1 deletion shesha-reactjs/src/designer-components/drawer/models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { IBorderValue } from '../_settings/utils/border/interfaces';
import { IShadowValue } from '../_settings/utils/shadow/interfaces';
import { IFontValue } from '../_settings/utils/font/interfaces';
import { IInputStyles } from '@/index';
import { CSSProperties } from 'react';

export interface IDrawerProps extends IConfigurableFormComponent {
showFooter?: boolean;
Expand Down Expand Up @@ -45,7 +46,7 @@ export interface IDrawerProps extends IConfigurableFormComponent {
tablet?: IInputStyles;
mobile?: IInputStyles;


customStyle?: CSSProperties;

components?: IConfigurableFormComponent[];
}
Loading
Loading