refactor(ui): move react components to react codebase [EE-3354] (#8258)

* refactor(ui): move react components to react codebase [EE-3354]

* refactor(app): move bocx selector options

* refactor(react): spearate portainer components

* fix(app): fix imports

app/react/portainer/gitops/AuthFieldset/AuthFieldset.tsx

@@ -3,7 +3,7 @@ import { boolean, number, object, SchemaOf, string } from 'yup';
 
 import { GitAuthModel } from '@/react/portainer/gitops/types';
 import { useDebounce } from '@/react/hooks/useDebounce';
-import { GitCredential } from '@/portainer/views/account/git-credential/types';
+import { GitCredential } from '@/react/portainer/account/git-credentials/types';
 
 import { SwitchField } from '@@/form-components/SwitchField';
 import { Input } from '@@/form-components/Input';

app/react/portainer/gitops/AuthFieldset/CredentialSelector.tsx

@@ -1,5 +1,5 @@
-import { useGitCredentials } from '@/portainer/views/account/git-credential/gitCredential.service';
-import { GitCredential } from '@/portainer/views/account/git-credential/types';
+import { GitCredential } from '@/react/portainer/account/git-credentials/types';
+import { useGitCredentials } from '@/react/portainer/account/git-credentials/git-credentials.service';
 import { useUser } from '@/react/hooks/useUser';
 
 import { FormControl } from '@@/form-components/FormControl';

app/react/portainer/gitops/GitForm.stories.tsx

@@ -3,7 +3,7 @@ import { Form, Formik } from 'formik';
 import { rest } from 'msw';
 
 import { withUserProvider } from '@/react/test-utils/withUserProvider';
-import { GitCredential } from '@/portainer/views/account/git-credential/types';
+import { GitCredential } from '@/react/portainer/account/git-credentials/types';
 
 import { GitForm, buildGitValidationSchema } from './GitForm';
 import { GitFormModel } from './types';

app/react/portainer/gitops/GitForm.tsx

@@ -5,12 +5,13 @@ import { ComposePathField } from '@/react/portainer/gitops/ComposePathField';
 import { RefField } from '@/react/portainer/gitops/RefField';
 import { GitFormUrlField } from '@/react/portainer/gitops/GitFormUrlField';
 import { GitFormModel } from '@/react/portainer/gitops/types';
-import { GitCredential } from '@/portainer/views/account/git-credential/types';
+import { TimeWindowDisplay } from '@/react/portainer/gitops/TimeWindowDisplay';
 
 import { FormSection } from '@@/form-components/FormSection';
-import { TimeWindowDisplay } from '@@/TimeWindowDisplay';
 import { validateForm } from '@@/form-components/validate-form';
 
+import { GitCredential } from '../account/git-credentials/types';
+
 import { AdditionalFileField } from './AdditionalFilesField';
 import { gitAuthValidation, AuthFieldset } from './AuthFieldset';
 import { AutoUpdateFieldset } from './AutoUpdateFieldset';

app/react/portainer/gitops/TimeWindowDisplay.tsx

@@ -0,0 +1,87 @@
+import moment from 'moment';
+import 'moment-timezone';
+
+import { useCurrentEnvironment } from '@/react/hooks/useCurrentEnvironment';
+
+import { TextTip } from '@@/Tip/TextTip';
+
+import { withEdition } from '../feature-flags/withEdition';
+
+const TimeWindowDisplayWrapper = withEdition(TimeWindowDisplay, 'BE');
+
+export { TimeWindowDisplayWrapper as TimeWindowDisplay };
+
+function TimeWindowDisplay() {
+  const currentEnvQuery = useCurrentEnvironment(false);
+
+  if (!currentEnvQuery.data) {
+    return null;
+  }
+
+  const { ChangeWindow } = currentEnvQuery.data;
+
+  if (!ChangeWindow.Enabled) {
+    return null;
+  }
+  const timezone = moment.tz.guess();
+  const isDST = moment().isDST();
+  const { startTime: startTimeLocal, endTime: endTimeLocal } = utcToTime(
+    { startTime: ChangeWindow.StartTime, endTime: ChangeWindow.EndTime },
+    timezone
+  );
+
+  const { startTime: startTimeUtc, endTime: endTimeUtc } = parseInterval(
+    ChangeWindow.StartTime,
+    ChangeWindow.EndTime
+  );
+
+  return (
+    <TextTip color="orange">
+      A change window is enabled, automatic updates will not occur outside of{' '}
+      <span className="font-bold">
+        {shortTime(startTimeUtc)} - {shortTime(endTimeUtc)} UTC (
+        {shortTime(startTimeLocal)} -{shortTime(endTimeLocal)}{' '}
+        {isDST ? 'DST' : ''} {timezone})
+      </span>
+      .
+    </TextTip>
+  );
+}
+
+function utcToTime(
+  utcTime: { startTime: string; endTime: string },
+  timezone: string
+) {
+  const startTime = moment
+    .tz(utcTime.startTime, 'HH:mm', 'GMT')
+    .tz(timezone)
+    .format('HH:mm');
+  const endTime = moment
+    .tz(utcTime.endTime, 'HH:mm', 'GMT')
+    .tz(timezone)
+    .format('HH:mm');
+
+  return parseInterval(startTime, endTime);
+}
+
+function parseTime(originalTime: string) {
+  const [startHour, startMin] = originalTime.split(':');
+
+  const time = new Date();
+
+  time.setHours(parseInt(startHour, 10));
+  time.setMinutes(parseInt(startMin, 10));
+
+  return time;
+}
+
+function parseInterval(startTime: string, endTime: string) {
+  return {
+    startTime: parseTime(startTime),
+    endTime: parseTime(endTime),
+  };
+}
+
+function shortTime(time: Date) {
+  return moment(time).format('h:mm a');
+}