[ Fix : Snackbar Component Placement, Uses and State Management ]

[rohitPandey469]

Description

In this pull request, I addressed the issue where Snackbar components were not displaying or activating properly. I observed that the Snackbar components were placed within functions, onClicks, or other locations without proper state management. To resolve this, I moved the Snackbar components to the appropriate places and implemented proper state management. My Code Changes reflected in 'StepTitle' 'RemoveStepModal' 'ControlButtons'

Related Issue

Fixes #1118

Motivation and Context

To utilize the Snackbar component correctly and ensure consistent behavior.

How Has This Been Tested?

I tested these changes locally on my machine, focusing on scenarios where Snackbar components were used.

Videos demonstrating at places they are changes by me :

In Step Title:

Codelabz.-.Google.Chrome.2024-01-24.15-58-56.mp4

In Remove Step Modal:

Codelabz.-.Google.Chrome.2024-01-24.15-39-57.mp4

In ControlButtons:

Codelabz.-.Google.Chrome.2024-01-24.15-15-28.mp4

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.